websocket的實現有不少種,像ws和socket.io,這裏使用的是socket.io來實現多房間的效果。html
這裏的使用沒有使用socket.io
官方提供的namespace
和room
,而是徹底經過一個namespace
實現的。數據傳輸使用JSON
格式,封裝了消息規範git
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
把項目從github上clone下來後,執行npm start
,而後打開example/index.html
便可品嚐到演示效果github
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端口。web
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
的操做類型進行同步用戶信息,這在實際中頗有用。npm
代碼很簡單,就是兩個類的實現,Rooms
和User
類,這裏沒有限定房間的數量,能夠在初始化的時候先固定房間名和數量。源碼託管於github,地址爲:https://github.com/tianxiangbing/rooms ,若是以爲有用,加顆小星星吧websocket