FormidableLabs / FormidableLabs/envy

Add indicator of connected clients to browser UI

Open
#37 2 comments 0 reactions 1 assignee Claimed by @kgpax View on GitHub
@envyjs/webui
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.