FormidableLabs / FormidableLabs/envy
Add indicator of connected clients to browser UI
- Dominant language
- TypeScript
- Stars
- 144
- Forks
- 5
- PR merge metrics
- No merged PRs in 30d
Description
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.
Contributor guide
Assessment
This issue has not been assessed yet.