L
O
A
D
I
N
G

NestJS搭建项目(二)nest+socket.io搭建简易聊天室

socket.io

首先介绍一下socket.io吧。

socket.io是一个用于实现实时通信的JavaScript库。它可以在浏览器和服务器之间实现双向通信,支持多种传输协议,如WebSocket、LongPolling、XHR等。socket.io的主要目的是为了简化实时通信在浏览器和服务器之间的实现,使得开发者可以专注于业务逻辑的实现。

socket.io的主要特点包括:

  1. 支持多种传输协议:socket.io支持WebSocket、LongPolling、XHR等传输协议,可以根据浏览器和服务器的支持情况自动选择合适的传输协议。
  2. 自动重连:socket.io会自动检测连接断开的情况,并在适当的时候尝试重新连接。
  3. 消息压缩:socket.io支持对发送的消息进行压缩,以减少传输的数据量。
  4. 错误处理:socket.io提供了丰富的错误处理机制,可以捕获并处理客户端和服务器之间的错误。
  5. 事件机制:socket.io使用事件机制来处理消息,使得代码更加简洁和易于维护。

总之,socket.io是一款功能强大、易于使用的实时通信库,可以帮助开发者轻松实现浏览器和服务器之间的实时通信。

Nest具体实现

首先需要安装依赖

npm install @nestjs/platform-socket.io

npm install @nestjs/websockets

新建一个文件用来接受广播消息和发送消息

企业微信截图_17092795153263.png

events.gateway.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
import {
ConnectedSocket,
MessageBody,
SubscribeMessage,
WebSocketGateway,
WebSocketServer,
} from '@nestjs/websockets';
import { Server,Socket } from 'socket.io';
// @WebSocketGateway是一个装饰器,用于创建WebSocket网关类。WebSocket网关类是用于处理 WebSocket连接和消息的核心组件之一。
// 它充当WebSocket服务端的中间人,负责处理客户端发起的连接请求,并定义处理不同类型消息的逻辑
@WebSocketGateway({ cors: { origin: '*' } })
export class EventGateway {
constructor() {}
@WebSocketServer()
server: Server;

@SubscribeMessage('newMessage')
handleMessage(@MessageBody() body: any, @ConnectedSocket() client: Socket) {
console.log(body);
const msg: any = {};
const { roomId, name,message } =body || {}
msg.text = message
msg.name = name
msg.roomId = roomId
this.server.to(roomId).emit('newMessage', msg)
}
// 离开房间
@SubscribeMessage('leave')
handleLeave(@MessageBody() body: any, @ConnectedSocket() client: Socket) {
const { roomId, name } =body || {}
// 先广播离开消息给房间内其他人
this.server.to(roomId).emit('leave', `用户:${name}离开了房间 ${roomId}`);
client.leave(roomId);
}
// 创建房间并加入房间
@SubscribeMessage('join')
handleJoin(@MessageBody() body: any, @ConnectedSocket() client: Socket) {
const { roomId, name } =body || {}
client.join(roomId);
// client只能给发送给发起请求的客户端
// client.emit('join', `用户:${name}加入了房间 ${roomId}`);
// 广播消息给除自己以外的所有客户端
// client.broadcast.emit('join', `用户:${name}加入了房间 ${roomId}`);
// 使用服务器实例来广播消息给所有客户端
this.server.to(roomId).emit('join', `用户:${name}加入了房间 ${roomId}`);
}

// 获取当前房间的人数
@SubscribeMessage('getRoomUsers')
handleGetRoomUsers(@MessageBody() body: any, @ConnectedSocket() client: Socket) {
const room = this.server.sockets.adapter.rooms.get(body.roomId);
if (room) {
this.server.to(body.roomId).emit('getRoomUsers', room.size);
} else {
this.server.to(body.roomId).emit('getRoomUsers', 0);
}
}
}

在app.module.ts中

1
import { EventGateway } from './events/events.gateway';

在providers中注入该服务

截图_17092802096500.png
启动项目 yarn start

前端实现逻辑

安装依赖: npm install socket.io-client

先连接上socket.io

1
2
3
import { io } from "socket.io-client";
const URL ='socket.io的地址'
const socket = io(URL);

socket.emit 发送消息

socket.on 监听消息

例如创建或加入房间 (nest代码中join事件,客户端这边连接上了socket.io,就可以通过对应事件实现双向通讯了)

1
2
3
const createOrJoinRoom = () => {
socket.emit("join", { roomId: props.state.roomId, name: props.state.name });
}

监听加入房间的事件,看看服务端回应广播的消息

1
2
3
socket.on('join', (e) => {
console.log(e)
});

其他的离开房间,发送消息等类似加入房间,具体可看源码

实现效果

前端样式比较简单具体实现效果如下:

1709280685432.png

体验地址

http://zymanage.yaoyaoqiekenao.com/

源码地址

https://github.com/DarknessZY/my-blog-app-nest.git

  • 版权声明: 本博客所有文章除特别声明外,著作权归作者所有。转载请注明出处!

我是穷比,在线乞讨!

支付宝
微信