惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

月光博客
月光博客
Threat Intelligence Blog | Flashpoint
Threat Intelligence Blog | Flashpoint
T
Tor Project blog
V2EX - 技术
V2EX - 技术
S
Security Affairs
Help Net Security
Help Net Security
Webroot Blog
Webroot Blog
N
News and Events Feed by Topic
cs.AI updates on arXiv.org
cs.AI updates on arXiv.org
Blog — PlanetScale
Blog — PlanetScale
S
SegmentFault 最新的问题
T
Threat Research - Cisco Blogs
Scott Helme
Scott Helme
IT之家
IT之家
W
WeLiveSecurity
U
Unit 42
博客园 - 聂微东
Vercel News
Vercel News
爱范儿
爱范儿
GbyAI
GbyAI
H
Hacker News: Front Page
Y
Y Combinator Blog
Hacker News - Newest:
Hacker News - Newest: "LLM"
PCI Perspectives
PCI Perspectives
博客园 - 三生石上(FineUI控件)
博客园_首页
T
Tailwind CSS Blog
有赞技术团队
有赞技术团队
Exploit-DB.com RSS Feed
Exploit-DB.com RSS Feed
Microsoft Security Blog
Microsoft Security Blog
宝玉的分享
宝玉的分享
MyScale Blog
MyScale Blog
A
About on SuperTechFans
Cloudbric
Cloudbric
博客园 - 叶小钗
Recent Commits to openclaw:main
Recent Commits to openclaw:main
T
Troy Hunt's Blog
The GitHub Blog
The GitHub Blog
A
Arctic Wolf
Latest news
Latest news
AWS News Blog
AWS News Blog
MongoDB | Blog
MongoDB | Blog
量子位
Spread Privacy
Spread Privacy
D
DataBreaches.Net
C
CXSECURITY Database RSS Feed - CXSecurity.com
S
Schneier on Security
Recorded Future
Recorded Future
T
Threatpost
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻

博客园 - 莫耶

学习RxJS:Cycle.js 学习RxJS: 导入 [Node.js] Node.js项目的持续集成 [Node.js] 使用node-forge保障Javascript应用的传输安全 [Node.js] 对称加密、公钥加密和RSA [Node.js] DSL in action [Node.js] 使用TypeScript编写Node项目 [Node.js] Node.js中的流 [Node.js] 闭包和高阶函数 [Node.js] Promise,Q及Async [Node.js] Express的测试覆盖率 [Node.js] BDD和Mocha框架 [Node.js] 也说this [Node.js] ECMAScript 6中的生成器及koa小析 [Node.js] 使用File API 异步上传文件 [Node.js] OAuth 2 和 passport框架 [Node.js] Node + Redis 实现分布式Session方案 [Node.js] Cluster,把多核用起来 Python开源框架Scrapy安装及使用
[Node.js] 基于Socket.IO 的私聊
莫耶 · 2015-01-02 · via 博客园 - 莫耶

2015-01-02 21:55  莫耶  阅读(4059)  评论()    收藏  举报

原文地址:http://www.moye.me/2015/01/02/node_socket-io/

引子

Socket.IO Real-Time Web Application Development最近听到这么一个问题:Socket.IO 怎么实现私聊?换个提法:怎么定位到人(端),或者说怎么标识到连接,而不是依赖每个连接的socket.id。好问题。

在 Socket.IO Real-Time Web Application Development 的指引下,形成了如下思路:

  1. 服务端在每个用户初次进入系统时,产生session_id
  2. 服务端强制用户输入昵称,与session_id对应
  3. 服务端的Socket.IO在连接时,可以拿到socket.request.headers.cookie,从这个cookie中解析出session_id,将socket 连接与 Web框架的context中的session_id 对应上
  4. 在服务端使用一个数组来保存如上三者产生的对应关系:[{name, session_id, socket} , ...]
  5. 有了对应关系的数组,就能定位到人并分清 [我] 和 [其他人],也便能够利用保存的socket 进行私聊

有了思路,就可以动手实践了:

Server端

ES6 的生成器太好用,做 Node Web 就从 koa 开始吧。那么,我的 package.json 看起来就会有这些依赖的库:

"co": "^4.0",        
"koa": "^0.14.0", 
"koa-mount": "*",  
"koa-ejs": "*",
"koa-static": "*",
"koa-router": "*",
"koa-session": "*",
"co-body": "*"

用户列表

