php
import {Module} from "@nestjs/common";
import { EventsGateway } from "./events.gateway";
@Module({
imports:[],
controllers:[],
providers:[EventsGateway],
exports:[]
})
export class websocketModule {
}
核心逻辑
less
import {WebSocketGateway,SubscribeMessage,MessageBody,ConnectedSocket,WebSocketServer, OnGatewayInit, OnGatewayConnection, OnGatewayDisconnect,} from "@nestjs/websockets";
import { Server, Socket } from 'socket.io';
@WebSocketGateway()
export class EventsGateway implements OnGatewayInit, OnGatewayConnection, OnGatewayDisconnect{
//给所有websocket客端发送信息
@WebSocketServer()
server: Server;
/**
* userId -> socketId
*/
private userSocketMap = new Map<number, string>();
/**
* socketId -> userId
*/
private socketUserMap = new Map<string, number>();
//群聊
@SubscribeMessage('events')
handleEvent(@MessageBody() data: string, @ConnectedSocket() client: Socket) {
console.log("----------------------------",data,client.id)
// 回复当前客户端
// client.emit('events', {
// type:'client',
// message: data['message']
// });
//回复全部客户端包括自己
// this.server.emit('events', {
// type:'client',
// message: data['message']
// });
// 广播给除了当前客户端之外的所有客户端
client.broadcast.emit('events', {
type: 'client',
message: data['message']
});
}
/**
* 私聊
*/
@SubscribeMessage('privateMessage')
handlePrivateMessage(@MessageBody() data: any, @ConnectedSocket() client: Socket) {
console.log("data>>>>",data.toUserId)
/**
* 当前发送者
*/
const fromUserId =this.socketUserMap.get(client.id);
/**
* 接收者
*/
const toUserId = Number(data.toUserId);
//根据客户端发过来的toUserId(发给谁的toUserId)在找到 这个toUserId的 scoket.id
const toSocketId=this.userSocketMap.get(toUserId);
if(!toSocketId){
client.emit('privateMessage',{
message: '不在线',
time: Date.now(),
});
return
}
/**
* 发送给指定用户
* 这个指的是 toSocketId 发给谁的 socket.id 通过传过来的 toUserId(发给谁的 id)在去查找 socket.id 拿到之后 传入this.server.to(XXX)
*/
this.server.to(toSocketId).emit('privateMessage', {
fromUserId,
// toUserId,
message: data.message,
time: Date.now(),
});
}
afterInit(server: Server) {
console.log('WebSocket 初始化完成');
}
handleConnection(client: Socket) {
// console.log('客户端连接:', client.handshake);
this.userSocketMap.set(Number(client.handshake.auth.userId),client.id);
this.socketUserMap.set(client.id,client.handshake.auth.userId);
// 广播给所有客户端 》》给所有websocket客端发送信息
this.server.emit('server', {
type:'server',
message: `用户 ${client.handshake.auth.userId} 加入聊天室`
});
}
handleDisconnect(client: Socket) {
this.server.emit('server', {
type:'server',
message: `用户 ${client.id} 离开聊天室`
});
console.log('客户端断开:', client.id);
}
}
html*
WebSocket 聊天室
×
欢迎回来
登录您的账号
xml
<div class="field">
<label>账号 / 邮箱</label>
<input type="text" id="text" placeholder="请输入账号或邮箱" />
</div>
ini
<button class="login-btn" id="loginBtn">登 录</button>
<div class="footer-links">
<a href="#">忘记密码?</a>
<a href="#">立即注册</a>
</div>
💬 聊天室
连接中...
⚡ 正在连接服务器...
欢迎来到聊天室!
发送 ```