title: Flux and WebSockets
body: <p>I'm using Flux and WebSocket in my Reactjs application and during implementation I've encountered some problems.</p>
  
  <p><strong>Questions:</strong></p>
  
  <ul>
  <li><p>Assuming I have a set of a set of actioncreators and a store for managing the WebSocket connection, and that the connection is started in a actioncreator (<code>open(token)</code>), where should I put my <code>conn.emit</code>'s and how do I get other actions access to my connection object so that they can send data to the backend?</p></li>
  <li><p>Do I have to pass it as an argument to the actions that are called in the views (eg. <code>TodoActions.create(conn, todo)</code>) or is there a smarter way?</p></li>
  </ul>
  
  <p><strong><a href="https://gist.github.com/jwadsager/efefd7916f809d4b8829" rel="nofollow">Current code is here</a></strong></p>
  
  <p>I'm using ES6 classes.</p>
  
  <p>If I have omitted anything necessary in the gist, please let me know.</p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>This is what I have concocted so far based on glortho's answer:</p>
  
  <pre><code>import { WS_URL } from "./constants/ws";
  import WSActions from "./actions/ws";
  
  class WSClient {
      constructor() {
          this.conn = null;
      }
  
      open(token) {
          this.conn = new WebSocket(WS_URL + "?access_token=" + token);
          this.conn.onopen = WSActions.onOpen;
          this.conn.onclose = WSActions.onClose;
          this.conn.onerror = WSActions.onError;
  
          this.conn.addEventListener("action", (payload) =&gt; {
              WSActions.onAction(payload);
          });
  
      }
  
      close() {
          this.conn.close();
      }
  
      send(msg) {
          return this.conn.send(msg);
      }
  }
  
  export default new WSClient();
  </code></pre>