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>

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

发送 ```

相关推荐
Jmyd01236 小时前
Web端3D营销展厅技术实现路径:从素材上云到线索回流的数据链路
前端·3d·性能优化·三维数字化
砚凝霜6 小时前
【软考信息安全】第二十二章 Web服务器安全分析与增强——Apache与IIS
服务器·前端·安全
濮水大叔7 小时前
NestJS Dynamic Providers 与 Cabloy/Vona Provider Scene:同接口多实现的两种装配哲学
typescript·node.js·nestjs
u0111026758 小时前
JPG、PNG、WebP 怎么选?按透明度、体积和使用场景做判断
前端·javascript·vue.js·图像处理·ai作画
jerrywus9 小时前
让 AI 写完代码后交一份报告:我改造了 answer-me-with-html
前端·claude·cursor
派小心.9 小时前
小程序分享链路中来源参数的传递校验
大数据·前端·数据库·人工智能·小程序·数据分析
hhb_6189 小时前
一键生成数据看板,ECharts实战演示
前端·javascript·echarts
Java后端的Ai之路10 小时前
08_React组件API
前端·react.js·前端框架
小马不起床10 小时前
零基础玩转 FastAPI_09:前端基础工程构建
前端·状态模式·fastapi
风骏时光牛马11 小时前
用户管理模块接口开发
前端