NEST 加入聊天室
安装包
bash
pnpm i --save @nestjs/websockets @nestjs/platform-socket.io socket.io创建 Nest 模块
bash
nest g resource websocket- 里面选择 websocket
websocket.module.ts
ts
import { Module } from "@nestjs/common";
import { WebsocketService } from "./websocket.service";
import { WebsocketGateway } from "./websocket.gateway";
@Module({
providers: [WebsocketGateway, WebsocketService],
})
export class WebsocketModule {}websocket.gateway.ts
ts
import {
WebSocketGateway,
SubscribeMessage,
MessageBody,
WebSocketServer,
} from "@nestjs/websockets";
import { WebsocketService } from "./websocket.service";
import { CreateWebsocketDto } from "./dto/create-websocket.dto";
import { UpdateWebsocketDto } from "./dto/update-websocket.dto";
// 创建房间要用的
import { Server, Socket } from "socket.io";
@WebSocketGateway({ cors: { origin: "*" } })
export class WebsocketGateway {
constructor(private readonly websocketService: WebsocketService) {}
@WebSocketServer() server: Server;
@SubscribeMessage("createWebsocket")
create(@MessageBody() createWebsocketDto: CreateWebsocketDto) {
return this.websocketService.create(createWebsocketDto);
}
@SubscribeMessage("findAllWebsocket")
findAll() {
return this.websocketService.findAll();
}
@SubscribeMessage("findOneWebsocket")
findOne(@MessageBody() id: number) {
return this.websocketService.findOne(id);
}
@SubscribeMessage("updateWebsocket")
update(@MessageBody() updateWebsocketDto: UpdateWebsocketDto) {
return this.websocketService.update(
updateWebsocketDto.id,
updateWebsocketDto
);
}
@SubscribeMessage("removeWebsocket")
remove(@MessageBody() id: number) {
return this.websocketService.remove(id);
}
// 实现加入房间
@SubscribeMessage("joinRoom")
joinRoom(client: Socket, payload: any) {
console.log(payload.roomName);
client.join(payload.roomName);
this.server.to(payload.roomName).emit("message", {
nickName: payload.nickName,
message: `${payload.nickName} 加入了 ${payload.roomName} 房间`,
});
}
// 房间发送消息
@SubscribeMessage("sendMessage")
sendMessage(@MessageBody() payload: any): void {
console.log(payload);
this.server.to(payload.room).emit("message", {
nickName: payload.nickName,
message: payload.message,
});
}
}websocket.service.ts
ts
import { Injectable } from "@nestjs/common";
import { CreateWebsocketDto } from "./dto/create-websocket.dto";
import { UpdateWebsocketDto } from "./dto/update-websocket.dto";
@Injectable()
export class WebsocketService {
create(createWebsocketDto: CreateWebsocketDto) {
return "This action adds a new websocket";
}
findAll() {
return `This action returns all websocket`;
}
findOne(id: number) {
return `This action returns a #${id} websocket`;
}
update(id: number, updateWebsocketDto: UpdateWebsocketDto) {
return `This action updates a #${id} websocket`;
}
remove(id: number) {
return `This action removes a #${id} websocket`;
}
}前端
html
<html>
<head>
<script src="https://cdn.socket.io/4.3.2/socket.io.min.js"></script>
</head>
<body>
<div id="messageBox"></div>
<input id="messageInput" />
<button id="sendMessage">发送</button>
<script>
const messageBox = document.getElementById("messageBox");
const messageInput = document.getElementById("messageInput");
const sendMessage = document.getElementById("sendMessage");
const roomName = prompt("输入群聊名");
const nickName = prompt("输入昵称");
if (roomName && nickName) {
const socket = io("http://localhost:5000");
socket.on("connect", function () {
console.log("Connected");
socket.emit("joinRoom", { roomName, nickName });
socket.on("message", (payload) => {
console.log("收到来自房间的消息:", payload);
const item = document.createElement("div");
item.className = "message";
item.textContent = payload.nickName + ": " + payload.message;
messageBox.appendChild(item);
});
});
sendMessage.onclick = function () {
socket.emit("sendMessage", {
room: roomName,
nickName,
message: messageInput.value,
});
};
socket.on("disconnect", function () {
console.log("Disconnected");
});
}
</script>
</body>
</html>