Add indicator of connected clients to browser UI

[kgpax]

It would be nice to see what clients are connected to the browser viewer.

We could put something in the header, next to the logo/title maybe.

For now this could just say "N clients connected"

---

Technical approach

• Update the Web Socket server (in startCollector.cjs) to send a message to the viewer client when a new non-viewer clients connect.

  • We handle client connections in the on('connected') event handler
  • This message sent to the viewer can be something like { type: 'NewConnection', serviceName: 'foo' }.
  • The serviceName data we pass can come from the path part of the WS connection request (i.e., ws://127.0.0.1/this-part-here)

• Update the browser viewer Web Socket client (in CollectorClient.ts) to handle type: 'NewConnection' messages

  • We can increment a state-held count of connection which will be displayed on the front-end
    • Note: Web socket clients will not send a 'close' event to the server implicitly when they are terminated (e.g., refreshing the client browser app/reloading the node app).
    • Refreshing/reloading the app will cause a new WS connection to be made to the server. The original WS connection will only be dropped when it times out on the server.
    • We should therefore ensure that multiple connections from an given serviceName are only counted once...
  • We also want to handle when clients disconnect, meaning that we might need to keep a record of all connections that a single serviceName has, and only decrement the number when they are all removed

E.g.,

• 🕸️ Client A (website) connects with service name client-A
• 👀 Browser viewer "connected clients" count increments to 1
• 💻 Client B (node app) connects with service name client-B
• 👀 Browser viewer "connected clients" count increments to 2
• 🙎 User refreshes browser running client A
• 🕸️ Client A (website) connects with service name client-A
• 👀 Browser viewer "connected clients" count stays at 2, but registers an additional client-A connection internally
• 🙎 User closes browser running client A
• ⏲️ After a while, the first client-A connection is dropped due to unavailability of that socket
• 👀 Browser viewer "connected clients" count stays at 2 since there is still one other client-A connection and the client-B one
• ⏲️ After another while, the second client-A connection is dropped due to unavailability of that socket
• 👀 Browser viewer "connected clients" decrements to 1, since there are no longer any client-A connections, only one client-B

I think that's how it woks anyway... i've gotten myself into all kinds of jams with socket based client management.

[kgpax]

We can extend the current system filter drop down to:

a) Show connected clients (sources) and their connection status b) Allow filtering of traces from these sources

Something like:

[kgpax]

Done in #112