コンポーネントとストアで使用する単一のwebsocket接続

Question

私は、サーバーからのすべてのデータを格納するmobxストアを持っています。

// stores.js

class User { 
    @observable userInfo = null; 
    @observable webSocketConnected = false; 
} 

class Trend { 
    @observable latest_trends = null; 
} 

私はWebSocketを介してサーバへのユーザ入力を入力して送信するためのコンポーネントを持っています。

@inject('UserStore') @observer 
export default class Editor extends React.Component { 
    componentDidMount() { 
     socket = new WebSocket(newURL); 
    } 

    sendText =() => { 
     // socket.send(...) and update to the store 
    } 

    render() { 
     return (
      <View style={styles.container}> 
       ... 
       <TextInput 
        value={this.state.text} 
        ... 
        style={styles.text}/> 
      </View> 
     ) 
    } 

} 

ユーザーのコメントに投票できる別のコンポーネントがありますが、これはWebサーバー経由でサーバーに更新したいものです。

@inject('TrendStore') @observer 
export default class Editor extends React.Component { 
    updateComment =() => { 
     // socket.send(...) 
    } 

    render() { 
     return (
      <TouchableOpacity onPress={this.updateComment}> 
       <Icon/> 
      </TouchableOpacity> 
     ) 
    } 
} 

私はすべての私の店やコンポーネントで使用できるようにどのように私は、1つのWebSocket接続を作成することができますか？

Answer 1

websocketにアクセスする必要があるすべてのストアのコンストラクタに渡されるwebsocketサービスクラスを作成します。プログラムのメインファイルでは、すべてのストアを初期化してコンポーネントに提供します。

const webSocketService = new WebSocketService(); 
const userstore = new UserStore(websocketService); 
const trendStore = new TrendStore(websocketservice); 
const stores = { userStore, trendStore }; 
... 
<Provider {...stores} > 
    ... 
</Provider> 

WebSocketServiceだからあなたはすべての店に同じを与えている

• 送信（メッセージ）

• registerEventListener（イベント、リスナー）

のようなメソッドを持つことができますwebsocketServiceのインスタンス

ヒント：送信ロジックまたはその他のビジネスログインをコンポーネントに書き込まないでください。 sendMessage（メッセージ）のような特定のストアにメソッドを追加し、このメソッドをコンポーネントから呼び出します。

これはあなたの質問にお答えします。