使用socket.io實現多房間通訊聊天室

websocket的實現有不少種,像ws和socket.io,這裏使用的是socket.io來實現多房間的效果。html

這裏的使用沒有使用socket.io官方提供的namespaceroom,而是徹底經過一個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

demo演示

把項目從github上clone下來後,執行npm start,而後打開example/index.html便可品嚐到演示效果github

使用方式

服務端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端口。web

客戶端調用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的操做類型進行同步用戶信息,這在實際中頗有用。npm

代碼很簡單,就是兩個類的實現,RoomsUser類,這裏沒有限定房間的數量,能夠在初始化的時候先固定房間名和數量。源碼託管於github,地址爲:https://github.com/tianxiangbing/rooms ,若是以爲有用,加顆小星星吧websocket

相關文章
相關標籤/搜索