title: Websocket transport reliability (Socket.io data loss during reconnection)
body: <h2>Used</h2>
  
  <p>NodeJS, Socket.io</p>
  
  <h2>Problem</h2>
  
  <p>Imagine there are 2 users <strong>U1</strong> &amp; <strong>U2</strong>, connected to an app via Socket.io. The algorithm is the following:</p>
  
  <ol>
  <li><strong>U1</strong> completely loses Internet connection (ex. switches Internet off)</li>
  <li><strong>U2</strong> sends a message to <strong>U1</strong>.</li>
  <li><strong>U1</strong> does not receive the message yet, because the Internet is down</li>
  <li><strong>Server</strong> detects <strong>U1</strong> disconnection by heartbeat timeout</li>
  <li><strong>U1</strong> reconnects to socket.io</li>
  <li><strong>U1</strong> never receives the message from <strong>U2</strong> - it is lost on Step 4 I guess.</li>
  </ol>
  
  <h2>Possible explanation</h2>
  
  <p>I think I understand why it happens: </p>
  
  <ul>
  <li>on Step 4 <strong>Server</strong> kills socket instance and the queue of messages to <strong>U1</strong> as well</li>
  <li>Moreover on Step 5 <strong>U1</strong> and <strong>Server</strong> create new connection (it is not reused), so even if message is still queued, the previous connection is lost anyway.</li>
  </ul>
  
  <h2>Need help</h2>
  
  <p>How can I prevent this kind of data loss? I have to use hearbeats, because I do not people hang in app forever. Also I must still give a possibility to reconnect, because when I deploy a new version of app I want zero downtime.</p>
  
  <p>P.S. The thing I call "message" is not just a text message I can store in database, but valuable system message, which delivery must be guaranteed, or UI screws up.</p>
  
  <p>Thanks!</p>
  
  <hr>
  
  <h2>Addition 1</h2>
  
  <p>I do already have a user account system. Moreover, my application is already complex. Adding offline/online statuses won't help, because I already have this kind of stuff. The problem is different. </p>
  
  <p>Check out step 2. On this step we technically <strong>cannot say if U1 goes offline</strong>, he just loses connection lets say for 2 seconds, probably because of bad internet. So U2 sends him a message, but U1 doesn't receive it because internet is still down for him (step 3). Step 4 is needed to detect offline users, lets say, the timeout is 60 seconds. Eventually in another 10 seconds internet connection for U1 is up and he reconnects to socket.io. But the message from U2 is lost in space because on server U1 was disconnected by timeout. </p>
  
  <p>That is the problem, I wan't 100% delivery.</p>
  
  <hr>
  
  <h2>Solution</h2>
  
  <ol>
  <li>Collect an emit (emit name and data) in {} user, identified by random emitID. Send emit</li>
  <li>Confirm the emit on client side (send emit back to server with emitID)</li>
  <li>If confirmed - delete object from {} identified by emitID</li>
  <li>If user reconnected - check {} for this user and loop through it executing Step 1 for each object in {}</li>
  <li>When disconnected or/and connected flush {} for user if necessary</li>
  </ol>
  
  <pre><code>// Server
  const pendingEmits = {};
  
  socket.on('reconnection', () =&gt; resendAllPendingLimits);
  socket.on('confirm', (emitID) =&gt; { delete(pendingEmits[emitID]); });
  
  // Client
  socket.on('something', () =&gt; {
      socket.emit('confirm', emitID);
  });
  </code></pre>
  
  <h2>Solution 2 (kinda)</h2>
  
  <p><em>Added 1 Feb 2020.</em></p>
  
  <p>While this is not really a solution for Websockets, someone may still find it handy. We migrated from Websockets to SSE + Ajax. SSE allows you to connect from a client to keep a persistent TCP connection and receive messages from a server in realtime. To send messages from a client to a server - simply use Ajax. There are disadvantages like latency and overhead, but SSE guarantees reliability because it is a TCP connection.</p>
  
  <p>Since we use Express we use this library for SSE <a href="https://github.com/dpskvn/express-sse" rel="noreferrer">https://github.com/dpskvn/express-sse</a>, but you can choose the one that fits you.</p>
  
  <p>SSE is not supported in IE and most Edge versions, so you would need a polyfill: <a href="https://github.com/Yaffle/EventSource" rel="noreferrer">https://github.com/Yaffle/EventSource</a>.</p>