We Keep Coding

How to debug WebSocket / Server Sent Events reconnections on desktop?

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:
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.
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.
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.
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?

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

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.

You can use the chrome://discards to freeze your tab.
You should close and restore the connection based on the Page LifeCycle events.

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

Can I make a socket connection through Javascript

What I want to do
Make a simple socket connection to a server on the browser. I want to not send any header information with the socket connection.
The Problem
It looks like I am unable to make a socket connection with javascript that does not send header data (Is there a way to do a tcp connection to an IP with javascript?).
I thought maybe I could make a connection with a chrome extension, however it looks like the socket API is only available for chrome apps (Google Chrome Socket API in extensions).
I am thinking that I might need to make a native application that will make socket connections through requests made by the browser using Native Messaging.
Is there anyway I can achieve this or am I out of luck?

Raw socket connections through the browser are wrapped up in security concerns. Users can be easily manipulated to allow things to run that shouldn't.
TCP and UDP Socket API
W3C Editor's Draft 20 January 2016
is located here.
http://raw-sockets.sysapps.org/
Mozilla's API information here: https://developer.mozilla.org/en-US/docs/Archive/B2G_OS/API/TCPSocket "This API is available on Firefox OS for privileged or certified applications only."
If you work with raw TCP connections. I would suggest
(1) downloading PHP onto the local computer. PHP has a developer web host build in so you can run whatever application you want on PHP using the browser as your GUI.
(2) download node.js.

You are not out of luck you just need to achieve it with the understanding that you are working outside the box for normal browser based scripting created from security concerns, and that means the user/client needs to install something manually.
If you must use chrome browser on the client side, you will need to make an -extension- correction webapp. You can as a developer make one that you can use on your own computers.
https://developer.chrome.com/extensions/getstarted
https://developer.chrome.com/apps/first_app
Load the extension#
Extensions that you download from the Chrome Web
Store are packaged up as .crx files, which is great for distribution,
but not so great for development. Recognizing this, Chrome gives you a
quick way of loading up your working directory for testing. Let's do
that now.
Visit chrome://extensions in your browser (or open up the Chrome menu
by clicking the icon to the far right of the Omnibox: The menu's icon
is three horizontal bars. and select Extensions under the Tools menu
to get to the same place).
Ensure that the Developer mode checkbox in the top right-hand corner
is checked.
Click Load unpacked extension… to pop up a file-selection dialog.
Navigate to the directory in which your extension files live, and
select it.
Alternatively, you can drag and drop the directory where your
extension files live onto chrome://extensions in your browser to load
it.
If the extension is valid, it'll be loaded up and active right away!
If it's invalid, an error message will be displayed at the top of the
page. Correct the error, and try again.
This insures that non developers don't load an extension which does not comply with the normal security concerns.
Communicating between with the script on the web page to the extension.
Can be done with message passing ... https://developer.chrome.com/extensions/messaging
The extension can add content directly to the web page which is available to the script on the web page. If for example the extension replaced the web cam image with a static image when the webcam script reads what it believes is the webcam it gets the static image instead, which explains why I look like an alien from space on the webcam. Although I did not create an extension to do that, I merely modified an existing extension to replace the function that gets the webcam image with a function to get a static image.

You can use SignalR, it is javascript library (JQuery Plugin) and it enables you to open web sockets from the browser to a server. Please check the following links:
https://blog.3d-logic.com/2015/03/29/signalr-on-the-wire-an-informal-description-of-the-signalr-protocol/
http://blog.teamtreehouse.com/an-introduction-to-websockets
https://github.com/SignalR/SignalR

Does service worker runs on background even if browser is closed?

I see push notification for Facebook web in chrome only when I open chrome. I know that this notification are sent through service worker. I am wondering whether this background sync goes on even though browser is closed or only on opening chrome only these service-worker sync process get started and start sending push notification.

First thing to say is this depends somewhat on the platform. My understanding of chrome is:
On desktop platforms like windows and Mac OS X the browser needs to have some background process running for a service worker to be able to run. On Mac OS X this is quite easy to detect as the browser can have no windows open but the browser still has the glowing dot beneath it.
On mobile platforms it's easier to listen for events and handle them in an efficient manner, so in these cases the platform can wake up the browser which will then handle any corresponding events.
The above applies to any service worker api's.
On Desktop: If the browser is completely closed then service workers can not run and will not dispatch any events (i.e. no push or background sync events)
On Mobile: The events will still be dispatched (i.e. background sync will trigger when the users device comes online and push will be received and cause a push event).

I don't think service worker will be able to run if browser is closed. Because service-worker is able to send push notification only after I open the browser. If it is running in the background then it could have send notification even after closing browser also.

Little offtopic but it is possible to write Chrome extension where background script can run if Chrome is allowed to run in the background (configurable in settings). It can also use GCM.

In the context of receiving push messages on desktop, you will receive
messages when the browser is running, i.e. has the marking underneath
the icon.
This means the browser can have no windows open, and you'll still
receive the push message in your service worker, because the browser
in running in the background.
The only time a push won't be received is when the browser is
completely closed, i.e. not running at all (no marking). The same
applies for Windows, although it's a little trickier to determine
whether or not Chrome is running in the background.
source https://web.dev/push-notifications-faq/#why-doesn't-push-work-when-the-browser-is-closed

Node JS, Socket.IO, Express and Http connection

I wanted to throw an idea to you guys to see if you could provide me with an insight if something like this is possible.
Idea is that we have an RFID reader attached to a MacMini (Mini is hidden and only the RFID is visible). There is also an IPad attached and the idea is that once you tab on to the RFID reader, I want to validate the value behind the RFID card and then based on a success/error response send a notification to the IPad either to say something went wrong or to show a form which the users then has to fill out or there is some other interactions that can take place like pagination and so on. There is also a monitor attached to the MacMini and the idea here is that based on the
interaction on the iPad, it relays this back to the MacMini (via Node web sockets as everything is browser based) and the displays the relevent information based on the interaction made.
I am not sure how to play this as my initial thinking was that the RFID reader/Mini was on port 3000 and the browser on the IPad could listen to that and when the iPad had to communicate to the MacMini that was on another port.
Am I over thinking this maybe?
Thanks
Raj

If I understand your setup, your story is something like :
card detected, send on mac Mini
validation process, assume OK.
ipad display a form to end user
end user complete the form which is sent back to mac mini
You'll have to set up a simple "push" action from the mac mini. the answer from the ipad can even be done as simple ajax if you're more comfortable with it.
Definitely looks like something worth trying in node. As you have no browser compatibility issues, I'd have websockets (or a framework using them as http://www.socket.io ) as a top choice.

web app on mobiles with phonegap

I have a web application (chat room) in html + javascript that basically sends requests to the server every 5 seconds to check for new messages.
It already works on mobile but there are 2 main problems:
it does not beep (it works on pc) with new messages
when the browser is put on background, the javascript obviously stops being executed, therefore the connection to the server is lost and the client disconnected.
i was thinking of using phonegap not only to make it cross-platform but also to fix those problems stated above. would they be resolved with the use of phonegap?
thank you in advance.

phoneGap doesn't support custom push notification. it basically open a browser and expose you some native support via API.
in order to do some native actions like push notifications and/or sound playing i suggest you check out some of the plugins options available or even write your own for that.

Playing sounds can be done easily using the Media API. As for having the JavaScript run in the background it really depends on the OS. On Android the JS will continue to run if you leave the app via the home button but the back button kills the app so you would stop the JS. It is probably better to write a service that always runs in that case.
Alternatively you'd look at a push type solution to notify you of new messages.