1

ReactJS、Redux、および Websockets を使用するアプリケーションを開発しています。このアプリケーションでは、ライブ レンダリング機能を実装しています。(ユーザーは、ページを更新しなくても画面に通知を受け取ります)。

レンダリングする必要がある 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}));
}

2 つの別々のソケットを使用する代わりに、1 つのソケットを使用してこれらの両方の機能を実行できる方法はありますか? つまり、通知データとチャット データの両方を取得するエンドポイントがあり、そのデータを取得した後、それらの個別のデータをフィルター処理して 2 つのコンポーネントにフィードする方法はありますか?

言い換えれば、すべての Websocket 要求を処理し、応答をさまざまなコンポーネントにフィードする集中クラスを維持する方法はありますか?

これに関するあなたのコメントを教えてください。これにアプローチする方法を提案してください。

4

1 に答える 1

0

私が何かを見逃していない限り、あなたがやりたいことは正しいです。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 つあります: EventとDataです。

Eventは通常、イベントを表す文字列であり (セマンティックはもちろんビジネスによって与えられる必要があります)、Dataは通常、ソケットを介して送信されたものを含む JSON オブジェクトです。

[Node + Express + Socket.io] を使用したサーバーの例については、こちらとこちらの例全体をご覧ください。

ここで実際の例を見ることができます。

例を明確にする必要がある場合はお知らせください。これは非常に基本的ですが単純です。

于 2017-04-20T13:33:06.700 に答える