ReactとSocket.io：初期データを取得することができますが、新しい投稿が入ったときにビューが更新されません

Question

ソケットの設定方法が問題であるかどうか、またはデータのレンダリングが正しくないリアクションで

私のソケットでデータを正常に取得できますが、新しいデータがサーバーに送信されたときには更新されません。私の意図はReactの州が新しいデータを自動的にレンダリングすることです。ソケット接続のために常に生きています。ここで

は、サーバからメッセージを取得し、それらをレンダリング私のクライアントアプリです：

var Chat = React.createClass({ 
    getInitialState: function() { 
    return { 
     messages: null 
    } 
    }, 
    componentWillMount: function(){ 
    var self = this; 
    socket.emit('getMessages'); 
    socket.on('serverMessages', function (data) { 
     self.setState({messages: data}) 
    }); 
    }, 
    render: function() { 
    var messages = this.state.messages ? <MessageList messages={this.state.messages}/> : null 
    return (
     <div className="jumbotron"> 
     { messages } 
     <MessageForm submitMessage={this.submitMessage}/> 
     </div> 
    ); 
    } 
}); 

ここにデータを発する私のサーバーコードです念のために：

io.on('connection', function (socket) { 

    socket.on('getMessages', function (data) { 
    Message.find(function(err, messages){ 
     socket.emit('serverMessages', messages); 
    }) 
    }); 

}); 

Answer 1

サーバーにコードがあるだけで初期ソケットconnectionに発砲。

サーバー：

socket.on('getMessages', function (data) { 
    Message.find(function(err, messages){ 
    socket.emit('serverMessages', messages); 
    }) 
}); 

クライアント：命名規則に基づいて

var Chat = React.createClass({ 
    getInitialState: function() { 
    return { 
     messages: null 
    } 
    }, 
    componentWillMount: function(){ 
    var self = this; 
    socket.emit('getMessages'); 
    socket.on('serverMessages', function (data) { 
     self.setState({messages: data}) 
    }); 
    }, 
    render: function() { 
    var messages = this.state.messages ? <MessageList messages={this.state.messages}/> : null 
    return (
     <div className="jumbotron"> 
     { messages } 
     </div> 
    ); 
    } 
}); 

、またあなたのMessage.find()は、単一のメッセージを引っ張っていることが表示されます。カーディナリティと一致するようにラベルを明確にすることをお勧めします。

Answer 2

はこのお試しください：今のよう

var Chat = React.createClass({ 
    getInitialState: function() { 
    return { 
     messages: null 
    } 
    }, 
    componentWillMount: function(){ 
    var self = this; 
    socket.emit('getMessages'); 
    socket.on('serverMessages', function (data) { 
     self.setState({messages: data}) 
    }); 
    }, 
    render: function() { 
    var messages = this.state.messages ? <MessageList messages={this.state.messages}/> : null 
    return (
     <div className="jumbotron"> 
     { messages } 
     <MessageForm submitMessage={this.submitMessage}/> 
     </div> 
    ); 
    } 
}); 

Answer 3

をコンポーネントがロードされた後、あなたは「ただ」サーバーからデータをつかみました。あなたは定期的に指定した同じemitステートメントでサーバにpingを実行する（実際にはWebポケットを使用しない点で、長いポーリングを使用する）か、定期的にサーバを稼働させるすべてのクライアントに新しいデータを送信します。

あなたは行うことができますいずれか一方を

A）クライアント側：[理想的ではない]については、「ポーリング」

注：私はOPだった見たので、私は最初に私の答えでこれを入れコントローラがロードされたときの "ポーリング"。コントローラがwebsocketでロードされていない可能性がありますので、ここではクリックしていないので、connectでデータを送信するとここでは動作しない可能性があります。私の悪い。

setInterval(function() { 
    socket.emit('getMessages') 
}, 10000); /* Request data from the socket every 10 seconds */ 

OR

B）サーバー側は：それが利用可能になるように新しいデータを送信する "世論調査" データのための定期的WebSocketを何かで

置き換えsocket.emit('getMessages')。 [ベストウェイ]

クライアント配列を介してすべてのクライアントを追跡し、セッションが終了するとクライアント配列からそれらを削除します。データベース/データストレージから新しいメッセージをプッシュする必要があり

var clients = []; 

io.on('connection', function (socket) { 
    clients.push(socket); 

    socket.on('end', function() { 
     // Could also splice the array below, but it still works. 
     delete clients[clients.indexOf(socket)]; 
    }); 


    /* Previous logic for server goes here */ 
}); 

を実行し、このコード：

for (var i in clients) { 
    clients[i].emit('serverMessages', /* messages object */); 
} 

Answer 4

それはcomponentWillMountのライフサイクルメソッドにその原因可能だろうか？代わりにcomponentDidMountを試してみてください。

レンダリングは状態の更新を表示しますが、facebookに従った状態の変更にもかかわらず一度だけ実行されるようです。