Building a Real-time Chat Application with Nest.js and WebSockets

In this article, we'll explore how to build a real-time chat application using Nest.js and WebSockets. We'll cover the basics of WebSockets, how to set up a Nest.js project, and how to implement real-time communication between clients and the server.

What are WebSockets?

WebSockets are a protocol that allows for bidirectional, real-time communication between a client and a server over the web. Unlike traditional HTTP requests, which are unidirectional and stateless, WebSockets establish a persistent connection between the client and server, allowing for efficient and low-latency communication.

How do WebSockets Work?

Here's a high-level overview of how WebSockets work:

  +-----------+       +-----------+
  |  Client  |       |  Server  |
  +-----------+       +-----------+
           |               |
           |  HTTP Request  |
           |  (Upgrade to   |
           |   WebSocket)    |
           |---------------|
           |               |
           |  WebSocket    |
           |  Connection    |
           |  Established  |
           |---------------|
           |               |
           |  Bidirectional|
           |  Real-time     |
           |  Communication  |
           |---------------|

Setting up a Nest.js Project

To get started with building our real-time chat application, we'll need to set up a new Nest.js project. We can do this using the Nest.js CLI:

npm i -g @nestjs/cli
nest new chat-app

This will create a new Nest.js project called `chat-app` with the basic directory structure and configuration files.

Installing Dependencies

Next, we'll need to install the `@nestjs/websockets` package, which provides support for WebSockets in Nest.js:

npm install @nestjs/websockets

Implementing Real-time Communication

Now that we have our Nest.js project set up, we can start implementing real-time communication using WebSockets. We'll create a new module called `chat.module.ts` to handle our chat functionality:

// chat.module.ts
import { Module } from '@nestjs/common';
import { ChatGateway } from './chat.gateway';
import { ChatService } from './chat.service';

@Module({
  providers: [ChatGateway, ChatService],
})
export class ChatModule {}

We'll also create a new gateway called `chat.gateway.ts` to handle WebSocket connections:

// chat.gateway.ts
import { WebSocketGateway, WebSocketServer } from '@nestjs/websockets';
import { Server } from 'ws';

@WebSocketGateway()
export class ChatGateway {
  @WebSocketServer()
  server: Server;

  afterInit() {
    console.log('Chat gateway initialized');
  }

  handleConnection(client: any) {
    console.log('Client connected');
  }

  handleDisconnect(client: any) {
    console.log('Client disconnected');
  }
}

Handling Messages

Now that we have our chat gateway set up, we can start handling messages from clients. We'll create a new method called `handleMessage` to handle incoming messages:

// chat.gateway.ts
import { WebSocketGateway, WebSocketServer } from '@nestjs/websockets';
import { Server } from 'ws';

@WebSocketGateway()
export class ChatGateway {
  // ...

  handleMessage(message: any) {
    console.log(`Received message: ${message}`);
    this.server.emit('message', message);
  }
}

This method will emit the received message to all connected clients.

Client-Side Implementation

Now that we have our server-side implementation set up, we can start building our client-side application. We'll use the `ws` library to establish a WebSocket connection to our server:

// client.js
import WebSocket from 'ws';

const ws = new WebSocket('ws://localhost:3000');

ws.on('open', () => {
  console.log('Connected to server');
});

ws.on('message', (message) => {
  console.log(`Received message: ${message}`);
});

ws.on('error', (error) => {
  console.log(`Error occurred: ${error}`);
});

ws.on('close', () => {
  console.log('Disconnected from server');
});

This code establishes a WebSocket connection to our server and handles incoming messages.

Conclusion

In this article, we've explored how to build a real-time chat application using Nest.js and WebSockets. We've covered the basics of WebSockets, how to set up a Nest.js project, and how to implement real-time communication between clients and the server.

FAQs

What is a WebSocket?

A WebSocket is a protocol that allows for bidirectional, real-time communication between a client and a server over the web.

How do WebSockets work?

WebSockets establish a persistent connection between the client and server, allowing for efficient and low-latency communication.

What is Nest.js?

Nest.js is a framework for building server-side applications in Node.js.

How do I set up a Nest.js project?

You can set up a new Nest.js project using the Nest.js CLI.

How do I implement real-time communication using WebSockets in Nest.js?

You can implement real-time communication using WebSockets in Nest.js by creating a new gateway and handling messages from clients.