Websocket NestJS: A Comprehensive Guide to Building Real-Time Applications

Websocket is a protocol that allows real-time communication between a client and a server over a single, long-lived connection. NestJS is a popular Node.js framework that facilitates the building of server-side applications in TypeScript. When combined, Websocket and NestJS can enable the creation of powerful real-time applications. In this article, we will explore the various aspects of Websocket NestJS and how you can use it to build real-time applications with ease.

Table of Contents show

Introduction to Websocket and NestJS

Websocket is a communication protocol that enables real-time communication between a client and a server over a single, long-lived connection. Traditional HTTP requests are short-lived, meaning that the client needs to initiate a new request every time it needs to communicate with the server. Websocket, on the other hand, allows a client to establish a connection with the server and keep it open for as long as needed. This enables real-time communication and reduces the latency that is often associated with traditional HTTP requests.

NestJS, on the other hand, is a popular Node.js framework that facilitates the building of server-side applications in TypeScript. TypeScript is a superset of JavaScript that adds features such as static typing and classes to JavaScript. NestJS uses TypeScript to provide a more structured and organized way of building server-side applications. NestJS is built on top of Express, a popular Node.js framework for building web applications. It provides a set of modules and tools that enable developers to build scalable and maintainable server-side applications.

Setting up a Websocket NestJS Application

Before we dive into the details of Websocket NestJS, let’s first set up a basic application. To get started, we need to install NestJS and its dependencies. We can do this by running the following command:

npm install -g @nestjs/cli

This will install the NestJS CLI globally on our system. We can then create a new NestJS application by running the following command:

nest new my-app

This will create a new NestJS application in a directory named my-app. We can then navigate into the my-app directory and start the application by running the following command:

cd my-app

npm run start:dev

This will start the application in development mode. We can then access the application by navigating to http://localhost:3000 in a web browser.

Implementing Websocket in NestJS

Now that we have our basic NestJS application set up, let’s implement Websocket in it. To do this, we need to install the @nestjs/websockets package. We can do this by running the following command:

npm install –save @nestjs/websockets

This will install the necessary dependencies for implementing Websocket in our NestJS application. We can then create a new Websocket gateway by running the following command:

nest generate gateway chat

This will generate a new Websocket gateway named chat in the src/websockets directory of our NestJS application. A Websocket gateway is a class that handles incoming Websocket connections and messages. We can then implement our Websocket logic in the chat gateway.

Handling Websocket Connections in NestJS

To handle incoming Websocket connections in NestJS, we need to use the @WebSocketGateway decorator provided by the @nestjs/websockets package. We can define our Websocket gateway class as follows:

import { WebSocketGateway } from ‘@nestjs/websockets’;
@WebSocketGateway()
export class ChatGateway {}

The @WebSocketGateway decorator tells NestJS that this class is a Websocket gateway. We can then define our Websocket connection logic in this class. To handle incoming Websocket connections, we need to use the @WebSocketServer decorator provided by the @nestjs/websockets package. We can define our connection handler as follows:

import { WebSocketGateway, WebSocketServer } from ‘@nestjs/websockets’;
@WebSocketGateway()
export class ChatGateway {
@WebSocketServer()
server;
}

The @WebSocketServer decorator tells NestJS to inject the Websocket server instance into the server property of our class. We can then use this server instance to handle incoming Websocket connections. To handle incoming connections, we need to use the @OnGatewayConnection decorator provided by the @nestjs/websockets package. We can define our connection handler as follows:

import { WebSocketGateway, WebSocketServer, OnGatewayConnection } from ‘@nestjs/websockets’;
@WebSocketGateway()
export class ChatGateway implements OnGatewayConnection {
@WebSocketServer()
server;
handleConnection(client: any, …args: any[]) {
console.log(‘Client connected’);
}
}

The @OnGatewayConnection decorator tells NestJS to call the handleConnection method whenever a new Websocket connection is established. We can then use this method to handle incoming Websocket connections. In this example, we simply log a message to the console to indicate that a new client has connected.

Handling Websocket Messages in NestJS

In addition to handling incoming Websocket connections, we also need to handle incoming messages. To do this, we need to use the @OnGatewayMessage decorator provided by the @nestjs/websockets package. We can define our message handler as follows:

import { WebSocketGateway, WebSocketServer, OnGatewayConnection, OnGatewayMessage } from ‘@nestjs/websockets’;
@WebSocketGateway()
export class ChatGateway implements OnGatewayConnection, OnGatewayMessage {
@WebSocketServer()
server;
handleConnection(client: any, …args: any[]) {
console.log(‘Client connected’);
}
handleMessage(client: any, payload: any) {
console.log(‘Received message:’, payload);
this.server.emit(‘message’, payload);
}
}

The @OnGatewayMessage decorator tells NestJS to call the handleMessage method whenever a new Websocket message is received. We can then use this method to handle incoming messages. In this example, we simply log the incoming message to the console and broadcast it to all connected clients using the server.emit method.

