Reactとwebsocket - データ操作

Question

私はwebsocketを通じてサーバーとの通信を実装しようとしています。 Fluxや類似のライブラリを使用できないとします。私の問題は、サーバーの応答に関するデータを更新することです。

データを更新するためのサーバー応答でコールバック関数を実装する方法がわかりません。

これまでのところ、私はこのような何か（ない実際のコード）

events.js

const e = require('event-emitter'); 
var events = e(); 
module.exports = events; 

socket.js

const events = require('./events'); 

module.exports = { 
    var ws; 

    init: function(URL) { 
    ws = new WebSocket(URL); 
    ws.onopen = function() { ... } 
    ws.onclose = function() { ... } 
    ws.onmessage = function(data) { 
     events.emit(data.action, data); 
    } 

    }, 

    send: function(data) { 
    ws.send(data); 
    } 
} 

model.jsを持って

const events = require('./events') 
var data = []; 

/* listening for some specific event from socket */ 
events.on("action", doAction); 

function doAction(data) { 
    events.push(data); 

    /* now I have to emit event which react component 
    is listening to so it can update data */ 
    events.emit("viewAction"); 
    } 
} 

/* what react component uses to get and render data */ 
module.exports = { 
    get:() => data, 
    events: events 
} 

component.js

const React = require('react'); 
const ReactDOM = require('react-dom') 
const model = require('./model'); 

var App = React.createClass({ 
    componentDidMount: function() { 
    model.events.on('viewAction', this.refresh); 
    }, 

    componentWillUnmount: function() { 
    model.events.off('viewAction', this.refresh); 
    } 

    render: function() { 
    return (
     <div> 
     {model.get()} 
     </div> 
    ) 
    } 
} 

ReactDOM.render(
    <App />, 
    document.getElementById('app') 
); 

私は、サンプルがそれを明確に私は何をしようとしていますし、何を私の問題があるになりたいと考えています。これはまた、モデル・イベント・リスナーが、それほどうれしくないリアクション・コンポーネントの1つに含まれていない限り動作しません。

良い方法がありますか？

Answer 1

あなたがここに持っていることはflux architectureの単純な実装です：お使いの場合には

、あなたの行動は、WebSocketのサーバー応答から来て、あなたのディスパッチャはWebSocketのある、そしてあなたの店がモデルです。

さらにデザインを改善するためのポイントのカップル：それは内部的に再レン​​ダリング呼び出すよう

• はthis.setState()を使用して、その状態にmodel.get()保存コンポーネントにthis.refreshを持っています。
• コンポーネントにshouldComponentUpdate()を含めて、コンポーネントを実際に更新する必要があるかどうかを判断するために、古い状態と現在の状態を比較します。 これにより、アプリケーションの効率が大幅に改善され、ドキュメントのリフロー量が削減されます。
• コンポーネントがUIイベントを受信するたびに、そのイベントがアプリケーション状態に何らかの影響を及ぼす場合は、websocket経由のイベントをサーバーは、コンポーネント・ビューをリフレッシュするために必要なすべての更新を送信できるようにします。
  • オプションで、モデルがサーバーとの通信をせずにUIイベントからアプリケーションの状態を判断できるが、そのモデルがその変更をコンポーネントに伝播することを確認できる場合は、UIイベントをモデルに送信することもできますアプリケーションの真実の源であるサーバーから非同期にならないように、サーバーに接続します。

あなたが書いているものは何でも上の

幸運！