title: Unexplained Lag In Websocket Connection Using Socket.io Exactly 10 Seconds From Page Load
body: <p><strong>Problem:</strong> I have a security camera that only remotely exposes the current frame, requiring me to poll for this frame on an interval to get a video-like stream. To synchronize the frame shown to all of the clients, I am using Socket.io to stream the frames as base64 strings from the server every 500ms. The problem I am encountering is that on my desktop computer, everything works perfectly fine but on slower devices (phones and tablets) the feed would stop on a frame and wait a while (around 40-60 secs) and then a bunch of frames would rush in to try to catch up. The feed ends up with a 10ish second delay from then on. </p>
  
  <p><strong>Steps Taken/Info/Context:</strong> </p>
  
  <ul>
  <li>This occurs almost exactly 10 seconds after the pages loads.</li>
  <li>The socket successfully sends me a few images until the lag starts, so
  its not even the first time this code gets run.</li>
  <li>I am not doing anything specific at that moment so its not a blocking function.</li>
  <li>The images are compressed so the base64 string size does not exceed Socket.io's message size limit.</li>
  <li>I tried moving the socket code to a web worker so that it would be on a separate thread but the lag still exists.</li>
  <li>Socket.io's debug information does not show anything specific at that moment, all websocket activity simply stops, the websocket reports a <code>ping timeout</code>, it reconnects successfully and then everything works fine again.</li>
  <li>I tried setting some options in Socket.io based on other issues I read about like <code>transports: [ 'websocket' ], allowUpgrades: false</code> or <code>pingInterval: 500, pingTimeout: 60000, upgradeTimeout: 30000, timeout: 30000</code> and neither of these helped as well.</li>
  <li>All JavaScript code unrelated to websockets continues to run without issue during the lag period.</li>
  <li>I added this line <code>socket.sendBuffer = [];</code> to my socket connection event to see if the rush of images after the lag was somehow in this buffer but it still happened.</li>
  <li>Nothing was wrong with the network at the time as I can see several <code>fetch</code> requests working just fine during this lag period.</li>
  </ul>
  
  <p><strong>Questions:</strong> What is causing the lag when nothing is happening with the websocket at that moment? Why is it exactly 10 seconds AFTER the page load? If its system resources/proccessing power related, why would giving it it's own thread not help? How is there a rush of images right after the lag when Socket.io's documentation says that no emits are saved in a buffer during a disconnect?</p>
  
  <p><strong>EDIT:</strong> This seems to be a problem with Chrome. Firefox and Edge don't have this issue. Edge has its own issues but that's expected.</p>