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

【问题标题】：ReactJS, SocketIO & Redux - What is the right designReactJS、SocketIO 和 Redux - 什么是正确的设计
【发布时间】：2020-02-14 03:30:52
【问题描述】：

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

以下是一些要求

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

几个问题：

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

【问题讨论】：

标签： reactjs redux socket.io

【解决方案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来访问组件中的socket

【讨论】：