React、Redux、Websocketによるリクエスト処理

Question

私はReactJS、Redux、およびWebsocketを使用するアプリケーションを開発しています。このアプリケーションでは、ライブレンダリング機能を実装しています。 （ユーザーはページを更新せずに画面に通知を表示します）。

私がレンダリングする必要がある2つのコンポーネントがあるとしましょう。私はこれらの2つのコンポーネントのデータを取得するために2つの別々のエンドポイントへのアクセスに2つの別々のソケットを開くことを考えていた

• 通知
• チャット

。代わりに、2つの独立したソケットを使用する

通知コンポーネント

componentDidMount() { 
    io("sample.data/endpoint/notification").on("data", data => this.setState({notificationData: data})); 
} 

チャットコンポーネント

componentDidMount() { 
    io("sample.data/endpoint/chat").on("data", data => this.setState({chatData: data})); 
} 

、iは1つのソケットを使用してこれらの両方の機能を行うことができる方法はありますか？つまり、通知とチャットの両方のデータを取得するエンドポイントがあり、そのデータを取得した後、それらのデータをフィルタリングして2つのコンポーネントにフィードする方法はありますか？言い換えれば

、異なる 部品への応答を すべてのWebSocket要求を処理し、養うための集中クラスを維持する方法はありますか？

これに関するご意見をお聞かせください。これにアプローチする方法を提案してください。

Answer 1

私が何かを逃していない限り、あなたがしたいことは正しいです。 1つのソケットを管理し、メッセージをクラス化し、受信したメッセージに応じて異なるアクションをディスパッチします。ここで

あなたは一例として、実装を持っている：イベントとデータ：メッセージを送信または受信するとき

//Open a connection 
static startWebsocketConnection() { 
    return new Promise((resolve, reject) => { 
     try { 
     let W3CWebSocket = require('websocket').w3cwebsocket; 
     let client = new W3CWebSocket('ws://localhost:8081/'); 
     return resolve(client) 
     } catch (error) { 
     return reject(error) 
     } 
    }) 
} 

//Dispatch an action depending on the message received 
export function openChatWebSocket(chatid) { 
    return dispatch => { 
    return startWebsocketConnection() 
     .then(client => { 
     client.onerror = function() { console.log('Connection Error'); }; 

     client.onopen = function() { console.log('WebSocket Client Connected'); }; 

     client.onclose = function() { console.log('echo-protocol Client Closed'); }; 

     client.onmessage = function (e) { 
      if (typeof e.data === 'string') { 
      let message = JSON.parse(e.data) 
      switch (message.event) { 
       case 'new-message': 
       dispatch(newMessageNotification(message)) 
       break; 

       case 'new-participant': 
       dispatch(anotherAction(message)) 
       break; 

       case 'remove-participant': 
       dispatch(anotherAction2(message.data.chatid, message.data.participant)) 
       break; 

       default: 
       break; 
      } 
      } 
     }; 
     }) 
     .catch(error => dispatch(errorOpeningWebsocket(error.message))) 
    } 
} 

//One action as an example 
export const newMessageNotification = (message) => { 
    return { 
    type: 'NEW_MESSAGE_NOTIFICATION', 
    message 
    } 
} 

は、2つの重要なものがあります。

イベントは、通常、データは通常ソケットを介して送信されたどの含むJSONオブジェクトであるイベントを表す文字列（セマンティックはもちろんの商務によって与えられなければならない）とあります。

[Node + Express + Socket.io]を使用したサーバの例については、例hereとhereをすべて見ることができます。

作業例hereを見ることができます。

例を明確にする必要がある場合は、非常に基本的ですがシンプルです。