SSE endpoint example with Nuxt 3

sse.ts

// ~/server/api/sse.ts
export default defineEventHandler(async (event) => {
  if (!process.dev) return { disabled: true }

  // Enable SSE endpoint
  setHeader(event, 'cache-control', 'no-cache')
  setHeader(event, 'connection', 'keep-alive')
  setHeader(event, 'content-type', 'text/event-stream')
  setResponseStatus(event, 200)

  let counter = 0

  const sendEvent = (data: any) => {
    event.node.res.write(`id: ${++counter}\n`);
    event.node.res.write(`data: ${JSON.stringify(data)}\n\n`);
  }

  myHooks.hook('sse:event', sendEvent)

  // Let the connection opened
  event._handled = true;
})

Why would one use this and not h3's createEventStream? See h3 docs: https://h3.unjs.io/guide/websocket#server-sent-events-sse.

Example modified for Nuxt:

export default defineEventHandler(async (event) => {
  const eventStream = createEventStream(event);

  // Send a message every second
  const interval = setInterval(async () => {
    await eventStream.push('Hello world');
  }, 1000);

  // Cleanup the interval when the connection is terminated or the writer is closed
  eventStream.onClosed(() => {
    clearInterval(interval);
  });

  return eventStream.send();
});

@Anoesj

Why would one use this

See https://gist.github.com/atinux/05836469acca9649fa2b9e865df898a2?permalink_comment_id=5026667#gistcomment-5026667

This topic started back in 2023-04-10 and createEventStream was only added months later to h3 (unjs/h3#586)

Thanks for the clarification @peerreynders!