WebSocket's are a communication protocol that enables bidirectional, real-time communication between a client and a server over a single, long-lived connection. Unlike traditional HTTP requests, which are request-response based, WebSocket's provide a two-way (full-duplex), persistent connection that allows data to be sent and received at any time without the overhead of establishing a new connection for each exchange.
Advantages of using WebSocket connections are as follows:
Overall, WebSocket's are a powerful tool for building interactive, real-time web applications and have become an essential technology for modern web development.
To use WebSocket's, you typically need both a client-side implementation (usually JavaScript in a web browser) and a server-side implementation. For the purposes of this tutorial, we will be using Postman to test our WebSocket connection & on the server we will be using Nest.js.
First of all, we will need to make sure that we have the Nest.js CLI installed. This will allow us scaffold and maintain our project locally.
npm i -g @nestjs/cliSecondly, we will need to install the relevant WebSocket packages from NPM:
npm i --save @nestjs/websockets @nestjs/platform-socket.ioOur folder structure will look like this:
.
├── dist
├── node_modules
└── src/
├── websocket/
│ ├── websocket.module.ts
│ └── websocket.ts
├── app.controller.ts
├── app.service.ts
├── app.module.ts
└── main.ts
Below is a simple boilerplate to get us started.
/* Websocket.ts */
import { OnModuleInit } from '@nestjs/common';
import {
MessageBody,
SubscribeMessage,
WebSocketGateway,
WebSocketServer,
} from '@nestjs/websockets';
import { Server } from 'socket.io';
@WebSocketGateway({
cors: {
origin: '*',
},
})
export class Websocket implements OnModuleInit {
constructor() {}
@WebSocketServer()
server: Server;
@SubscribeMessage('newMessage')
onNewMessage(@MessageBody() body: any) {
this.server.emit('onMessage', {
msg: 'New Message',
content: body,
});
}
}
Let’s run through what is going on:
First, we begin by importing the OnModuleInit module from @nestjs/common — This is an interface that allows a class to define a lifecycle hook when a module is initialized.
Next, we import decorators MessageBody, SubscribeMessage, WebSocketGateway, WebSocketServer from ‘@nestjs/websockets’
The @WebSocketServer() decorator is applied to the server property, which is of type Server (imported from ‘socket.io’). This decorator is used to inject the WebSocket server instance into the class.
The @SubscribeMessage(‘newMessage’) decorator is applied to the onNewMessage method. This decorator indicates that this method should be called when a WebSocket client sends a message with the name newMessage.
The onNewMessage method takes a parameter annotated with @MessageBody(). This decorator is used to extract the message body from the incoming WebSocket message. Inside the method, it emits a new WebSocket message to all connected clients using this.server.emit(). The emitted message has the name ‘onMessage’ and includes a payload with the message ‘New Message’ and the content of the incoming message body.
In summary, this code defines a WebSocket gateway using Nest.js that listens for WebSocket messages with the name ‘newMessage’. When such a message is received, it emits a ‘onMessage’ event to all connected WebSocket clients with a payload that includes ‘New Message’ and the content of the incoming message. This code provides a basic foundation for real-time communication using WebSocket's in a Nest.js application.
Firstly, we’ll need to open Postman and create a new connection. As shown above you will need to select Socket.io.
import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
async function bootstrap() {
const app = await NestFactory.create(AppModule);
await app.listen(5000);
}
bootstrap();
Our application will be running on Port 5000 so let's start our development server using our start script below.
npm run start:devAs highlighted with the green arrow above we’ll click on the connect button which will establish a connection with the server.
we will also add an onMessage event listener. This will subscribe to any events with this name and log them out.
from client 1 we will then write “Hello world1!” and give it the event name newMessage which we added to the @SubscribeMessage(‘newMessage’) decorator in websocket.ts.
Once we send the message and move to client 2 tab, we should see the message that was sent from client 1. And that's it! By following these steps, you should be able to create a websocket connection using Nest.js and Socket.io!