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;
})

there is no relation between SSE with Event Emitter

as you can see SSE only aplicable on request method GET, so when you need to trigger the EventSource from request method POST, you need different approach

so in my opinion, i need to create function outside SSE route that can be trigger the EventSource, in this case i can use Event Emitter / hookable, and then inside POST route i can trigger the Event Emitter

i have a simple example in here

As @martinszeltins Says we shouldn't discuss it here. Let's not spam the gist here. Thanks for informing 🤝🏻

If anyone has something to say, I've seperate issue here.

Hey, @atinux I can't seem to get it to work on Cloudflare. Sending events from setInterval works fine but sending from hooks doesn't seem to work. Am I missing something?

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!