Real-time chat with NestJS and Socket.io

This post explores building a real-time chat system using NestJS and Socket.io. I revisited a previous micro-frontend project (Building a system as lego with react and micro frontends) which lacked a robust backend. This time, I added a NestJS backend to handle the real-time chat functionality across multiple micro-frontend pages.

⚠️ This blog will be expanding significantly this year with more frequent posts and videos! Subscribe to stay updated!

Project Goals ?

The goal was to create a straightforward system for sending and receiving messages between users connected to the chat, minimizing unnecessary complexity.

Backend project: https://www.php.cn/link/037a15f03246f075193b2a295ba4c466

Frontend project: https://www.php.cn/link/ee0f827fe45c91c956bacfd78d91d47b

Development Process

The backend was initiated using the NestJS CLI:

<code class="language-bash">nest generate module chat</code>

A chat-gateway.ts file was then created (see: https://www.php.cn/link/037a15f03246f075193b2a295ba4c466/blob/master/src/chat/chat-gateway.ts).

The chat functionality included:

• User connection notifications
• User disconnection notifications
• Message broadcasting

The ChatGateway uses the @WebSocketGateway decorator, functioning as a provider (added to chat.module). CORS was enabled, and the port was customized (though not strictly necessary). The gateway implements interfaces for handleConnection and handleDisconnect.

handleConnection and handleDisconnect Methods

As detailed in the official NestJS documentation (https://www.php.cn/link/9edfa99c15e2845965b91b38e2b1311c), handleConnection receives the client socket instance. It emits a user-joined event, notifying all connected clients of a new user. handleDisconnect similarly uses the WebSocketServer instance to emit a user-left event.

Message Handling (handleNewMessage)

The @SubscribeMessage decorated handleNewMessage method handles incoming messages. It broadcasts received messages to all connected clients.

Frontend Implementation

The frontend (detailed in the previously mentioned micro-frontend blog post) utilizes a single chat component requiring modification. Changes were made to (https://www.php.cn/link/ee0f827fe45c91c956bacfd78d91d47b/blob/master/apps/chat/src/components/Chat/index.tsx):

• Integrate the socket.io-client library.
• Establish a connection to the backend port.
• Add event listeners for user-joined, user-left, message, and newMessage.
• Minor adjustments to remove previous "bot replies" logic.

The component's logic is relatively straightforward.

Conclusion

This project focused on core functionality, directly implementing the chat module without extensive abstraction. Future posts will explore additional features using NestJS and Socket.io.

The above is the detailed content of Real-time chat with NestJS and Socket.io. For more information, please follow other related articles on the PHP Chinese website!