首页 > 其他分享 >#yyds干货盘点#使用socket.io实现多房间通信聊天室

#yyds干货盘点#使用socket.io实现多房间通信聊天室

时间:2023-04-16 15:34:17浏览次数:40  
标签:yyds socket user io msg message log

websocket的实现有很多种,像ws和socket.io,这里使用的是socket.io来实现多房间的效果。

这里的使用没有使用socket.io官方提供的namespaceroom,而是完全通过一个namespace实现的。数据传输使用JSON格式,封装了消息规范

消息体规范

const actionType = {
    join:'JOIN',//加入
    leave:'LEAVE',//离开
    talk:'TALK',//消息
    action:'ACTION',//用户操作
    push:'PUSH'//系统推送
}//消息体
class MSG {
    constructor(type,body){
        this.type = type;
        this.body= body;
    }
}

安装使用

npm install socket.io-rooms --save

demo演示

把项目从github上clone下来后,执行npm start,然后打开example/index.html即可品尝到演示效果


使用方式

服务端Server

const {User,Rooms}  = require('socket.io-rooms')
const server = require('http').createServer();
const io = require('socket.io')(server);
//大厅
io.on('connection', client => {
    let user = new User();
    client.emit('user',user);
    client.on('join', data => {
        /\* 加入某个房间 \*/ 
       Rooms.join(data,user,io,client)
    });
    client.on('message',msg=>{
        if(user.roomId){
            // io.to(user.roomId).emit('message',msg)
            if(msg.type == 'update'){
                user.update(msg.body);
            }
            msg.user = user.uid;
            Rooms.send(user.roomId,msg)
        }else{
            io.emit('message',msg)
        }
        console.log(msg)
    })
    client.on('disconnect', () => {
        /\* … \*/
        console.log("连接断开")
        Rooms.leave(user)
    });
});
server.listen(80);

这里传输统一使用JSON格式,消息title也以message为主,这里端口写的80,你可以使用其他端口,如果你是Express,也可以共用80端口。

const socket = io('http://localhost');
log =(...args)=>{
    document.getElementById('log').innerHTML +='<br/>'+args.map(item=>JSON.stringify(item)).join(' ')+'=>'+(+new Date());
} 

log(socket.id)
let user ={},room,client;
socket.on('connect', (c) => {
    log('connect ...', socket.id);
    socket.on('user',u=>{
        user = u;
        log('用户ID',u.uid)
    });
});
socket.on('message',msg=>{
    log('message:',msg)
});
function joinroom(num){
    //加入房间号为1的房间
    socket.emit('join',num);
}
function send(){
    let msg = document.getElementById('msg').value;
    socket.emit('message',{type:'TALK',body:msg})
    // setInterval(function(){
    //     socket.emit('message',{type:'TALK',body:+new Date()})
    // },2000)
}

在用户信息上,为了增加扩展性,添加了update的操作类型进行同步用户信息,这在实际中很有用。

代码很简单,就是两个类的实现,RoomsUser类,这里没有限定房间的数量,可以在初始化的时候先固定房间名和数量。

标签:yyds,socket,user,io,msg,message,log
From: https://blog.51cto.com/u_11365839/6193469

相关文章

  • #yyds干货盘点#详细讲讲WebSocke
    WebSocketWebSocket是HTML5开始提供的一种浏览器与服务器间进行全双工通讯的网络技术。现很多网站为了实现即时通讯,所用的技术都是轮询(polling)。轮询是在特定的的时间间隔(如每1秒),由浏览器对服务器发出HTTP请求,然后由服务器返回最新的数据给客服端的浏览器,这种方式有一个很大的弊......
  • Deeper Insights into Graph Convolutional Networks for Semi-Supervised Learning
    目录概符号说明Laplaciansmoothing代码LiQ.,HanZ.andWuX.Deeperinsightsintographconvolutionalnetworksforsemi-supervisedlearning.AAAI,2018.概本文分析了GCN的实际上就是一种Smoothing,但是如果层数过多就会导致over-smoothing.符号说明\(\mat......
  • KubeSphere 社区双周报 | OpenFunction 支持 Dapr 状态管理 | 2023.03.31-04.13
    KubeSphere社区双周报主要整理展示新增的贡献者名单和证书、新增的讲师证书以及两周内提交过commit的贡献者,并对近期重要的PR进行解析,同时还包含了线上/线下活动和布道推广等一系列社区动态。本次双周报涵盖时间为:2023.03.31-2023.04.13。贡献者名单新晋KubeSphereCon......
  • @RestControllerAdvice注解 @ExceptionHandler注解
    RestControllerAdvice+ExceptionHandler这两个注解的组合,被用作项目的全局异常处理。一旦项目中发生了异常,就会进入使用了RestControllerAdvice注解类中使用了ExceptionHandler注解的方法。下面是一些项目全局异常的处理@ControllerAdvice(annotations={RestController.class,......
  • abc249_f Ignore Operations 题解
    IgnoreOperations题意Takahashi有一个整数\(x\),初始\(x=0\)。有\(n\)次操作。第\(i\)次操作用两个整数\(t_i,y_i\)描述:如果\(t_i=1\),将整数\(x\)替换为\(y_i\)。如果\(t_i=2\),将整数\(x\)替换为\(x+y_i\)。Takahashi可以跳过其中至多\(K\)......
  • Visual Studio Code开发常用的工具栏选项,查看源码技巧以及【vscode常用的快捷键】
    一、开发常用的工具栏选项1、当前打开的文件快速在左侧资源树中定位:其实打开了当前的文件已经有在左侧资源树木定位了,只是颜色比较浅2、打开太多文件的时候,可以关闭3、设置查看当前类或文件的结构OUTLINE相当于idea查看当前类或接口的结构Structure二、查看......
  • docker_1_introduction
    这是我的个人博客,欢迎关注Docker是一个开源的应用容器引擎,基于Go语言,并遵从Apache2.0协议开源。Docker可以让开发者打包他们的应用以及依赖包到一个轻量级、可移植的容器中,然后发布到任何流行的Linux机器上,也可以实现虚拟化。Docker容器是完全使用沙箱机制,相互之间不会有......
  • abc249_d Index Trio 题解
    IndexTrio题意给定长度为\(n\)的整数序列\(a=(a_1,a_2,\dots,a_n)\)。请你求出有多少个整数三元组\((i,j,k)\)满足:\(1\leqslanti,j,k\leqslantN\)\(\frac{a_i}{a_j}=a_k\)数据范围\(1\leqslantn,a_i\leqslant2\times10^5\)思路转变式子:\(......
  • 用 Gaussian Process 建模 state-action 空间相关性,加速 Multi-Fidelity RL
    目录全文快读1intro3背景4method4.1model-based算法:GP-VI-MFRL4.2model-free算法:GPQ-MFRL5experiment6讨论与展望全文快读题目:Multi-fidelityReinforcementLearningWithGaussianProcesses:Model-BasedandModel-FreeAlgorithms链接:https://ieeexplore.iee......
  • Dynamic 导入插件解决方案包,提示: Assembly must be registered in isolation 错误
    错误信息如下:<s:Envelopexmlns:s="http://schemas.xmlsoap.org/soap/envelope/"><s:Body><s:Fault><faultcode>s:Client</faultcode><faultstringxml:lang="zh-CN">Actionfailedforassembly'AccountManage,V......