时间戳

首页 > 解决方案 > ReactJS、SocketIO 和 Redux - 什么是正确的设计

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

问题描述

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

以下是一些要求

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

几个问题：

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

标签： reactjsreduxsocket.io

解决方案

我认为您可能应该将套接字存储在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

推荐阅读