使用 React 管理多個 websocket

Question

我目前正在使用 JSON RPC 2.0 后端 API 開發基於 React.js 的 SPA。 這個 API 基於 websockets，需要同時跨多個 React.js 組件打開和管理多個 websocket 連接。

首先，我想使用 React Context API 和一個自定義提供程序組件來管理這些套接字連接，該組件保存連接 state 並更新上下文和 HOC/Hook。

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

...

export default withWebsocket(App);

這對於單個連接非常有效，但不適用於多個連接。 像 Redux 這樣的全球商店似乎不是保持套接字連接的正確位置！

我的第二種方法是從 React 生命周期中完全刪除 websocket 連接的管理，並讓反應組件使用一種服務 singleton。

class MyComponent extends React.Component {

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

這種方法原則上是可行的，但對我來說，簡單地使用具有唯一標識符的 map 似乎有很多黑客行為。

大多數建議建議使用 React Context API 或 Redux 中間件來共享 websocket 連接。 但是如何管理跨組件的多個連接呢？ 有什么建議或進一步的想法嗎？

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