Server-Sent Events 101

August 18, 2021

Server-Sent Events (SSE) is a unidirectional communication between client and server where the server sends the events in text/event-stream format to the client once the client-server connection is established by the client. The client initiates the connection with the server using EventSource API. Previously mentioned API can also be used for listening to the events from the server, listening for the errors, and closing the connection.

const eventSource = new EventSource(url);
eventSource.onmessage = ({ data }) => {
const eventData = JSON.parse(data);
// handling the data from the server
eventSource.onerror = () => {
// error handling

A server can filter clients by query parameter and send them only the appropriate events. In the following example server sends the events only to a specific client distinguished by its e-mail address.

sse(@Query() sseQuery: SseQueryDto): Observable<MessageEvent> {
const subject$ = new Subject();
this.eventService.on(FILTER_VERIFIED, data => {
if (sseQuery.email !== data.email) return;
subject$.next({ isVerifiedFilter: true });
return subject$.pipe(
map((data: MessageEventData): MessageEvent => ({ data })),


© 2021