ReactJS、react-router 和 socket.io答案

【问题标题】：ReactJS, react-router and socket.ioReactJS、react-router 和 socket.io
【发布时间】：2016-11-09 13:40:05
【问题描述】：

我正在通过制作一个小型应用程序来学习 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 的用户计数等。如何全局共享套接字对象，或者什么处理套接字和多个组件的推荐做法是什么？

【问题讨论】：

标签： reactjs socket.io react-router

【解决方案1】：

通过积极的谷歌搜索和github问题搜索找到了要做什么，在App组件中做this.setState({socket: socket})，然后对于视图，使用React.cloneElement，将套接字作为道具传递。然后就可以通过this.props.socket从子组件访问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>
    )
  }
})

【讨论】：

【解决方案2】：

我刚刚在我的聊天应用程序上做的另一个解决方案，我可以在没有任何渲染的情况下发送实时通信。

我只是在父组件状态中使用uuid 来创建一个我可以从父组件传递到上下文然后在任何子组件中访问的 id。那时我只是在我想与之共享信息的任何组件之间创建了一个房间，并使用 uuid 命名它。

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

现在您可以拥有多个用户，每个用户都有一个专用的套接字！

【讨论】：