msw-phoenix.channel-binding

Motivation

This package is intended as a wrapper over the WebSocketInterceptor from @mswjs/interceptors. It provides automatic encoding and decoding of messages, letting you work with the phoenix.channel clients and servers as you are used to.

1import { WebSocketInterceptor } from '@mswjs/interceptor'
2import { toPhoenixChannel } from 'msw-phoenix.channel-binding'
3
4const interceptor = new WebSocketInterceptor()
5
6interceptor.on('connection', (connection) => {
7  client.on('message', (event) => {
8    // Phoenix channels implements their custom messaging protocol.
9    // This means that the "raw" event data you get will be
10    // encoded: e.g. "[null,"49","phoenix","heartbeat",{}]".
11    console.log(event.data)
12  })
13
14  const phoenix = toPhoenixChannel(connection)
15
16  phoenix.client.channel("room:lobby", (channel) => {
17			channel.on(
18				"greeting",
19				(_event ,{ payload }: PhoenixChannelMessage<{ text: string }>) => {
20          console.log(payload.text) // "Hello, John!"
21				},
22			);
23		});
24})
25

You can also use this package with Mock Service Worker directly.