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}));
}

有没有一种方法可以使用 1 个套接字来完成这两个功能，而不是使用 2 个单独的套接字？换句话说，有一个端点可以同时检索通知和聊天数据，并且在获取该数据后，我有没有办法过滤并将这些单独的数据输入到 2 个组件中？

换句话说，有没有办法保持一个集中的类来处理所有 Websocket 请求并将响应提供给不同的组件？

让我知道您对此的评论并建议我解决此问题的方法。

4

1 回答 1

0

除非我遗漏了什么，否则你想要做的是正确的。管理一个套接字并对消息进行分类，然后根据收到的消息调度不同的操作。

在这里，您有一个实现作为示例：

//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
  }
}

发送或接收消息时有两件重要的事情：事件和数据。

Event通常是一个表示事件的字符串（语义当然必须由业务给出），而Data通常是一个 JSon 对象，其中包含通过套接字发送的任何内容。

您可以在此处和此处查看整个示例，了解使用 [Node + Express + Socket.io] 的服务器示例。

您可以在此处查看工作示例。

如果您需要澄清示例，请告诉我，它非常基本但简单。

于 2017-04-20T13:33:06.700 回答