使用socket.io实现多房间通信聊天室
程序员文章站
2022-03-20 16:40:27
websocket的实现有很多种,像ws和socket.io,这里使用的是socket.io来实现多房间的效果。 ......
websocket的实现有很多种,像ws和socket.io,这里使用的是socket.io来实现多房间的效果。
这里的使用没有使用socket.io
官方提供的namespace
和room
,而是完全通过一个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演示
把项目从上clone下来后,执行
npm start
,然后打开example/index.html
即可品尝到演示效果使用方式
服务端server
const {user,rooms} = require('./index') 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端口。
客户端调用client
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
的操作类型进行同步用户信息,这在实际中很有用。
代码很简单,就是两个类的实现, rooms
和user
类,这里没有限定房间的数量,可以在初始化的时候先固定房间名和数量。源码托管于github,地址为: ,如果觉得有用,加颗小星星吧
websocket的实现有很多种,像ws和socket.io,这里使用的是socket.io来实现多房间的效果。
这里的使用没有使用socket.io
官方提供的namespace
和room
,而是完全通过一个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演示
把项目从上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端口。
客户端调用client
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
的操作类型进行同步用户信息,这在实际中很有用。
代码很简单,就是两个类的实现, rooms
和user
类,这里没有限定房间的数量,可以在初始化的时候先固定房间名和数量。源码托管于github,地址为: ,如果觉得有用,加颗小星星吧