developing-a-real-time-chat-application-using-nestjs-and-websockets.html

Developing a Real-Time Chat Application Using NestJS and WebSockets

In the era of instant communication, chat applications have become a staple for businesses and individuals alike. If you’re a developer looking to build a real-time chat application, NestJS coupled with WebSockets provides a robust framework for creating efficient, scalable applications. This article will guide you through the process of building a real-time chat application step-by-step.

What is NestJS?

NestJS is a progressive Node.js framework for building efficient, reliable, and scalable server-side applications. It leverages TypeScript, making it an excellent choice for developers familiar with JavaScript and looking for type safety and modern development practices.

Why Use WebSockets for Real-Time Communication?

WebSockets allow for two-way communication between the client and server over a single, long-lived connection. Unlike traditional HTTP requests, WebSockets enable real-time updates, making them ideal for chat applications where instant message delivery is crucial.

Use Cases for Real-Time Chat Applications

Customer Support: Businesses can provide real-time assistance to customers.
Social Networking: Users can interact with each other instantly.
Online Gaming: Real-time chat enhances user experience during gameplay.
Collaborative Tools: Teams can communicate instantly while working on projects.

Setting Up Your Development Environment

To get started with your chat application, ensure you have the following installed:

Node.js (12.x or later)
npm (Node Package Manager)
NestJS CLI

Step 1: Install NestJS CLI

First, install the NestJS CLI globally by running:

npm install -g @nestjs/cli

Step 2: Create a New NestJS Project

Create a new project by running:

nest new chat-app

Navigate to your project directory:

cd chat-app

Step 3: Install Dependencies

Next, you need to install the WebSocket package:

npm install @nestjs/websockets socket.io

Building the Chat Module

Now, let’s create a chat module that will handle our WebSocket logic.

Step 4: Generate the Chat Module

Run the following command to generate a new module:

nest generate module chat

Step 5: Create a Chat Gateway

Next, we will create a gateway that will handle WebSocket events. Generate a new gateway:

nest generate gateway chat

Open the newly created chat.gateway.ts file and implement the WebSocket logic:

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

@WebSocketGateway()
export class ChatGateway implements OnGatewayInit, OnGatewayConnection, OnGatewayDisconnect {
  @WebSocketServer() server: Server;

  afterInit(server: Server) {
    console.log('WebSocket initialized');
  }

  handleConnection(client: Socket) {
    console.log(`Client connected: ${client.id}`);
  }

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

  @SubscribeMessage('message')
  handleMessage(client: Socket, payload: { sender: string; message: string }) {
    this.server.emit('message', payload);
  }
}

Explanation of the Code

WebSocketGateway: This decorator creates a WebSocket server.
WebSocketServer: This property gives access to the WebSocket server instance.
handleConnection: This method is called when a client connects.
handleDisconnect: This method is called when a client disconnects.
handleMessage: This method listens for incoming messages and emits them to all connected clients.

Setting Up the Frontend

For the frontend, we’ll use a basic HTML file with Socket.IO to connect to our WebSocket server.

Step 6: Create a Simple HTML Page

Create an index.html file in the public directory:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chat Application</title>
    <script src="/socket.io/socket.io.js"></script>
</head>
<body>
    <input id="messageInput" placeholder="Type a message..." />
    <button onclick="sendMessage()">Send</button>
    <ul id="messages"></ul>
    <script>
        const socket = io();

        socket.on('message', (data) => {
            const item = document.createElement('li');
            item.textContent = `${data.sender}: ${data.message}`;
            document.getElementById('messages').appendChild(item);
        });

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

Step 7: Serve the Static Files

Ensure that your NestJS application serves static files. Update your main.ts file to include static serving:

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
import { NestExpressApplication } from '@nestjs/platform-express';
import { join } from 'path';

async function bootstrap() {
  const app = await NestFactory.create<NestExpressApplication>(AppModule);
  app.useStaticAssets(join(__dirname, '..', 'public'));
  await app.listen(3000);
}
bootstrap();

Running Your Application

You can now run your application using:

npm run start

Open your browser and navigate to http://localhost:3000. Open multiple tabs to see real-time messaging in action!

Troubleshooting Common Issues

CORS Issues: Ensure that your server is configured to handle CORS if you are accessing it from different origins.
Socket.IO Connection Errors: Check if the Socket.IO client is correctly configured and matches the server version.
Message Not Sending: Verify that the event names match between client and server.

Conclusion

Building a real-time chat application with NestJS and WebSockets is a rewarding project that enhances your skills in modern web development. With the combination of TypeScript and a powerful framework, you can create scalable applications that meet the demands of real-time communication. Start experimenting with additional features such as user authentication, message history, or chat rooms to further enhance your application. Happy coding!