6

I am developing an app that uses Server Sent Events (SSE - basically one-way websockets). If the user uses the site on their mobile chrome browser and then tabs out for about a minute, the SSE connection breaks. If the user then tabs back into the site, it doesn't refresh the page (this is good). But I still need to re-establish the SSE connection so that the server can resume sending messages to them without a refresh.

I'm trying to debug my implementation but having to do it on mobile is very tedious. I have to grab my phone, refresh the page, then tab out, wait 1 minute (so the connection can break), and then tab back in to determine if my code for re-establishing the connection worked properly.

I would much rather be able to debug this on desktop, but I haven't found a way. I have tried the following:

  1. Tried 5 different Chrome extensions for sleeping a tab. Unfortunately, when you navigate back into the tab it just refreshes the page rather than resumes it.
  2. Tried using USB Debugging, but the desktop keeps the tab open at all times even if you tab out on mobile, so the tab never sleeps.
  3. Tried running debugger; in the Chrome Developer Tools console, but even if I let the Javascript sit with its execution frozen for 5+ minutes, it never breaks the SSE connection, so I can't test if reconnecting works.
  4. Tried using an extension to kill the internet for Chrome, but miraculously, this still maintains the active websocket/SSE connections. Apparently Google engineers have deprioritized this effort?

Basically, I am looking to simulate the behavior that happens on mobile when you tab out of your web browser, wait a minute, and then tab back in (the Javascript execution is frozen, the SSE connection is broken after a minute or so, and then tabbing back in resumes Javascript and attempts to reconnect the SSE connection).

Is this possible?

Ryan Peschel
  • 11,087
  • 19
  • 74
  • 136

4 Answers4

0

I think that best change you have by emulating your android device. You can do so by installing android studio from https://developer.android.com/studio and then here you have all you need to start and manage your virtual android env https://developer.android.com/studio/run/managing-avds

This it the way I debug my whole mobile development

pmakowski
  • 296
  • 2
  • 6
  • Ideally I would not like to download Android Studio (a gigantic application), just to debug what happens when an SSE connection breaks – Ryan Peschel Feb 26 '22 at 19:23
  • In addition, this doesn't really change anything, because the process would still be to tab out, wait several minutes, and then tab back in. It would just be done in an emulator instead of on a phone. It doesn't solve the core problem (long feedback loops) – Ryan Peschel Feb 26 '22 at 20:01
0

The most obvious solution to me would be to attach a listener that tracks the events related to tab activation and build some custom solution upon that.

Simply:

window.onfocus = () => { 
  // Restore SSE session 
}; 

window.onblur = function () { 
  // Inactive 
};

Just for info, SSE is a different protocol from websockets.
In case you are interested in using websockets implementation, I suggest the following library which works very well in my experience: https://www.npmjs.com/package/@stomp/stompjs

Stomp is an abstraction over the websocket protocol, but it also means you would need to implement this on the server side as well.

html_programmer
  • 18,126
  • 18
  • 85
  • 158
  • I am not interested in using WebSockets. They are too complex for my simple needs. In addition, your answer does not help me debug SSE by simulating a similar sort of operation as tabbing out on mobile does. – Ryan Peschel Feb 26 '22 at 19:31
  • @RyanPeschel I'm confused. I thought your intention was to re-establish the connection when regaining focus. If you test this once and it works, you should be ok no? Note I only added the websockets for info because you refer a few times to it in your post in order to avoid confusion (and in case you were interested). – html_programmer Feb 27 '22 at 12:34
  • Nope, my intention is to debug the reconnection of Server Sent Events. I am looking for a way to induce this connection break so I can debug whether or not my reconnection code works – Ryan Peschel Feb 27 '22 at 13:05
  • @RyanPeschel I would try to do remote debugging as described here: https://developer.chrome.com/docs/devtools/remote-debugging/ But if you're adding the reconnection logic to the callbacks above, you should be able to put a breakpoint at your server script to see if the reconnection takes place no? – html_programmer Feb 27 '22 at 13:30
  • It's difficult to get all edge cases working with reconnection so it's just a bit of a pain to have to wait a couple minutes every time I change something to see if my changes worked. – Ryan Peschel Feb 27 '22 at 13:41
  • @RyanPeschel I'm not sure what edge cases you have when you test the connection / reconnect back on focus every time. Personally I would implement and test this once for mobile, count on that it works and then just continue my development on regular browser. Afterwards I might list up all edge cases and use a tool like selenium / browserstack to run automated tests for mobile, as per not to need wasting time on this during development. Just IMO. – html_programmer Feb 27 '22 at 13:51
0

You can use the chrome://discards to freeze your tab.

You should close and restore the connection based on the Page LifeCycle events.

Rex Pan
  • 1,458
  • 10
  • 13
  • This causes the tab to refresh when the tab is unfrozen, so it cannot be used to test an SSE connection breaking. – Ryan Peschel Feb 26 '22 at 19:22
  • I tried the **sleep** but it's not break the connection. I cannot find the freeze button anymore. https://imgur.com/a/StKIRA2 – Rex Pan Feb 28 '22 at 02:51
0

You Can Try to use pause execution

goto:

  • Chrome javascript console (Ctrl+Shift+J) > sources > pause script (press f8)

This simulates like a mobile tab switching so you can debug easily

I think this is the simple and easy solution. thanks

Aashif Ahamed
  • 1,143
  • 1
  • 9
  • 21