思路中提到的用户列表,就是一个简单的数组:[{name, session_id, socket} , ...],围绕它的操作也特别简单(socketHandler:

//暴露给Web的接口
module.exports.addUser = addUser; 
module.exports.otherUsers = otherUsers;

var users = [];

function findInUsers(session_id) {//通过session_id查找
    var index = -1;
    for (var j = 0, len = users.length; j < len; j++) {
        if (users[j].session_id === session_id)
            index = j;
    }
    return index;
}
function addUser(name, session_id) {
    var index = findInUsers(session_id);
    if (index === -1) //不存在则重新添加
        users.push({name: name, session_id: session_id, 
            socket: null});
    else { //只更新昵称
        if (users[index].name !== name)
            users[index].name = name;
    }
}
function setUserSocket(session_id, socket){//更新用户socket
    var index = findInUsers(session_id);
    if (index !== -1){
        users[index].socket = socket;
    }
}
function findUser(session_id) {
    var index = findInUsers(session_id);
    return index > -1 ? users[index] : null;
}
function otherUsers(session_id){//其他人
    var results = [];
    for (var j = 0, len = users.length; j < len; j++) {
        if (users[j].session_id !== session_id)
            results.push({session_id: users[j].session_id, 
                name: users[j].name});
    }
    return results;
}

Session存储

koa-session 这个库提供了 session 存储功能,它的使用非常简单:

var koa = require('koa');
var session = require('koa-session');

var app = koa();
app.keys = [config.SECRET];
app.use(session(app));

此外,koa-session会在Web request的cookie中会附上一个 koa:sess的session_id 标识串,那么,在 socket.io 的事件侦听中,我们可以这么用它:

io.on('connection', function (socket) {
    var sessionId = getSessionId(socket.request.headers.cookie, 
        'koa:sess');
    if(sessionId){
         setUserSocket(sessionId, socket);
     }
 });

function getSessionId(cookieString, cookieName) {
    var matches = new RegExp(cookieName + 
         '=([^;]+);', 'gmi').exec(cookieString);
    return matches[1] ? matches[1] : null;
}

用户登录

所谓的登录,就是让用户输入一个昵称,将它与session_id对应上,并存储到前述用户数组中。假设我们的路由路径为 /chat,登录action路径为/chat/login,那么这个路由看起来是这样:

var Router = require('koa-router'),
    router = new Router();
var parse = require('co-body');
var socketHandler = require('../../middlewares/socketHandler');

// GET /chat
router.get('/', function *() {
    var session_id = this.cookies.get('koa:sess');
    var name = this.session.name;
    if(session_id && name) {//添加到用户列表
        socketHandler.addUser(name, session_id);
        yield this.render('../www/views/chat'); //使用ejs
    } else {
        this.redirect('/chat/login');
    }
});

// GET /chat/login 使用ejs模板
router.get('/login', function*(){
    yield this.render('../www/views/login')
});
// POST /chat/login 接收form提交: <input name='name'>
router.post('/login', function*(){
    var body = yield parse(this);
    this.session.name = body.name || 'guest';
    this.redirect('/chat')
});

module.exports = router;

广播和私聊消息处理

io.on('connection', function (socket) {
    socket.on('broadcast', function (data) {
        //广播
        var fromUser = findUser(sessionId);
        if(fromUser) {
            socket.broadcast.emit('broadcast', {
                name: fromUser.name,
                msg: data.msg
            });
        }
    });
    
    socket.on('private', function (data) {
        //私聊 {to_session_id, msg}
        var fromUser = findUser(sessionId);
        if(fromUser) {
            var toUser = findUser(data.to_session_id);
            if (toUser)
                toUser.socket.emit('private', {
                    name: fromUser.name,
                    msg: data.msg
                });
        }
    });
});

客户端

在连接到服务端后,客户端会定时拉取其他人的列表:

//定时获取其他人列表
function updateOthers() {
    $.post('/chat/others', function (others) {
         //...若干丑陋的UI DOM操作代码
         setTimeout(updateOthers, 1000);
    });
}
setTimeout(updateOthers, 1000);

对应的,服务端会有一个这样的接口:

// POST /chat/others 其他人列表
router.post('/others', function*(){
    var session_id = this.cookies.get('koa:sess');
    var name = this.session.name;
    if(session_id && name) {
        this.type = 'application/json';
        this.body = socketHandler.otherUsers(session_id);
    } else {
        this.status = 404;
    }
});

运行效果

在三个不同的浏览器中跑起来,宛如上世纪90年代火得不行的聊天室 :)

Chat Room Demo

源码

完整的源码放在我的Github上:https://github.com/rockdragon/socketchat,想让它跑起来,你需要把 Node 升到 0.11.14(因为用到了 Co V4 ),当然,README.MD里有详细的设置说明。

更多文章请移步我的blog新地址: http://www.moye.me/  

Creative Commons License