实时聊天应用程序
构建简单的实时聊天应用程序，演示消息广播和私信功能。
实时聊天应用程序 是 CoddyKit 上的免费 Node.js Backend Development Bootcamp 课时。 这是第 6 节课，共 6 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Node.js Backend Development Bootcamp 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Node.js Backend Development Bootcamp 课程共包含 6 节课。
本课时的部分内容尚未翻译，以英文显示。
What Makes a Chat App Real-time?
Real-time chat applications allow users to send and receive messages instantly, without refreshing their browser.
This is made possible by WebSockets, which provide a persistent, bidirectional communication channel between the client and server.
In this lesson, we'll build a simple chat app with NestJS, demonstrating message broadcasting and private messaging.
Setting Up Our Chat Gateway
In NestJS, a Gateway is a class annotated with @WebSocketGateway() that handles WebSocket connections and messages.
It acts as the entry point for real-time communication. We'll specify a port for our WebSocket server.
import { WebSocketGateway, WebSocketServer } from '@nestjs/websockets';
import { Server } from 'socket.io';
@WebSocketGateway(3001, { cors: true }) // Port 3001, enable CORS
export class ChatGateway {
@WebSocketServer() server: Server; // socket.io server instance
// More logic will go here
}Managing Client Connections
Our gateway needs to know when clients connect and disconnect. We implement OnGatewayConnection and OnGatewayDisconnect interfaces.
This allows us to run logic when a new user joins or leaves the chat.
import {
WebSocketGateway, WebSocketServer,
OnGatewayConnection, OnGatewayDisconnect
} from '@nestjs/websockets';
import { Server, Socket } from 'socket.io';
@WebSocketGateway(3001, { cors: true })
export class ChatGateway implements OnGatewayConnection, OnGatewayDisconnect {
@WebSocketServer() server: Server;
handleConnection(client: Socket, ...args: any[]) {
console.log(`Client connected: ${client.id}`);
// You might add client to a list here
}
handleDisconnect(client: Socket) {
console.log(`Client disconnected: ${client.id}`);
// Remove client from any lists
}
}Sending Messages to Everyone
To broadcast a message, we listen for an event (e.g., 'sendMessage') from a client. When received, we use this.server.emit() to send it to ALL connected clients.
The @SubscribeMessage() decorator maps incoming WebSocket messages to handler methods.
import {
WebSocketGateway, WebSocketServer,
OnGatewayConnection, OnGatewayDisconnect,
SubscribeMessage, MessageBody
} from '@nestjs/websockets';
import { Server, Socket } from 'socket.io';
@WebSocketGateway(3001, { cors: true })
export class ChatGateway implements OnGatewayConnection, OnGatewayDisconnect {
@WebSocketServer() server: Server;
handleConnection(client: Socket) { /* ... */ }
handleDisconnect(client: Socket) { /* ... */ }
@SubscribeMessage('sendMessage')
handleMessage(@MessageBody() data: { message: string, senderId: string }): void {
console.log(`Message from ${data.senderId}: ${data.message}`);
this.server.emit('receiveMessage', data); // Broadcast to all
}
}Client-side: Basic Chat Interaction
On the client, we use a library like socket.io-client to connect to our NestJS gateway.
We can then emit messages and on events to receive broadcasts.
// index.html (conceptual client-side script)
const socket = io('http://localhost:3001');
socket.on('connect', () => {
console.log('Connected to chat server!');
socket.emit('sendMessage', {
message: 'Hello everyone!',
senderId: 'user123'
});
});
socket.on('receiveMessage', (data) => {
console.log(`New message: ${data.message} from ${data.senderId}`);
// Update chat UI
});Targeting Specific Users (Private Chat)
Broadcasting is great for general announcements, but what about private conversations between two users?
For private messages, we need a way to identify individual clients and send messages only to them, or to a specific group (a 'room').
Identifying Individual Clients
To send private messages, we need to map a user's unique ID (e.g., from their login) to their specific WebSocket connection ID (client.id).
We can store this mapping in a simple object or Map within our gateway.
import {
WebSocketGateway, WebSocketServer,
OnGatewayConnection, OnGatewayDisconnect,
ConnectedSocket
} from '@nestjs/websockets';
import { Server, Socket } from 'socket.io';
@WebSocketGateway(3001, { cors: true })
export class ChatGateway implements OnGatewayConnection, OnGatewayDisconnect {
@WebSocketServer() server: Server;
private connectedUsers: Map<string, string> = new Map(); // userId -> socketId
handleConnection(@ConnectedSocket() client: Socket) {
const userId = client.handshake.query.userId as string; // Get user ID from query
if (userId) {
this.connectedUsers.set(userId, client.id);
console.log(`User ${userId} connected with socket ID: ${client.id}`);
} else {
console.log(`Client connected without userId: ${client.id}`);
}
}
handleDisconnect(@ConnectedSocket() client: Socket) {
const userId = [...this.connectedUsers.entries()]
.find(([key, val]) => val === client.id)?.[0];
if (userId) {
this.connectedUsers.delete(userId);
console.log(`User ${userId} disconnected.`);
} else {
console.log(`Client disconnected: ${client.id}`);
}
}
// ... handleMessage for broadcasting ...
}Sending Direct Messages to a User
With our user-to-socket mapping, we can now send messages directly to a target user's socket.
We listen for a 'privateMessage' event, look up the recipient's socket ID, and use this.server.to(socketId).emit().
import {
WebSocketGateway, WebSocketServer,
OnGatewayConnection, OnGatewayDisconnect,
SubscribeMessage, MessageBody
} from '@nestjs/websockets';
import { Server, Socket } from 'socket.io';
@WebSocketGateway(3001, { cors: true })
export class ChatGateway implements OnGatewayConnection, OnGatewayDisconnect {
@WebSocketServer() server: Server;
private connectedUsers: Map<string, string> = new Map(); // userId -> socketId
handleConnection(client: Socket) { /* ... */ }
handleDisconnect(client: Socket) { /* ... */ }
@SubscribeMessage('sendMessage')
handleMessage(data: { message: string, senderId: string }): void { /* ... */ }
@SubscribeMessage('privateMessage')
handlePrivateMessage(
@MessageBody() data: { recipientId: string, message: string, senderId: string }
): void {
const recipientSocketId = this.connectedUsers.get(data.recipientId);
if (recipientSocketId) {
this.server.to(recipientSocketId).emit('receivePrivateMessage', {
message: data.message,
senderId: data.senderId
});
console.log(`Private message from ${data.senderId} to ${data.recipientId}`);
} else {
console.log(`Recipient ${data.recipientId} not found or offline.`);
}
}
}Using Rooms for Group Chats
For group chats, or even 1-on-1 chats, Socket.IO rooms are a powerful feature. Clients can 'join' a room, and you can then broadcast messages to that specific room.
client.join('roomName'): Adds a client to a room.this.server.to('roomName').emit(): Sends a message to all clients in that room.
This simplifies managing message distribution for multiple participants.
Distinguishing Message Types
Consider a NestJS chat application. A user sends a message. You want to ensure only a specific group of 5 users (who are all online) receives this message, not everyone connected.
Real-time Chat: Broadcast & Private
In this lesson, you learned to build a basic real-time chat application using NestJS WebSockets.
- We set up a Gateway to handle connections.
- Implemented broadcasting messages to all connected clients.
- Explored private messaging by mapping user IDs to socket IDs.
- Briefly touched on using Socket.IO rooms for efficient group communication.
These concepts are fundamental for creating interactive, real-time features in your applications!
常见问题解答
「实时聊天应用程序」课时是免费的吗？
是的 — 「实时聊天应用程序」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Node.js Backend Development Bootcamp 课程的其余内容，请升级到 CoddyKit PRO。 Node.js Backend Development Bootcamp 课程共包含 6 节课。
「实时聊天应用程序」这节课中我会学到什么？
构建简单的实时聊天应用程序，演示消息广播和私信功能。 你通过在浏览器中直接运行的动手代码来练习 Node.js Backend Development Bootcamp，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Node.js Backend Development Bootcamp 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Node.js Backend Development Bootcamp 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 6 节课，共 6 节。
「实时聊天应用程序」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Node.js Backend Development Bootcamp 课中编写并运行代码吗？
能。每节 Node.js Backend Development Bootcamp 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。