- Introduction
- Quick start
- Philosophy
- Comparison
- Default behaviors
- Limitations
- Debugging runbook
- FAQ
- Mocking HTTP
- Mocking SSE
- Mocking GraphQL
- Mocking WebSocket
- Integrations
- API
- CLI
- Best practices
- Recipes
Server events
Mocks must resemble actual usage. That is a core philosophy when it comes to designing APIs in MSW. While Server-Sent Events are consumed via the EventSource standard API, there is no standard way of defining such events from the server. Because of that, MSW takes the liberty of designing a custom API that remains standard-based while providing a type-safe and ergonomic way of working with Server-Sent Events.
Event object
A server event is an object of the following shape:
| Property | Type | Description |
|---|---|---|
id | string (Optional) | Custom event ID. |
data | string | Event payload. |
event | string (Optional) | Custom event name. |
retry | number (Optional) | Reconnection time. |
Sending events
To send a mock server-sent event, call client.send() and provide it with the event object:
sse('/stream', ({ client }) => {
client.send({ data: 'hello world' })
})Creating this request handler will send the “hello world” event to the EventSource matching the handler’s predicate (/stream):
// your-app.ts
const source = new EventSource('/stream')
event.addEventListener('message', (event) => {
console.log(event.data) // "hello world"
})Next steps
Explore what you can do with the sse API on the following pages:
Message events
Mocking server message events.
Custom events
Mocking custom server events.
Retry
Mocking the reconnection time.