React.js：如何在组件之间共享WebSocket

Question

我是React的新手，并且在组件结构和它们之间共享Websocket方面遇到一些问题。

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

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

• 分类列表
  • 类别
    • 产品列表
      • 产品

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

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

我如何在组件之间共享Websocket，以及在哪里进行初始化？

由于每个类别都有一个ProductsList，这是否意味着product：updated事件将多次触发（每个类别一个）？我猜这对性能而言不是一件好事。

Answer 1

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

import openSocket from 'socket.io-client';

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

export default socket;

并在您想要的任何文件中使用它，只需导入它。

import socket from "../socketConfig";

这对我有用，因为我在 2 个不相互依赖的不同组件中使用它。

Answer 2

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

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

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