Socket.io教程: 基於Express的多聊天室(分組)的簡單設計與實現

多聊天室(多個分組)的簡單設計概述

• 相當於實現多個羣聊的功能
• 每個羣之間互相不干擾

後端設計

var express = require('express');
var url = require('url');
var app = express();
var server = require('http').Server(app);
var io = require('socket.io')(server);

app.set('view engine','ejs');
app.use(express.static('public'));

app.get('/',function(req,res){
    res.render('index');
})

server.listen(3000,'127.0.0.1');

io.on('connection', function (socket) {
    // console.log('socket配置成功')

    // 獲取客戶端建立連接的時候傳入的值
    //console.log(socket.request.url);
    var groupid = url.parse(socket.request.url,true).query.groupid; // 獲取分組號
    //console.log(groupid);

    socket.join(groupid);  // 加入分組

    // 監聽客戶端發送的事件
    socket.on('clientMsg',function(data){
        //console.log(data)

        // 廣播給指定分組的用戶 發送消息 兩種方式
        // io.to(groupid).emit('serverMsg','Server Ok'); // 通知分組內的所有用戶 包括自己
        socket.broadcast.to(groupid).emit('serverMsg','Server Ok'); // 通知分組內的用戶不包括自己
    })
});

前端設計

<script src="http://127.0.0.1:3000/socket.io/socket.io.js"></script>

<input type="button" value="發送消息" onclick="sendMsg()">

<script type="text/javascript">
    // 和服務器建立長連接 多個分組傳入不同groupid即可實現不同的分組
    var socket = io.connect('http://127.0.0.1:3000?groupid=1');

    // 接收服務器返回的信息
    socket.on('serverMsg',function(data) {
        console.log(data);
    });

    function sendMsg() {
        socket.emit('clientMsg','clientMsg');
    }
</script>

相關說明

• 不同客戶端建立連接時傳入不同的groupid即可實現分組, 分組內的通信是同步的，分組之間互不干擾
• socket.join(groupid); 加入分組
• io.to(groupid).emit(‘serverMsg’,‘Server Ok’); 通知分組內的所有用戶 包括自己
• socket.broadcast.to(groupid).emit(‘serverMsg’,‘Server Ok’); 通知分組內的用戶不包括自己