Real-time chat with NestJS and Socket.io
Jan 25, 2025 am 02:31 AMThis 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:
nest generate module chat
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
, andnewMessage
. - 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!

Hot Article

Hot tools Tags

Hot Article

Hot Article Tags

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

Replace String Characters in JavaScript

HTTP Debugging with Node and http-console

Custom Google Search API Setup Tutorial
