title: ReactJS, react-router and socket.io
body: <p>I'm learning ReactJS, Express and socket.io by making a small application where users can join rooms, and interact with each other inside the room (content NYI). Currently, the idea is to have a RoomList view, and an individual Room view. The number of current users in a room should be visible in the RoomList (<code>Room 1: 2 users</code>, for example).</p>
  
  <p>My router config looks like this:</p>
  
  <pre><code>&lt;Router history={hashHistory}&gt;
      &lt;Route path="/" component={App}&gt;
          &lt;Route path="rooms" component={RoomList}&gt;&lt;/Route&gt;
          &lt;Route path="rooms/:roomId" component={Room}&gt;&lt;/Route&gt;
      &lt;/Route&gt;
  &lt;/Router&gt;
  </code></pre>
  
  <p>And the App component:</p>
  
  <pre><code>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 (
        &lt;div&gt;
          {this.props.children}
        &lt;/div&gt;
      )
    }
  })
  </code></pre>
  
  <p>The problem is, how can I access the socket instance created here in another component? For example, I'd like to add socket events for joining/leaving a room and other room-specific events in the Room component, updating the RoomList's user count in the RoomList component etc. How can I share the socket object globally, or what is the recommended practice for dealing with sockets and multiple components?</p>