Message events

You can send a mock message event to the client by calling client.send() and providing it with the message data:

import { sse } from 'msw'
 
export const handlers = [
  sse('/stream', ({ client }) => {
    client.send({ data: 'hello world' })
  }),
]

Providing an explicit event: 'message' has no effect and is equivalent to not providing the event property at all.

This will result in the following message received by the client:

data:hello world

Payload

You can send any serializable payload as the message data. For example, you can send a JSON:

client.send({
  data: {
    user: {
      id: 'abc-123',
      name: 'John',
    },
  },
})

Custom event ID

You can attach a custom ID field to the sent message event by providing the id property alongside the sent event:

client.send({
  id: '1',
  data: 'hello world',
})

id:1
data:hello world

Note: event ID must be a string.

TypeScript

You can annotate the data type of the message event by providing a type argument object to the sse function and including the message key in it:

sse<{ message: 'hello world' }>('/stream', ({ client }) => {
  client.send({ data: 'hello world' }) // ✅
  client.send({ data: 'goodbye cosmos' }) // ❌
})