nest.js websocket 群聊----私聊功能

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>

💬 聊天室
连接中...
⚡ 正在连接服务器...
欢迎来到聊天室!

发送 ```

相关推荐
流光D42 分钟前
AI Era: Building Web Sites and Configuring Nginx Reverse Proxy Process
前端·人工智能·nginx
sakidd42 分钟前
VS Code 的 AI Chat 现在已经这么能干了?
前端
计算机魔术师1 小时前
英伟达砸130亿美元买下一个平台,黄仁勋到底在怕什么?
前端
leoZ2311 小时前
第 2 篇:搭建地基——Vue3 + Vite + Tailwind v4 + shadcn-vue
前端·javascript·vue.js·人工智能·目标检测·数据挖掘·语音识别
coderCN1 小时前
Nodejs path OS process child_process FS crypto zlib ffmpeg Markdown 转 html
前端
梨想橙汁1 小时前
JS BOM 浏览器对象:定时器与同步异步底层理解
前端·javascript
梨想橙汁2 小时前
ES6+ 必用新特性:箭头函数、解构、模板字符串、扩展运算符
前端·javascript
梨想橙汁2 小时前
DOM 与 JS 事件:页面元素操作、事件冒泡、事件委托实战
前端·javascript
Dreams°1232 小时前
【React+TS+ECharts可视化避坑:图表空白、不实时更新、数据池堆积卡顿完整复盘(附完整源码)】
前端·react.js·echarts