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

本文轉載自查看原文 2019-10-15 11:27 933 node.js/ rooms/ socket.io/ websocket/ js開源組件開發

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演示

把項目從 github上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，地址為：github.com/tianxiangbi… ,如果覺得有用，加顆小星星吧