WebSockets in NestJS: Real-Time Applications

3 min readJan 1, 2025

In the realm of web development, real-time applications have revolutionized the way we interact with software. Whether it’s a chat application, live notifications, or online gaming, the need for instant data exchange is critical. NestJS, a powerful Node.js framework, simplifies the process of implementing WebSockets, making real-time communication seamless and efficient. This article explores how to harness the power of WebSockets in NestJS to build robust real-time applications. We’ll dive into the essentials and provide TypeScript examples to illustrate key concepts.

Why Use WebSockets?

Before we delve into the implementation, it’s essential to understand why WebSockets are preferred for real-time applications:

Full-duplex Communication: WebSockets allow bi-directional communication between the client and server over a single connection.
Low Latency: Reduced overhead compared to HTTP requests, resulting in faster data transmission.
Persistent Connection: Unlike short-lived HTTP requests, WebSockets maintain a continuous open connection.

Setting Up NestJS with WebSockets

Step 1: Install Dependencies

First, you need to install the necessary packages. NestJS provides a WebSockets module out of the box.

npm install --save @nestjs/websockets @nestjs/platform-socket.io

Step 2: Create a WebSocket Gateway

A WebSocket gateway is a special class annotated with the @WebSocketGateway() decorator. It acts as the entry point for WebSocket connections.

import { WebSocketGateway, SubscribeMessage, MessageBody, WebSocketServer, OnGatewayInit, OnGatewayConnection, OnGatewayDisconnect } from '@nestjs/websockets';
import { Server, Socket } from 'socket.io';
import { Logger } from '@nestjs/common';

@WebSocketGateway()
export class AppGateway implements OnGatewayInit, OnGatewayConnection, OnGatewayDisconnect {
  @WebSocketServer() server: Server;
  private logger: Logger = new Logger('AppGateway');

  @SubscribeMessage('msgToServer')
  handleMessage(@MessageBody() message: string): void {
    this.server.emit('msgToClient', message);
  }

  afterInit(server: Server) {
    this.logger.log('Init');
  }

  handleConnection(client: Socket, ...args: any[]) {
    this.logger.log(`Client connected: ${client.id}`);
  }

  handleDisconnect(client: Socket) {
    this.logger.log(`Client disconnected: ${client.id}`);
  }
}

Explanation:

@WebSocketGateway(): Marks the class as a WebSocket gateway.
@WebSocketServer(): Injects the Socket.io server instance.
@SubscribeMessage('msgToServer'): Listens for incoming messages with the event name msgToServer and broadcasts them to all clients.
Lifecycle Hooks: Implement OnGatewayInit, OnGatewayConnection, and OnGatewayDisconnect to manage connection states.

Step 3: Configure WebSocket Gateway in Module

import { Module } from '@nestjs/common';
import { AppGateway } from './app.gateway';

@Module({
  providers: [AppGateway],
})
export class AppModule {}

Client-Side Implementation

To test the WebSocket server, set up a simple HTML client. Here’s an example using plain JavaScript:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>WebSocket Client</title>
</head>
<body>
  <input id="messageInput" type="text" />
  <button onclick="sendMessage()">Send</button>
  <script src="https://cdn.socket.io/4.0.0/socket.io.min.js"></script>
  <script>
    const socket = io('http://localhost:3000');
    
    socket.on('msgToClient', (message) => {
      console.log('Message from server:', message);
    });

    function sendMessage() {
      const message = document.getElementById('messageInput').value;
      socket.emit('msgToServer', message);
    }
  </script>
</body>
</html>

Enhancing WebSocket with Authentication

One common requirement is to authenticate users before establishing a WebSocket connection. This can be achieved using middlewares. Here’s an example:

import { Injectable, NestMiddleware } from '@nestjs/common';
import { Request, Response, NextFunction } from 'express';
import * as jwt from 'jsonwebtoken';

@Injectable()
export class AuthMiddleware implements NestMiddleware {
  use(req: Request, res: Response, next: NextFunction) {
    const token = req.headers['authorization'];

    if (token) {
      jwt.verify(token, 'YOUR_SECRET_KEY', (err, decoded) => {
        if (err) {
          return res.status(401).send('Unauthorized');
        } else {
          req.user = decoded;
          next();
        }
      });
    } else {
      return res.status(401).send('Unauthorized');
    }
  }
}

Apply this middleware to the WebSocket server in the AppModule:

import { MiddlewareConsumer, Module, NestModule } from '@nestjs/common';
import { AppGateway } from './app.gateway';
import { AuthMiddleware } from './auth.middleware';

@Module({
  providers: [AppGateway],
})
export class AppModule implements NestModule {
  configure(consumer: MiddlewareConsumer) {
    consumer
      .apply(AuthMiddleware)
      .forRoutes('*');
  }
}

Conclusion

WebSockets are a powerful tool for building real-time applications, and NestJS provides an elegant and straightforward way to integrate them into your projects. This article covered the basics of setting up a WebSocket server in NestJS, creating a WebSocket gateway, and implementing client-side interactions. Additionally, we explored adding authentication to your WebSocket server.

By leveraging these concepts, you can build scalable and efficient real-time applications, providing users with an interactive and instantaneous experience. Happy coding!

Feel free to leave your thoughts and questions in the comments below. If you found this article helpful, consider giving it a clap and sharing it with others. For more NestJS tips and tutorials, stay tuned!