Question

我是React的新手，我在组件结构方面存在一些问题，并且在它们之间共享一个websocket。

该应用程序包含类别和产品。初始数据加载将使用Ajax请求完成，并且将使用websocket保持数据更新。

我的组件层次结构如下所示：

CategoriesList
- 类别
  - 产品列表
    - 产品

CategoriesList保存类别的状态，ProductsList保存类别中的产品状态。

所以我想在CategoriesList和ProductsList中使用相同的websocket，但是要监听不同的websocket事件：category：updated and product：updated。

如何在组件之间共享websocket以及在哪里初始化它？

由于每个类别都有一个ProductsList，这是否意味着产品：更新的事件将多次触发（每个类别一个）？我想这在性能方面不是一件好事。

Answer 1

我建议在CategoriesList中初始化套接字连接，然后将连接作为道具传递给子组件。传递连接时，您应该能够使用它来监听子组件中所需的特定事件。

这是github上使用react和socket.io的示例应用程序。套接字在父组件中初始化，然后向下传递。 https://github.com/raineroviir/react-redux-socketio-chat/blob/master/src/common/containers/ChatContainer.js

在第9行，初始化连接，然后在第23行，它作为道具传递下来。该连接稍后在子组件中用于接收和发出事件。例如：https://github.com/raineroviir/react-redux-socketio-chat/blob/master/src/common/components/Chat.js

Answer 2

共享同一实例的另一种方法是简单地创建一个新文件，如下所示：socketConfig.js

import openSocket from 'socket.io-client';

const socket = openSocket("http://localhost:6600");

export default socket;

并在所需的任何文件中使用它，只需将其导入。

import socket from "../socketConfig";

这对我有用，因为我将其用于两个互不依赖的不同组件中。

Answer 3

只需在组件外部声明套接字，就一样...

import SocketIOClient from 'socket.io-client';   
const socket=SocketIOClient('http://localhost:3000/chat')

function App() {
    //use socket here ...

    return (
        <div> </div>);
}

Answer 4

参见react-cent 您可以编写自己的Provider（CentProvider.js）来包装组件并通过上下文提供客户端。此外，编写高阶组件（CentComponent.js）使其可用于this.props.<client>

Reactjs：如何在组件之间共享websocket

4 个答案: