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

我是个新手，在组件结构和共享websocket方面遇到了一些问题

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

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

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

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

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

如何在组件之间共享websocket，以及在何处进行初始化

---

由于每个类别都有一个ProductsList，这是否意味着products:Update事件将触发多次（每个类别一次）？我想就性能而言，这不是一件好事。

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

下面是github上使用react和socket.io的示例应用程序。套接字在父组件中初始化，然后向下传递

在第9行，连接被初始化，然后在第23行，它被作为道具传递。该连接稍后在子组件中用于接收和发出事件。例如：

参见

---

您可以编写自己的提供者（CentProvider.js）来包装组件，并通过上下文提供客户端。此外，编写更高阶的组件（CentComponent.js）以使其可与

this.props一起使用。

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

import openSocket from 'socket.io-client';

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

export default socket;

如果您想在任何文件中使用它，只需导入即可

import socket from "../socketConfig";

---

这对我来说很有用，因为我在两个不同的组件中使用它，这两个组件互不依赖。

只需在组件外部声明套接字，同样的

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

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

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

从“socket.io客户端”导入SocketIOClient；
const socket=SocketIOClient（'http://localhost:3000/chat')
函数App（）{
//在这里使用套接字。。。
返回(
);
}

我将使用tweet来描述React在多大程度上关心您的实现，我将传递套接字连接实例（可能通过上下文？！），该实例将允许组件侦听更改。随便用你喜欢的东西。React不会限制您。是的，您可以通过道具共享它，或者使用类似Flux的体系结构，插座位于您可以从任何地方访问的商店中。在

componentDidMount

中侦听事件，并在

componentWillUnmount

中取消侦听事件。您是否使用了任何web套接字库，例如socket.IO？@Aaron我使用的是Pusher.com提供的库这个答案（对一个老问题）在很大程度上依赖于指向第三方软件包的链接，而该软件包可能并不总是存在。将来，请在您的textRender中包含OP问题的特定信息，以便在服务器端创建多个连接。这不是最优的。这是有帮助的答案！一个扩展：如果URL本身是动态的，并且依赖于将值加载到其中的组件，您将如何做？openSocket（dynamiccurlhere）嗨，我有一个非常类似的问题，如果你能帮助我的话。如何将其用于react和JS？ie我有一个使用reactHi的Phaser游戏的JS文件，你能看看这个问题吗。