使用 React、Redux 和 Websocket 处理请求

Posted 2023-02-16

【中文标题】使用 React、Redux 和 Websocket 处理请求

【英文标题】：Request handling with React, Redux and Websocket

【发布时间】：2017-04-20 13:09:52

【问题描述】：

我正在开发一个使用 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 请求并将响应提供给不同的 组件？

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

【问题讨论】：

只使用一个套接字并对通过它发送的消息进行分类。然后，您只需要根据收到的消息类别发送不同的操作。看看here line 292

嗨，你有机会看看我的例子吗？让我知道您是否需要其他东西。谢谢。

【参考方案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
  

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

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

您可以查看整个示例 here 和 here 以获取使用 [Node + Express + Socket.io] 的服务器示例。

您可以查看工作示例here。

如果你需要澄清这个例子，请告诉我，它非常基本但很简单。

【讨论】：

查看我的 repo，您​​会发现整个代码都可以正常工作，但我认为您需要的是 this，我将此作为教程。那么你需要知道的唯一重要的事情就是如何接收消息。

我觉得你的例子没问题，但是你不需要打开两个套接字，一个就足够了，从客户端你只需要一个开关来区分事件，从服务器端，使用同一个套接字为一切。

嗨@facundo-la-rocca，非常感谢您的回答。这正是我想要的，但如果你能给我一个小教程或指导，我将不胜感激。谢谢。