typescript 66 lines · 8 steps

Building a real-time chat gateway in NestJS

A NestJS WebSocket gateway that handles connections, room joins, and message broadcasting over Socket.IO.

Explained by highlit

NestJS Intermediate websockets real-time socket.io event-driven authentication

1import {
WebSocketGateway,
WebSocketServer,
SubscribeMessage,
MessageBody,
ConnectedSocket,
OnGatewayConnection,
OnGatewayDisconnect,
9} from '@nestjs/websockets';
10import { Server, Socket } from 'socket.io';
11import { Logger, UseGuards } from '@nestjs/common';
12import { WsJwtGuard } from './guards/ws-jwt.guard';
13import { ChatService } from './chat.service';
14import { JoinRoomDto, SendMessageDto } from './dto';
15 
16@WebSocketGateway({
namespace: '/chat',
cors: { origin: process.env.CLIENT_URL, credentials: true },
19})
20export class ChatGateway implements OnGatewayConnection, OnGatewayDisconnect {
@WebSocketServer()
private readonly server: Server;
23 
private readonly logger = new Logger(ChatGateway.name);
25 
constructor(private readonly chatService: ChatService) {}
27 
handleConnection(client: Socket) {
  this.logger.log(`Client connected: ${client.id}`);
}
31 
handleDisconnect(client: Socket) {
  this.chatService.markOffline(client.id);
  this.logger.log(`Client disconnected: ${client.id}`);
}
36 
@UseGuards(WsJwtGuard)
@SubscribeMessage('room:join')
async onJoinRoom(
  @MessageBody() { roomId }: JoinRoomDto,
  @ConnectedSocket() client: Socket,
) {
  await client.join(roomId);
  const history = await this.chatService.recentMessages(roomId);
  client.emit('room:history', history);
  client.to(roomId).emit('room:presence', { userId: client.data.userId, online: true });
}
48 
@UseGuards(WsJwtGuard)
@SubscribeMessage('message:send')
async onMessage(
  @MessageBody() dto: SendMessageDto,
  @ConnectedSocket() client: Socket,
) {
  const message = await this.chatService.persist({
    ...dto,
    authorId: client.data.userId,
  });
  this.server.to(dto.roomId).emit('message:new', message);
  return { status: 'delivered', id: message.id };
}
62 
broadcastAnnouncement(text: string) {
  this.server.emit('system:announcement', { text, at: new Date().toISOString() });
}
66}

01 / 01

STEP 01

Walkthrough

Space play ←→ step click any line

Three takeaways

1A gateway maps socket events to methods with decorators, keeping transport wiring out of your handlers.
2Rooms let you target broadcasts precisely — to one client, everyone but the sender, or the whole namespace.
3Guards secure individual socket events just like they secure HTTP routes.

Related explainers

typescript

import { Injectable, UnauthorizedException } from '@nestjs/common';
import { PassportStrategy } from '@nestjs/passport';
import { ExtractJwt, Strategy } from 'passport-jwt';
import { ConfigService } from '@nestjs/config';

How a JWT strategy authenticates in NestJS

authentication jwt passport

Intermediate 7 steps

typescript

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent, HttpErrorResponse } from '@angular/common/http';
import { BehaviorSubject, Observable, throwError } from 'rxjs';
import { catchError, filter, take, switchMap } from 'rxjs/operators';

Refreshing auth tokens in an Angular interceptor

http-interceptor token-refresh rxjs

Advanced 8 steps

package auth
 
import (
	"net/http"

Setting and reading secure session cookies in Go

cookies session-management security

Intermediate 6 steps

typescript

import { CanActivate, ExecutionContext, Injectable, UnauthorizedException } from '@nestjs/common';
import { GqlExecutionContext } from '@nestjs/graphql';
import { Reflector } from '@nestjs/core';
import { JwtService } from '@nestjs/jwt';

How a GraphQL auth guard works in NestJS

authentication authorization jwt

Intermediate 7 steps

typescript

type ResizeCallback = (size: { width: number; height: number }) => void;
 
export function observeResize(callback: ResizeCallback, delay = 150) {
  let timeoutId: ReturnType<typeof setTimeout> | undefined;

Debouncing window resize in TypeScript

debounce closures event-listeners

Intermediate 6 steps

typescript

import { Injectable, Logger, OnApplicationShutdown } from '@nestjs/common';
import { InjectRedis } from '@nestjs-modules/ioredis';
import Redis from 'ioredis';
import { DataSource } from 'typeorm';