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

Posted 2023-03-07

【中文标题】ReactJS + Socket.IO - 处理套接字连接的最佳方式

【英文标题】：ReactJS + Socket.IO - Best way to handle socket connection

【发布时间】：2018-07-25 11:34:55

【问题描述】：

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

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

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

网上有些地方建议使用context属性来传递socket变量，但是React自己的文档highly discourage the use of 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")
);

【问题讨论】：

React 不鼓励使用商店吗？我认为会有某种方式来组成一个反应存储，它利用一个包装了 WebSocket 的 Observable。

@zero298 那会是用 Redux 吗？

在 App.js（根组件）中创建一个套接字，并将数据作为 props 或使用 redux 传递给子组件。

为简单起见，您可以使用 props/state。只需在根组件中使用 componentWillMount，然后将状态作为 props 传递给子组件。我自己做了这个并且工作正常

【参考方案1】：

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

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

然后在任何地方导入它

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

【讨论】：

thanx man 我有一天的时间，像你的回答这样简单的事情对我有很大帮助

如果您已经设置了一个计数器并且有 7-20 多个您试图找出的随机连接，并且通过组件或上下文设置了套接字连接，请删除这些并使用它，清除我所有的随机连接。确保你也有清理功能！示例：return () => socket.close() 谢谢jsRook，帮了我很多。有时最好回到基础:)

谁能回答这个***.com/questions/62209356/…？

太棒了，谢谢。在 index.js 上进行反应是一个好习惯吗？