Skip to content

Add support for One-Way WebSocket communication to frontend #16777

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
4 tasks done
Parkreiner opened this issue Mar 3, 2025 · 3 comments
Closed
4 tasks done

Add support for One-Way WebSocket communication to frontend #16777

Parkreiner opened this issue Mar 3, 2025 · 3 comments
Assignees
Labels
site Area: frontend dashboard

Comments

@Parkreiner
Copy link
Member

Parkreiner commented Mar 3, 2025

Turning this into a separate ticket to make it more clear what's been worked on since I started on #16518

Context

This is basically the other half of #16775. That issue is for adding support for one-way websocket connections to the backend – this issue is for updating the frontend to be aware of those changes.

Tasks

  • Add OneWayWebSocket class that takes the base WebSocket class, and prevents calling any methods that would send data back to the server
  • Research what options we have for testing WebSocket connections on the frontend via integration tests
  • Update all existing API calls to use the new backend endpoints created as part of Add support for One-Way WebSocket communication to backend #16775
  • Once all the changes are fully wired up, do one last set of stress testing to make sure that we no longer run into the "UI lockup" behavior
@Parkreiner Parkreiner added the site Area: frontend dashboard label Mar 3, 2025
@Parkreiner Parkreiner self-assigned this Mar 3, 2025
@Parkreiner
Copy link
Member Author

Parkreiner commented Mar 3, 2025

Status update:

  • We do, in fact, have options for testing the websocket connections via integration tests, but they got a little too convoluted relative to the amount of code changes the frontend needed. It's something that we can consider in the future, and I added some comments to minimize the risks of wild goose chases if someone tries again, but for now, I think we can skip things
  • The wrapper class has been updated, and has full type-safety
  • All the API calls have been updated to the new backend routes. Not 100% sure that the names are what we want to go with, but that's something that can easily be fixed in review
  • Only marking this as blocked because I need the backend changes wrapped up before I do the stress-testing
  • While I was making updates, I ran into a few other long-standing bugs and got those fixed up, too

Truth be told, if I knew for a fact that WebSocket integration tests weren't worth it, this could be a Complexity 1. But this was a case where it felt prudent to see what we could do to add tests, since the issues are all in service of fixing a problem being faced by multiple customers

@Parkreiner Parkreiner changed the title Add support for One-Way WebSocket connections to frontend Add support for One-Way WebSocket communication to frontend Mar 3, 2025
@alihammad-gist
Copy link

Wouldn't the server sent events be better than web sockets if only sever -> client one way connection is needed.

@Parkreiner
Copy link
Member Author

Parkreiner commented Mar 28, 2025

@alihammad-gist You would think so, but there's actually a problem inherent to SSEs that doesn't exist with WebSockets. SSEs are still based on HTTP, so when the protocol is HTTP/1.1, it's still grouped with normal one-time server requests. And since browsers only allow 2–6 active HTTP connections per domain at a time, all you have to do is open Coder in multiple tabs, and that can cause the entire app to lock up

WebSocket connections are still initiated via HTTP on HTTP/1.1, but because the connection type changes afterwards, browsers have much, much better multiplexing support

To illustrate how different they are, I was able to set up 700 WebSocket connections for a single domain on HTTP/1.1 (100 connections per seven tabs), and there was zero issues. When I had seven SSE connections open (whether that was one connection per seven tabs, or seven connections all in the same tab), they all locked up

It'd be nice if we didn't need these workarounds, but the SSE protocol is very old, and wasn't really made to handle these things. There's a reason why SSEs have warnings on their MDN documentation pages, while WebSockets don't

Parkreiner added a commit that referenced this issue Mar 28, 2025
Closes #16777

## Changes made
- Added `OneWayWebSocket` utility class to help enforce one-way
communication from the server to the client
- Updated all client client code to use the new WebSocket-based
endpoints made to replace the current SSE-based endpoints
- Updated WebSocket event handlers to be aware of new protocols
- Refactored existing `useEffect` calls and removed some synchronization
bugs
- Removed dependencies and types for dealing with SSEs
- Addressed some minor Biome warnings
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
site Area: frontend dashboard
Projects
None yet
Development

No branches or pull requests

2 participants