Refreshing a page in a browser, closes and releases ALL resources associated with the original page and then loads a fresh copy of the page and runs any Javascript in the page again.

So, if your page initialization code includes opening a webSocket to your server, then that webSocket will be closed when the page is reloaded.

This is what will happen upon the initial page load and then a refresh:

1. User requests your page


2. Browser loads HTML for that page


3. Browser runs Javascript in that page


4. That Javascript creates a webSocket connection to your server


5. User presses refresh


6. Browser closes down all resources associated with the original page, including closes the webSocket connection.


7. Browser reloads the original HTML for the page


8. Browser runs Javascript in that page again


9. That Javascript creates a new webSocket connection to your server

How to handle page refreshing on client side?

After refresh, the browser will run the Javascript in your page and that Javascript should just open a new webSocket connection and should establish a new chat connection.

FYI, that code you referenced has at least one bug. For example, the server-side code that removes a client from the server-side index does not work properly. It remembers the index for when the client connection was added to the array and assumes that the index never changes, but that's just wrong. As clients are added/removed from the array and they connect/disconnect that index can change. You're going to have to fix/debug that code if you use it.

While it can be made to work using an Array, I would probably use a Set myself and then it would be easier to remove an item too.