Handling Websocket Disconnections in NestJS

Finally, we also need to handle Websocket disconnections. To do this, we need to use the @OnGatewayDisconnect decorator provided by the @nestjs/websockets package. We can define our disconnection handler as follows:

import { WebSocketGateway, WebSocketServer, OnGatewayConnection, OnGatewayMessage, OnGatewayDisconnect } from ‘@nestjs/websockets’;
@WebSocketGateway()
export class ChatGateway implements OnGatewayConnection, OnGatewayMessage, OnGatewayDisconnect {
@WebSocketServer()
server;
handleConnection(client: any, …args: any[]) {
console.log(‘Client connected’);
}
handleMessage(client: any, payload: any) {
console.log(‘Received message:’, payload);
this.server.emit(‘message’, payload);
}
handleDisconnect(client: any) {
console.log(‘Client disconnected’);
}
}

The @OnGatewayDisconnect decorator tells NestJS to call the handleDisconnect method whenever a Websocket client disconnects. We can then use this method to handle disconnections. In this example, we simply log a message to the console to indicate that a client has disconnected.

Using Websocket NestJS in a Real-World Application

Now that we have a basic understanding of how Websocket NestJS works, let’s explore how we can use it in a real-world application. Let’s say we want to build a real-time chat application. We can start by creating a new Websocket gateway named chat:

nest generate gateway chat

We can then define our connection, message, and disconnection handlers in the chat gateway:

import { WebSocketGateway, WebSocketServer, OnGatewayConnection, OnGatewayMessage, OnGatewayDisconnect } from ‘@nestjs/websockets’;
@WebSocketGateway()
export class ChatGateway implements OnGatewayConnection, OnGatewayMessage, OnGatewayDisconnect {
@WebSocketServer()
server;
handleConnection(client: any, …args: any[]) {
console.log(‘Client connected’);
}
handleMessage(client: any, payload: any) {
console.log(‘Received message:’, payload);
this.server.emit(‘message’, payload);
}
handleDisconnect(client: any) {
console.log(‘Client disconnected’);
}
}

We can then define our chat service, which will handle the business logic of our chat application:

import { Injectable } from ‘@nestjs/common’;
@Injectable()
export class ChatService {
private messages = [];
addMessage(message: string) {
this.messages.push(message);
}
getMessages() {
return this.messages;
}
}

We can then inject the chat service into our chat gateway and use it to handle incoming messages:

import { WebSocketGateway, WebSocketServer, OnGatewayConnection, OnGatewayMessage, OnGatewayDisconnect } from ‘@nestjs/websockets’;
import { ChatService } from ‘./chat.service’;
@WebSocketGateway()
export class ChatGateway implements OnGatewayConnection, OnGatewayMessage, OnGatewayDisconnect {
@WebSocketServer()
server;
constructor(private chatService: ChatService) {}
handleConnection(client: any, …args: any[]) {
console.log(‘Client connected’);
}
handleMessage(client: any, payload: any) {
console.log(‘Received message:’, payload);
this.chatService.addMessage(payload);
this.server.emit(‘message’, this.chatService.getMessages());
}
handleDisconnect(client: any) {
console.log(‘Client disconnected’);
}
}

In this example, we inject the chat service into our chat gateway using the constructor. We then use the chat service to handle incoming messages. Whenever a new message is received, we add it to the chat service’s list of messages and broadcast the updated list of messages to all connected clients using the server.emit method.

FAQs

What is Websocket NestJS?

Websocket NestJS is a combination of Websocket, a protocol that allows real-time communication between a client and a server over a single, long-lived connection, and NestJS, a popular Node.js framework that facilitates the building of server-side applications in TypeScript. When combined, Websocket and NestJS can enable the creation of powerful real-time applications.

How do I set up a Websocket NestJS application?

To set up a basic Websocket NestJS application, you need to install NestJS and its dependencies using the npm install command. You can then create a new NestJS application using the NestJS CLI by running the nest new command. Finally, you can start the application by running the npm run start:dev command.

How do I implement Websocket in NestJS?

To implement Websocket in NestJS, you need to install the @nestjs/websockets package using the npm install command. You can then create a new Websocket gateway using the NestJS CLI by running the nest generate gateway command. Finally, you can define your Websocket logic in the generated gateway class.

How do I handle Websocket connections, messages, and disconnections in NestJS?

To handle Websocket connections, messages, and disconnections in NestJS, you need to use the @WebSocketGateway, @OnGatewayConnection, @OnGatewayMessage, and @OnGatewayDisconnect decorators provided by the @nestjs/websockets package. You can define your connection, message, and disconnection handlers in your Websocket gateway class.

How can I use Websocket NestJS in a real-world application?

To use Websocket NestJS in a real-world application, you need to define your business logic in a service class and inject it into your Websocket gateway class. You can then use the service class to handle incoming messages and broadcast updates to all connected clients.