Exposing SocketIoConnection

[colinbes]

I battled coming up with a title to hint at what I am wanting to do.

In my handler I have various rest end point mock handlers as well as io socket listener for mocking of websockets.

I am wanting to mock my backend server behavior which emits status messages of application (running in backend).

For my mocks, as example, when endpoint PUT /app/generator/start I want to start an interval timer and every interval period emit a websocket message sending update of backend process.

I see that ws.link's return value has a broadcast member - would it be correct to use this to emit message to all connected clients?

I am not sure how I would send event plus message though - something like client.emit("send:status", "some valuable update")

[kettanaito]

Hi, @colinbes.

I see that ws.link's return value has a broadcast member - would it be correct to use this to emit message to all connected clients?

Yes, that's precisely what .broadcast() and .broadcastExcept() are designed for! You can call them from other handlers, including HTTP, to send WebSocket events.

const api = ws.link('wss://example.com.chat')

export const handlers = [
  api.on('connection', () => {
    // ...
  }),
  http.post('/something', () => {
    api.broadcast(yourMessage)
  })
]

You also have access to the set of intercepted WebSocket clients under api.clients so you can send messages to individual clients, if you want to. See docs.

Does this answer your question? Feel free to ask follow-ups.

[colinbes]

Correct. This is an upgrade to s/w already in the field which uses socket.io where sockets are not just used for client to backend comms but also for smart device apps to connect and get real time updates - so pretty locked in to ioSockets but am keen to see alternatives as I see ws seems to making some comeback lately.

I am looking to emulate socket.io server function of socket.emit("event name", "some message"), to send event message to all connected clients, the events are integral to the system.

Not sure how to share example as I don't know how to do it, but if it would help I could try this afternoon (I am US central time) to markup something in the code.

[kettanaito]

We used to have a concept of custom transports while developing the WebSocket API but I scrapped it because it was ultimately too complex. I think we should revisit it and find a more developer-friendly API for it.

Something like

ws.link(url, {
  bindings: [toSocketIo]
})

Where each individual binding completely transforms the way client and server send/receive events. It's a bit destructive as you can no longer get the raw connection, but it makes sense since your transport is unlikely to change for the same WebSocket server.

[colinbes]

That would be awesome but I also understand it can't be everything for everyone.

I have modified github repository I had previously shared in order to show concept I was messing around with - a little dodgy and not sure how reliable it will be - take a look at setup and use of clientRef in src/mocks/handers.ts file.

https://github.com/colinbes/vue-sockets.git

[kettanaito]

I am leaning towards this:

• You can modify the connection object on the ws.link level.
• You can only do that once (mixing protocols would lead to a mess and never happens in the wild anyway).
• You still have access to the original connection for control but your modified connection is available under a different property in the connection event listener.

We have a concept of WebSocketTransport that controls sends/receives for both the client and the server. That's also what I tried using in the past for this customization but, apparently, never arrived at an API good enough to include in MSW.

[colinbes]

That would be awesome