ReactJS + Socket.IO - 处理套接字连接的最佳方式

Question

我正在尝试使用 Node 和 Socket.IO 制作一个 ReactJS 实时应用程序，但是我很难找出在客户端处理我的套接字连接的最佳方法。

我有多个 React 组件，它们都需要来自服务器的一些信息，最好通过套接字连接实时获取。但是，在导入socket.io-client依赖项并在不同文件中建立与服务器的连接时，我获得了与服务器的多个连接，这似乎并不是最佳选择。

所以我想知道是否有更好的解决方案来共享多个组件之间的连接，而不必为每个组件创建一个新的连接。也许通过在主app.js文件中建立连接，然后将其传递给子组件以供以后使用。

网上有些地方建议使用context属性来传递套接字变量，但 React 自己的文档强烈反对使用 context。

下面的代码只是一个例子，不是实际的代码，因为实际项目中不必要的代码比说明问题所需的要多得多。

foo.js

import React from 'react';
import io from 'socket.io-client';

const socket = io("http://localhost:3000");

class Foo extends React.Component {
    // ...
    componentDidMount() {
        socket.on("GetFooData", (data) => {
            this.setState({
                fooData: data
            });
        });
    }
    // ...
}

bar.js

import React from 'react';
import io from 'socket.io-client';

const socket = io("http://localhost:3000");

class Bar extends React.Component {
    // ...
    componentDidMount() {
        socket.on("GetBarData", (data) => {
            this.setState({
                barData: data
            });
        });
    }
    // ...
}

应用程序.js

import React from 'react';
import ReactDOM from 'react-dom';
import Foo from './foo';
import Bar from './bar';

const App = () => {
    return (
        <div className="container">
            <Foo />
            <Bar />
        </div>
    );
};

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

Answer 1

您可以创建一个套接字连接，然后将其导出，如下所示，

import io from "socket.io-client";
let socket = io("http://localhost:8000/chat");
export default socket;

然后在任何地方导入

import socket from "../../socket/socket";