Question

我正在学习ReactJS，Express和socket.io，它创建了一个小应用程序，用户可以在其中加入房间，并在房间内互相交流（内容NYI）。目前，我们的想法是拥有RoomList视图和单独的Room视图。房间中的当前用户数应该在RoomList中可见（例如Room 1: 2 users）。

我的路由器配置如下所示：

<Router history={hashHistory}>
    <Route path="/" component={App}>
        <Route path="rooms" component={RoomList}></Route>
        <Route path="rooms/:roomId" component={Room}></Route>
    </Route>
</Router>

App组件：

export default React.createClass({
  componentDidMount() {
    var socket = io.connect('/')
    socket.on('connect', function(data) {
      socket.emit('message', "Dududu")
      socket.on('message', function(data) {
        console.log("Message:", data);
      })
    })
  },

  render() {
    return (
      <div>
        {this.props.children}
      </div>
    )
  }
})

问题是，如何在另一个组件中访问此处创建的套接字实例？例如，我想在Room组件中添加套接字事件以加入/离开房间和其他房间特定事件，更新RoomList组件中RoomList的用户数等。如何全局共享套接字对象，或者什么是处理套接字和多个组件的推荐做法吗？

Answer 1

通过激烈的谷歌搜索和github问题搜索找到要做的事情，在App组件中执行this.setState({socket: socket})，然后在视图中使用React.cloneElement，将套接字作为道具传递。然后，您可以通过this.props.socket从子组件访问套接字。

export default React.createClass({
  componentWillMount() {
    var socket = io.connect('/');
    this.setState({socket: socket});
  },

  render() {
    return (
      <div>
        {
          React.cloneElement(this.props.children, {socket: this.state.socket})
        }
      </div>
    )
  }
})

Answer 2

我刚刚在聊天应用程序上完成的另一种解决方案，可以在不进行任何渲染的情况下发送实时通信。

我只是在父组件状态下使用uuid来创建一个ID，我可以将该ID从父组件传递给上下文，然后在任何子组件中进行访问。那时，我只是在要与之共享信息的任何组件之间创建了一个空间，并使用uuid对其进行了命名。

之所以选择这条路线而不是Fissio的原因是因为我不想在状态中存储那个巨大的套接字。

现在您可以有多个用户，每个用户都有一个专门针对他们的套接字！

ReactJS，react-router和socket.io

2 个答案: