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

Question

我正在尝试使用Node和Socket.IO创建ReactJS实时应用程序，但是我很难找到处理客户端socket连接的最佳方法。

我有多个React组件都需要从服务器获取一些信息，并通过socket连接实时传输。但是当在不同的文件中导入socket.io-client依赖项并建立与服务器的连接时，我会得到多个连接到服务器的连接，这似乎并不是最优的。

因此，我想知道是否有更好的解决方案可以在不必为每个组件创建新连接的情况下共享连接。也许可以在主app.js文件中进行连接，然后将其传递给子组件以供后续使用。

一些在线平台建议使用context属性来传递socket变量，但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
            });
        });
    }
    // ...
}

app.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")
);

- Phoenix1355

---

React鼓励使用store吗？我认为应该有一种方法来组合一个React store，利用包装WebSocket的Observable。 - zero298

@zero298 这需要使用Redux吗？ - Phoenix1355

在App.js（根组件）中创建一个socket，并通过props或使用redux将数据传递给子组件。 - Bharat Chhabra

为了简单起见，您可以使用props/state。只需在根组件中使用componentWillMount，然后将状态作为props传递给子组件即可。我刚刚自己尝试过，效果很好。 - Mark Robson

Answer 1

您可以创建一个套接字连接，然后像这样导出它：

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

然后可以在任何地方导入它

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

- Ashad Nasim

---

如果您已经设置了一个计数器，并且有7-20个以上的随机连接需要解决，而且已经通过组件或上下文设置了套接字连接，请将其删除并使用此方法，这样可以清除所有随机连接。确保您也有一个清理函数！例如：return () => socket.close()感谢jsRook，帮助我解决了很多问题。有时候回归基础是最好的选择 :) - DORRITO

太棒了，谢谢。在React的index.js上这样做是一个好的实践吗？ - eemilk