Introduction to Mocking WebSocket APIs with Mock Service Worker

Install Mock Service Worker (MSW)

Set Up Mock Service Worker in the Browser

Intercept a WebSocket connection with Mock Service Worker

Intercept WebSocket Client Events with Mock Service Worker

Broadcast a Mocked Message to All WebSocket Clients

Modify WebSocket Client Events with Mock Service Worker

Replay a WebSocket Chat Conversation with Mock Service Worker

Make a Type-safe and Runtime-safe WebSocket Communication with Zod

Close a WebSocket Client Connection with Mock Service Worker

Use a Custom Close Code to Close a WebSocket Connection with MSW

Close Multiple WebSocket Clients with MSW

Establish Actual WebSocket Server Connection with MSW

Intercept WebSocket Server Events with MSW

Prevent Server-to-client Message Forwarding in MSW

Send Mocked WebSocket Client Messages to the Original Server with MSW

Prevent WebSocket Server Close Event with MSW

Prevent WebSocket Event Propagation Between Listeners with MSW

Understand WebSocket Logs in MSW

Test WebSockets in Vitest with MSW

Test WebSockets in Playwright with MSW

Override WebSocket Event Handling in Tests with MSW

Mocking WebSocket APIs with Mock Service Worker

Listening to the outgoing WebSocket client events is nice, but how about we _modify_ them?

Let's parse the incoming `MessageEvent` data using `JSON.parse`, modify it, and provide its stringified version to the `chat.broadcast()` call to broadcast a different data.

## Resources

- [`.broadcast()` API](https://mswjs.io/docs/api/ws#broadcastdata)


https://app.egghead.io/api/v1/lessons/modify-web-socket-client-events-with-mock-service-worker~7nc3i/transcript

Mocking WebSocket APIs with Mock Service Worker

Modify WebSocket Client Events with Mock Service Worker

Social Share Links

Resources