[websocket] How would you implement "room" feature with nitro websocket ?

[fresh robin]

Hi, i tryed to implement a feature with something similar of having the id of a room chat and listening to every message sent to only this room.
Within the socket open/message hook we don't have any mean to extract the id passed as parameter in the url so i have no idea on how i should retrieve the room id and

Ex: url /server/api/chat/[roomId]/websocket.ts

[timid ermine]

https://www.youtube.com/watch?v=OfY7JcrqkPg <- like that? 😋

You can save the room id in e.g. a storage if you don't want to hardcode them

or let the user decide them

[north hedge]

I'm aware this is a gigantic necropost, but I've been looking at implementing my own implementation of sockets and wanted to ask: how can you pass the data of that the user decides for a room ID to the webSocketHandler? As far as I can tell there is no way to pass context like route params through to the websocket handler.

I tried peer.context but that just resolves to {}.

[timid ermine]

depends on how you deploy. One option would be a map in-memory (if you have a long running process)

[north hedge]

I'm using CF workers with Durable Objects (deploying with NuxtHub)

But for example, I have a routes/ws/chat/[id].ts where the id would ultimately be gotten from the database when a user decides to join the chat room. From that point it should pass the ulid of the chat to useWebSocket and I was hoping it would be able to get that route param and use it to subscribe to that channel specifically

So the flow would be something like:

1: User wants to join a room from a list of rooms (gotten from DB)
2: When user clicks on a room, it grabs the room ID (e.g.: "room-id")
3: On mount, the page (chat/room-id) would open a WS connection with (ws/chat/{id} --> resolving to ws/chat/room-id)
4: Then, *ideally*, the webSocket handler would be able to determine the ID from its route parameter and subscribe to the correct channel.

However, step 4 is where I'm getting stuck as I don't see a way for it to grab that specific context.

peer.context sounded like it would contain what I needed, but unfortunately that doesn't seem to be the case 😅

Ultimately the value doesn't matter; it could be a ULID or a unique string or whatever. It's just that it doesn't look to be possible for me to pass it as a route parameter to the websocket handler

Would I need to use something like useNuxtApp() to access that? I'm not sure. The documentation on this specifically seems rather sparce

@timid ermine I was able to figure out that this would work to get me the precise parameter from my URL:

console.log(peer.request.url.split('/')[5]);

However, I don't think this is the optimal way to do it. What are your thoughts?

[timid ermine]

you can't use useNuxtApp on the server side

[north hedge]

Yeah, I just figured that out by testing it, haha 😛

But yeah, the only way I seemingly can get the URL itself it by doing peer.request.url itself

[timid ermine]

that might be the best bet for now.

https://crossws.unjs.io/guide/peer#peerrequest also documented and intended like that

e.g. for auth as well

Access to the upgrade request info. You can use it to do authentication and access users headers and cookies.

[north hedge]

Ahh, perfect. This was the documentation I was looking for but couldn't find 🤣

[timid ermine]

Yeah, it can be tricky 😛

[north hedge]

It also indeed doesn't mention peer.context being able to be set by us, so that makes sense

Would maybe be nice to have that in the future... 🤔

Better than to dig into the request URL tbh, for other metadata too 😛

[north hedge]

Well, this is good to see, hahaha 👍

Thanks for the assist!