Question

我必须将套接字作为道具传递给我的React组件：

<Component1 socket={this.state.socket}/>

因此，要订阅来自另一个组件或子组件中的服务器的消息，我需要将其再次传输到其属性。这太糟糕了。所以... 如何在WebPack + ReactJS项目中全局设置Socket.io（v1.7.3）连接？在每个组件中使用socket.on（）和socket.emit（）而不声明。

Answer 1

既然你没有提到，我猜你没有使用Flux？从它的主页：

Flux是Facebook用于构建客户端Web应用程序的应用程序架构。它通过利用单向数据流来补充React的可组合视图组件。它更像是一种模式，而不是一种正式的框架，你可以在没有大量新代码的情况下立即开始使用Flux。

如果使用Flux，则不必传递套接字对象，同时仍可以很好地执行它与React组件之间的通信。例如，使用以下格式：

const Dispatcher = require('./Dispatcher)';
const socket = require('socket.io-client')();

// Listen to events from server -> Emit them to listeners in the client app
socket.on('EVENT_A', data => {
  data.type = 'EVENT_A';
  Dispatcher.dispatch(data);
});

// Listen to events from the client app -> Emit them to server
Dispatcher.register(payload => {
  switch(payload.type) {
    case 'EVENT_B':
      socket.emit('EVENT_B', payload.data);
      break;
    case 'EVENT_QUIT':
      socket.disconnet();
      location.assign('/exit');
      break;
    default: break;
  }
});

您可以将与套接字相关的代码放在一个文件中，Flux的调度程序将通过Flux存储或直接对React组件本身进行所有通信工作。

如何在WebPack + ReactJS项目中全局设置Socket.io（v1.7.3）连接？

1 个答案: