ReactJS、SocketIO 和 Redux - 什么是正确的设计

Question

大型多组件 ReactJS 应用与套接字 io 后端服务器集成的最佳模式是什么？

这里有一些要求

1. React 应用程序必须在登录时连接到后端(使用基于 Flask 的 socket.io 实现的服务器)。注销时必须断开连接
2. 应该从一个中心位置管理连接(因为我不希望每个组件都连接/断开到 socket-io)。这也应该是管理 socketio 连接生命周期(断开、重新连接等)的地方。
3. 后端将发送异步更新(也就是各种组件的统计信息)。这些统计数据必须由通用的 socketio 处理实例处理并推送到 redux 存储中。消息正文将有足够的信息来解复用消息。
4. 组件本身应该(最好)不知道 socket-io，它们在 redux 状态下运行。
5. 组件可以分派(dispatch)操作，这可能会导致发送 socketio 消息(到后端)。
6. [我没有一个客户需要与另一个客户交谈的用例。]

几个问题:

1. 设计这个的正确方法是什么？我应该在什么时候连接到 socket-io？
2. 我有一个所有页面都使用的基本布局组件。这是连接 socket-io 调用的正确位置吗？但是，我看到每个页面都卸载/加载了该组件。不知何故，这里感觉不太对
3. 我见过一些例子，其中每个页面都打开一个 socketio 连接。我不确定这是不是正确的模型？

Answer 1

我认为你应该将套接字存储在 Context 上，这样你就可以在你的 index.js 文件上创建你的套接字，就像我在这里做的那样:

import React from "react";
import App from "./App";
import socketIOClient from "socket.io-client";
import { MainProvider } from "./context/MainContext.js";

const ENDPOINT = "http://127.0.0.1:1234"; //Your backend endpoint

ReactDOM.render( 
  <React.StrictMode>
    <MainProvider value={{socket: socketIOClient(ENDPOINT)}}>
      <App />
    </MainProvider>
  </React.StrictMode>,
  document.getElementById("root")
);

然后因为它在上下文中，您可以在任何组件中访问它，就像那样:

import React, { useContext } from 'react';
import PropTypes from 'prop-types';

import MainContext from "./context/MainContext"; //import your context here

const myComponent = props => {

    const myContext = useContext(MainContext); //your context is stored in a prop

    return (
        <div></div>
    );
};

myComponent.propTypes = {
    
};

export default myComponent;

最后，您可以通过调用 myContext.socket

访问组件中的套接字