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

A huge Thank YOU @Atinux for this gist!

Official support:

• https://h3.unjs.io/guide/websocket#server-sent-events-sse
• https://nitro.unjs.io/guide/websocket#server-sent-events-sse

Official support:

• h3.unjs.io/guide/websocket#server-sent-events-sse
• nitro.unjs.io/guide/websocket#server-sent-events-sse

Thanks @pi0, I wasn't aware that there is official support for this. One note though - shouldn't server-sent events have its own category instead of being placed under websockets#server-sent-events-sse? SSE has nothing to do with websockets.

They are often interchangeable solutions and SSE is often a fallback approach when WebSocket usage is not possible. However consider SSE has some limitations too like opening multiple connections, might get browser request pending.

@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.