NestJS Websocket Gateway: Everything You Need to Know

Websocket Port Leave a comment 102 Views

Table of Contents show

Introduction

If you’re working on a real-time application, you know the importance of websockets. They allow you to establish a persistent connection between the client and server, enabling real-time communication. However, implementing websockets can be a daunting task, especially when you’re working with a large codebase. NestJS, a popular Node.js framework, simplifies this process with its Websocket Gateway module. In this article, we’ll dive deep into the NestJS Websocket Gateway and how to use it to build real-time applications.

What is NestJS?

NestJS is a progressive Node.js framework that uses modern JavaScript, TypeScript, and design patterns to build scalable and efficient server-side applications. It’s built on top of Express.js and supports a wide range of plugins and modules. NestJS uses Dependency Injection, which makes it easier to write modular and maintainable code. It also has strong support for TypeScript, which provides better type checking and improves code quality.

What are Websockets?

Websockets are a communication protocol that enables real-time communication between the client and server. Unlike the traditional HTTP protocol, which is request-response-based, websockets allow bidirectional communication. This means that the server can send data to the client without the client requesting it, and vice versa. This makes websockets ideal for real-time applications, such as chat applications, multiplayer games, and stock tickers.

What is the NestJS Websocket Gateway?

The NestJS Websocket Gateway is a module that simplifies the process of implementing websockets in NestJS applications. It provides a simple and easy-to-use API for handling websocket connections, events, and messages. The Websocket Gateway module is built on top of the Socket.io library, which provides a robust and scalable websocket implementation.

How to Install NestJS Websocket Gateway

First, create a new NestJS application using the CLI:

npx @nestjs/cli new my-app

Next, install the Websocket Gateway module:

npm install –save @nestjs/websockets

Finally, import the Websocket Gateway module in your application:

import { WebSocketModule } from ‘@nestjs/websockets’;@Module({imports: [WebSocketModule],})

Websocket Gateway Event Handlers

The Websocket Gateway module provides several event handlers that you can use to handle websocket events. These event handlers include:

onGatewayConnection

The onGatewayConnection event handler is called when a client connects to the websocket server. You can use this handler to perform any necessary setup for the client connection, such as authentication or session management.

onGatewayDisconnect

The onGatewayDisconnect event handler is called when a client disconnects from the websocket server. You can use this handler to perform any necessary cleanup for the client connection, such as removing the client from any active sessions.

onGatewayInit

The onGatewayInit event handler is called when the Websocket Gateway module is initialized. You can use this handler to perform any necessary setup for the module, such as initializing any external dependencies.

onGatewayConnectionLost

The onGatewayConnectionLost event handler is called when a client connection is lost due to network issues. You can use this handler to perform any necessary cleanup for the client connection, such as removing the client from any active sessions.

Websocket Gateway Message Handlers

The Websocket Gateway module also provides several message handlers that you can use to handle websocket messages. These message handlers include:

@SubscribeMessage

The @SubscribeMessage decorator is used to define a message handler method. This method will be called when the server receives a message with the specified event name. You can use this decorator to define custom message handlers for your application.

@MessageBody

The @MessageBody decorator is used to extract the message payload from the incoming message. You can use this decorator to access the data sent by the client.

@ConnectedSocket

The @ConnectedSocket decorator is used to inject the websocket connection object into the message handler method. You can use this decorator to access information about the client connection, such as the client’s IP address or session ID.

Using Websockets in NestJS Controllers

The Websocket Gateway module can be used in NestJS controllers to handle websocket connections and messages. To do this, you need to create a new controller and use the @WebSocketGateway decorator to register the controller as a websocket gateway.

Creating a Websocket Controller

To create a new websocket controller, you need to use the @WebSocketGateway decorator and define event and message handler methods.

@WebSocketGateway()export class MyWebSocketGateway {@SubscribeMessage(‘message’)handleMessage(@MessageBody() data: string, @ConnectedSocket() client: Socket): void {// Handle message here}}

Registering the Websocket Controller

After creating the controller, you need to register it with the Websocket Gateway module by using the @WebSocketGateway decorator in your application module.

@Module({imports: [WebSocketModule],controllers: [MyWebSocketGateway],})

Websocket Gateway Authentication

Websocket Gateway provides built-in support for authentication using JSON Web Tokens (JWT). To enable authentication, you need to use the @UseGuards decorator and specify the JwtAuthGuard.

@WebSocketGateway()@UseGuards(JwtAuthGuard)export class MyWebSocketGateway {// Event and message handlers}

Websocket Gateway Broadcasting

Websocket Gateway provides a simple and easy-to-use API for broadcasting messages to all connected clients or a specific group of clients. To broadcast a message, you need to use the emit() method of the Socket object.

@SubscribeMessage(‘message’)handleMessage(@MessageBody() data: string, @ConnectedSocket() client: Socket): void {// Broadcast message to all connected clientsclient.broadcast.emit(‘message’, data);}

Websocket Gateway Rooms

Websocket Gateway provides support for creating rooms that allow you to group clients together and broadcast messages only to clients in a specific room. To create a room, you need to use the join() method of the Socket object.

@SubscribeMessage(‘joinRoom’)handleJoinRoom(@MessageBody() data: string, @ConnectedSocket() client: Socket): void {// Join a roomclient.join(data);}

Websocket Gateway FAQ

What is NestJS?

NestJS is a progressive Node.js framework that uses modern JavaScript, TypeScript, and design patterns to build scalable and efficient server-side applications.

What are Websockets?

Websockets are a communication protocol that enables real-time communication between the client and server.

What is the NestJS Websocket Gateway?

The NestJS Websocket Gateway is a module that simplifies the process of implementing websockets in NestJS applications.

How do I install NestJS Websocket Gateway?

You can install the Websocket Gateway module using npm:

npm install –save @nestjs/websockets

How do I use Websocket Gateway in NestJS controllers?

To use Websocket Gateway in NestJS controllers, you need to create a new controller and use the @WebSocketGateway decorator to register the controller as a websocket gateway.