Server-Sent Events support

[soyuka]

Feature Request

Describe the solution you'd like

Considering that Nest supports Websocket out of the box, would you like to see Server-Sent Events available as well?
There are lots of cases where using a simple EventSource client-side is sufficient over adding a whole new protocol to the stack (Websocket).

Teachability, Documentation, Adoption, Migration Strategy

On a first thought, and as it's available on top of HTTP, one could have an api like this:

// follows https://www.w3.org/TR/eventsource/#eventsource
interface MessageEvent {
    data: string;
    id: string;
    type: string;
    retry?: number;
}

@Controller('updates')
class Updates {
  @Sse()
  publishUpdates(): Observable<Partial<MessageEvent>> {
    return of({data: "Hello"}, {data: "world!"})
  }
}

On the client side:

const es = new EventSource('/updates')
// outputs
// - Hello
// - world!
es.onmessage = (message.data) => { console.log(message.data) }

Sse directive would take an optional prefix and handle the sse stream (could use https://github.com/EventSource/node-ssestream although the maintenance isn't my favorite I tend to use a custom transformer), it'd handle the id if needed.

I'd be glad to contribute such a feature if you guys are up for it!

[kamilmysliwiec]

Looks like a nice abstraction!
Would you like to create a PR for this? However, I'd prefer not to use any additional library for this. If there's anything we must implement, let's do it as a part of the PR instead of bringing external packages.

[underfisk]

@soyuka do you plan to use the standard nodejs http? Because in case we have a fastify app or express we could have this SEE but I'm not sure if you need to receive an Adapter like Nestjs does

[soyuka]

Please see #4842, it's indeed based on nodejs http and it will be compatible with express or fastify adapters without changes. Indeed, we're working directly on the response stream which fastify and express are based on.

[Sharique-Hasan]

Hi, is there any update on this?

[soyuka]

PR is ready on my end, waiting on reviews from the nest team. Feel free to try this out: #4826 and give some feedbacks.

[Sharique-Hasan]

@kamilmysliwiec any idea how soon are we releasing this? Our product currently needs this as soon as possible

[matfire]

same here; anyone have any updates ?

[kamilmysliwiec]

Added in 7.5.0

[Sharique-Hasan]

@kamilmysliwiec @soyuka where can we see the documentation for this?

[underfisk]

@Sharique-Hasan Check the documentation repository but it might not be added yet

[soyuka]

Hi documentation is in nestjs/docs.nestjs.com#1387

A small example script is available at #4842

Last but not least I created a sample application in https://github.com/nestjs/nest/tree/master/sample/28-sse

[vh13294]

If we use pm2 to spawn multiple instance of app, will there be multiple open connection as well ?

Another question is can pass in params to identify unique user in url ?

[soyuka]

Another question is can pass in params to identify unique user in url ?

Probably but I'd suggest to use cookies for authentification or use the mercure protocol if things get complicated, there's an implementation in node https://github.com/Ilshidur/node-mercure also.

If we use pm2 to spawn multiple instance of app, will there be multiple open connection as well ?

The instance called will open a connection.

[kuriel-trivu]

How UseGuards can be combinated with Sse ?

import { AuthGuard } from '@nestjs/passport';
...
@UseGuards(AuthGuard())
@Sse('events')
methodHere() {
    ...
}

i got unexpected 401 error on client side:

const subscription = new EventSource(`${env.API}/events`);
subscription.onerror = (error) => {
    console.log({error});
};

[kuriel-trivu]

i fixed it on client request by adding headers like this:

const subscription = new EventSource(`${env.API}/events`, {
                headers: {
                    'Authorization': 'Bearer ' + token,
                }
 });

so

import { AuthGuard } from '@nestjs/passport';
...
@UseGuards(AuthGuard())

works like a charm!!

[quezak]

@kuriel-trivu can you post some sources about passing headers in the EventSource constructor?
From what I see, there's only a withCredentials option for CORS, no info on headers.

[soyuka]

withCredentials makes use of cookies IIRC. Many polyfills (as https://www.npmjs.com/package/event-source-polyfill) add support t for headers, as SSE is plain HTTP it'll work :).

[thematan]

It seems that using sse with fastify disables CORS for that endpoint.
Tried specifying @Header decorator - but it didn't work and is bad anyway (must specify only one domain).

I injected response object and set header manually.
I guess there is a bug in the @sse decorator that erases other headers

[brianorwhatever]

@thematan I am also running into a problem with SSE and fastify CORS however am not having luck inject response obj and setting manually. Can you show me how to do that?

[thematan]

@brianorwhatever

import { ServerResponse } from 'http';

@Sse("verify-payment")
	verifyPayment(@Res() response: { raw: ServerResponse }, @Query("tx") tx?: string): Observable<{ data: { status: DTOBookingStage | "close", msg?: string } }> {
		response.raw.setHeader('Access-Control-Allow-Origin', BBConfig.envVars.NODE_ENV === "production" ? "https://www.example.com" : "http://localhost:3000"); //FIXME: It won't be good when i'll have staging
		return this.bookService.verifyClientPayment({}, tx);
	}

[brianorwhatever]

sweet, thanks @thematan I'll give that a go