使用 React 管理多个 websocket

Posted 2023-02-16

【中文标题】使用 React 管理多个 websocket

【英文标题】：Manage multiple websockets with React

【发布时间】：2021-02-27 11:34:24

【问题描述】：

我目前正在使用 JSON RPC 2.0 后端 API 开发基于 React.js 的 SPA。该 API 基于 websockets，需要跨多个 React.js 组件同时打开和管理多个 websocket 连接。

首先，我想使用 React Context API 管理这些套接字连接，并使用自定义提供程序组件保存连接状态并更新上下文和 HOC/Hook。

ReactDOM.render(
    <WebsocketProvider>
        <App />
    </WebsocketProvider>,
    document.getElementById('root')
);

...

export default withWebsocket(App);

这对于单个连接非常有效，但不适用于多个连接。像 Redux 这样的全球性商店似乎不适合存放套接字连接！

我的第二种方法是从 React 生命周期中完全移除对 websocket 连接的管理，并让 react 组件使用一种服务单例。

class MyComponent extends React.Component 

    componentDidMount () 
        const socket = SocketService.get(this.socketId);
        socket.addEventListener('message', () =>  this.setState( ... ) );
    

这种方法原则上是可行的，但对我来说，简单地使用具有唯一标识符的地图似乎很麻烦。

大多数建议建议使用 React Context API 或 Redux 中间件来共享 websocket 连接。但是如何管理跨组件的多个连接呢？有什么建议或进一步的想法吗？

【参考方案1】：

我认为您可以使用以下方式轻松地将多个实例放入您的上下文中：

function WebsocketProvider( children : Props) 
  // some connection codes

  return <Context.Provider value=[instance1, instance2, ...]>children</Context.Provider>;

然后您甚至可以使用一些钩子，例如：useSocketInstance(i)，它从上下文中读取连接并为您提供对套接字实例的正确访问权限。 实现可能是这样的：

const useSocketInstance = (i) => 
   const instances = useContext(YourContext);
   return instances(i);