Server-Sent Event

[GetOrigami]

Does anyone have a simple example for making a simple subscription (SSE) that works?
None of the examples seem to work.

Does not work:

SSE (see https://sergiodxa.com/articles/use-server-sent-events-with-remix)

Doesn't work:

https://github.com/remix-run/examples/tree/main/_official-realtime-app

Doesn't work even by directly installing the example...

[machour]

"doesn't work" doesn't say anything about the problem you're facing. Is there a build error? A runtime error?

The code from the example repo works for me on node 19.

[StevenBendell]

I've tried both examples recently and had issues.

I could get the time example working (eventStream working) to clients but I couldn't get the emitter to emit on message successfully.
I tried this by having two browser instances running the side that sends the message would re validate the data on the page with the action but the other instance would not receive anything.

I tried to wrap emitter.emit in a console.log which returned false which from the documentation below says that the event doesn't have any listeners:
https://nodejs.org/api/events.html#emitteremiteventname-args
So no error message or build time error

Similarly when I try the official example, the client making the changes re validates and the the other client doesn't receive any updates.

I've tried with Node v18 and v19

[MichaelDeBoey]

CC/ @sergiodxa

[sergiodxa]

The official example has an error because I changed useRevalidator to use useDataRefresh and didn't created the /dev/null route required to make it work. I just sent a fix for that here remix-run/examples#103.

For the example on my blog, if you run the app in production it must work, the way the emitter is created

import { EventEmitter } from "node:events";
export let emitter = new EventEmitter();

Makes the emitter to be re-instantiated on every request because that's how Remix works in dev, it clears the require cache, so you need to store it in global.emitter.

I didn't mentioned it because this is explained in the official Jokes tutorial when creating the PrismaClient instance.

However if you run the app in production it should work because the require cache is not cleared anymore.

Also note that my article is illustrative to show how it can be done, don't take it as a boilerplate, just as a guide, if something doesn't work play with it to fix it. As an example, instead of an event emitter it would have been better to use Redis or another Pub/Sub service that runs in another process.

[vidjuheffex]

I'm having similar issues, everything works great on Prod but on dev its inconsistent and listeners never close.

I've moved my emitter to global.emitter but that didn't fix the issue.

Anyone got more tips on how to handle this?

EDIT:

import { EventEmitter } from "events";

let emitter;

if (process.env.NODE_ENV === "production") {
  emitter = new EventEmitter();
  emitter.setMaxListeners(100);
} else {
  if (!global.__emitter) {
    global.__emitter = new EventEmitter();
    global.__emitter.setMaxListeners(100);
  }
  emitter = global.__emitter;
}

export { emitter };

^this did the trick. simply setting global.__emitter in this file did not do it, had to have the above redirection present (from the jokes repo)