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

@pi0 The example seems to be missing on h3 page for SSE

Screenshot:

@martinszeltins thanks for notice Should be good now (make sure to clear your browser cache). Also if you spotted any issues re docs or usage, feel free to directly open an issue in h3 repo.

Thanks @pi0! It would be nice to have an example in the Nitro docs too how to create a SSE route. There is an example for websockets route but not for SSE.

Screenshot:

Suew we can add an example there too. Nitro usage is exactly same as h3 one BTW.

(please prefer to use GitHub issues and discussions for suggestions, I'm worried our comments here are off-topics and send will notifications to everyone following this gist 🙏 )

Regardless of the given example, I would like to ask question on,

How can I consume SSE on Nuxt client? Is there any simple API like this.$sse.on('tweet', (tweet) => this.tweets.unshift(tweet)) mentioned here.

Also, there can be cases where we've to make a POST req that responds with SSE and it might include JSON and not just plain string.

Regardless of the given example, I would like to ask question on,

How can I consume SSE on Nuxt client? Is there any simple API like this.$sse.on('tweet', (tweet) => this.tweets.unshift(tweet)) mentioned here.

Also, there can be cases where we've to make a POST req that responds with SSE and it might include JSON and not just plain string.

@jd-solanki you can use the useEventSource from vueuse library - https://vueuse.org/core/useEventSource/

Hi @martinszeltins

Yes, I can but it doesn't support POST request. I'm making POST request and in response, I'm getting SSE response.

Hi @martinszeltins

Yes, I can but it doesn't support POST request. I'm making POST request and in response, I'm getting SSE response.

i think you need event emitter

@masyoudi Sorry I didn't get what you mean? What's Event Emitter related to SSE? Any example you can provide?

Hi @martinszeltins

Yes, I can but it doesn't support POST request. I'm making POST request and in response, I'm getting SSE response.

@jd-solanki I think we're spamming this gist with notifications. But to answer your question, you do not make POST requests to SSE endpoint. SSE is for receiving events from the server. If you want to send data to the backend, you would use a different endpoint (graphql, rest etc.). And then whenever the backend has something new to say, it will stream a message to the client using the established SSE/EventSource connection. Feel free to provide a code example of what you're trying to do.

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!