作者：五月君
转发链接：https://mp.weixin.qq.com/s/TLKkRwftewa0uMvIRlOf5g
前言实现一对一即时聊天应用，重要的一点就是消息能够实时的传递，一种方案就是熟知的使用 Websocket 协议，本文中我们使用 Node.js 中的一个框架 socket.io 来实现。
效果预览先看下，我们实现的最终效果，如下所示：
你也可以在浏览器分别输入以下两个 URL 地址进行体验：
http://120.27.239.212:30010/?sender=赵敏&receiver=聂小倩http://120.27.239.212:30010/?sender=聂小倩&receiver=赵敏技术选型前端：HTML CSS JS 还用到了 Boostrap 来实现我们的页面布局和一些样式渲染。后端：Node.js express Socket.io。前端实现HTML 页面布局聊天页面的 HTML 布局是不复杂的，大体分为 3 层，如下所示：
chat-header：聊天界面头部信息。chat-content：用来显示聊天的整体内容信息，现在看到的仅是一个空的 div 在发出或收到聊天信息之后会去操作 DOM 向聊天体内插入消息内容。chat-bottom：最下面展示了我们聊天窗口的内容输入窗口和发送按钮。<divclass="container"><divclass="chat-headerrow"><spanclass="col-xs-2chat-header-leftglyphiconglyphicon-menu-left"></span><spanclass="col-xs-8chat-header-center"id="chatHeaderCenter"></span><spanclass="col-xs-2chat-header-rightglyphiconglyphicon-option-horizontal"></span></div><divclass="chat-content"id="chatContent"></div><divclass="chat-bottomrow"><spanclass="col-xs-10col-md-11input-text"><inputtype="text"class="form-control"id="inputText"placeholder="请输入要发送的内容..."></span><spanclass="col-xs-2col-md-1span-submit"><inputclass="btnbtn-defaultbtn-primaryinput-submit"id="sendBtn"data-dismiss="alert"type="submit"value="发送"></span></div></div><scriptsrc="/socket.io/socket.io.js"></script><scriptsrc="./js/chat.js"></script>
客户端首先创建一个 socket 对象，io() 的第一个参数是连接服务器的 URL，默认情况下是 window.location。Socket 的客户端和服务端都有两个函数 on()、emit() 这也是核心，通过这两个函数可以轻松的实现客户端与服务端的双向通信。
emit：触发一个事件，第一个参数是事件名称，第二个参数是要发送到另一端的数据，第三个参数是一个回调函数用来确认对方的接收信息，这个可以忽略。on：注册一个事件，用来监听 emit 触发的事件。//js/chat.jsconstsocket=io();socket.on('connect',()=>{socket.emit('online',query.sender);});socket.on('reply_private_chat',replyPrivateMessage);...
在客户端发送消息，则是监听发送按钮的 onclick 事件或回车事件，对消息做一些处理通过 socket.emit 发送到服务端，由服务端转接到另一客户端。
前端部分更多细节代码，这里不再列举，可在 Github 上 Clone 下来自行查看，文末有代码示例地址。
constchatHeaderCenter=document.getElementById('chatHeaderCenter');constinputText=document.getElementById('inputText');constsendBtn=document.getElementById('sendBtn');chatHeaderCenter.innerText=query.receiver;sendBtn.onclick=sendMsg;inputText.onkeydown=sendMsgByEnter;functionsendMsg(){constvalue=inputText.value;if(!value)returnalert('Messageisrequired!');constmessage={sender:query.sender,receiver:query.receiver,text:value};socket.emit('private_chat',message,data=>{renderMessage(data,true);});inputText.value='';}...
使用 Express 搭建我们的后端服务，创建一个 app.js 里面监听 30010 端口，加载我们的客户端页面。
//app.jsconstexpress=require('express');constapp=express();constpath=require('path');constserver=require('http').createServer(app);constPORT=30010;app.use(express.static(path.join(__dirname,'../','public')));server.listen(PORT,()=>console.log(`Serverislisteningon${PORT}`));
上面我们已经搭建了一个简单的 Express 服务，现在引入我们自定义的 io.js。
//app.jsrequire('./io.js')(server);
创建 io.js 在加载 socket.io 时传入 server 对象，这时会拿到一个服务端的 io 对象，同步的注册 connection 事件，如果有新的客户端进来会被触发，connection 回调函数的 socket 是指当前客户端与服务端建立的链接。
还有 online、private_chat、disconnect 这些事件有些是系统提供的，有些是我们自定义的，下文还会在介绍。
const_=require('underscore');constmoment=require('moment');constuserData=require('./users.json');constUSER_STATUS=['ONLINE','OFFLINE'];constusers={};module.exports=server=>{constio=require('socket.io')(server);io.on('connection',socket=>{socket.on('online',...)socket.on('private_chat',...);socket.on('disconnect',...);});}
on('online') 是我们自定义的事件，由客户端上线后触发告诉我们当前客户端的用户信息，保存 socket.id 建立用户与 socket.id 的映射关系，用于后续私聊。这里的 socket.id 每一次客户端断开重链都是会变的。
socket.on('online',username=>{socket.username=username;users[username]={socketId:socket.id,status:USER_STATUS[0]};})
on('private_chat') 也是我们自定义的事件，收到客户端发送的消息后对消息做处理，判断接收方是否在线，如果在线通过 socket.id 找到对应的 socket 向接收方推送消息，如果用户不在线，可以做些离线消息推送处理。这里私聊转发关键的一点是 socket.to().emit()。
socket.on('private_chat',(params,fn)=>{constreceiver=users[params.receiver];params.createTime=moment().format('YYYY-MM-DDHH:mm:ss');constsenderData=_.findWhere(userData,{username:params.sender});params.senderPhoto=(senderData||{}).photo;if(!params.senderPhoto){constsenderLen=params.sender.length;params.senderPhotoNickname=params.sender.substr(senderLen-2)}fn(params);if(receiver&&receiver.status===USER_STATUS[0]){socket.to(users[params.receiver].socketId).emit('reply_private_chat',params);}else{console.log(`${params.receiver}不在线`);//可以在做些离线消息推送处理}});
断开链接时触发，reason 表示客户端或服务端断开链接的原因。在这个事件里我们也会更改断开链接的原因。
socket.on('disconnect',reason=>{if(users[socket.username])users[socket.username].status=USER_STATUS[1];});
我将以上示例打包为了一个 Docker 镜像，感兴趣的可以执行以下命令拉取，自行部署运行。
dockerpulldocker.io/qufei1993/private-chat-socketio
代码示例：
Github: https://github.com/qufei1993/ExamplesDemo 在线体验：
http://120.27.239.212:30010/?sender=赵敏&receiver=聂小倩http://120.27.239.212:30010/?sender=聂小倩&receiver=赵敏总结Socket.io 已经封装的很好了，使用它开发一个即时聊天应用更多工作需要我们去接入自己的业务逻辑，本文也只是一个聊天系统的冰山一角，还有很多需要去做，感兴趣的朋友欢迎关注，后续会持续分享一些其它功能。
推荐JavaScript学习相关文章《JavaScript位运算最强指南 》
《JS正则表达式完整教程（一）「值得收藏」 》
《JS正则表达式完整教程（二）「值得收藏」 》
《用 80 行 Javascript 代码构建自己的语音助手 》
《玩转前端 Video 播放器 》
《纯JavaScript实现HTML5 Canvas 6种特效滤镜 》
《使用reveal.js制作精美的网页版PPT 》
《15个简单的JS编码标准让你的代码更整洁》
《Node 中的全链路式日志标记及处理》
《使用 Node 开发服务器项目时如何高效地打日志？》
《一文带你搞懂前端如何玩转 Word 文档》
《高频面试题：JavaScript事件循环机制解析》
《手写一个Promise/A 完美通过官方872个测试用例》
《你不知道的前端图片处理（上）》
《你不知道的前端图片处理（下）》
《钉钉前端-如何设计前端实时分析及报警系统》
《前端实现最佳截图方案（上）》
《前端实现最佳截图方案（下）》
《Node.js 实现抢票小工具&短信通知提醒（上）「干货」》
《Node.js 实现抢票小工具&短信通知提醒（下）「干货」》
《那些不常见，但却非常实用的JS知识点（上）》
《那些不常见，但却非常实用的JS知识点（下）》
《如何为团队定制自己的 Node.js 框架？》
《细品原生JS从初级到高级知识点汇总（一）》
《细品原生JS从初级到高级知识点汇总（二）》
《细品原生JS从初级到高级知识点汇总（三）》
《细品原生JS从初级到高级知识点汇总（四）》
《学习 jQuery 源码整体架构，打造属于自己的 js 类库》
《细说RTSP实现前端直播流探索记「干货」》
《一文带你搞懂前端登陆设计》
《使用 Node.js 将图片中的苹果变成橘子「实践」》
《基于Canvas实现的高斯模糊（上）「JS篇」》
《基于Canvas实现的高斯模糊（下）「JS篇」》
《由浅入深，66条JavaScript面试知识点（一）》
《由浅入深，66条JavaScript面试知识点（二）》
《由浅入深，66条JavaScript面试知识点（三）》
《由浅入深，66条JavaScript面试知识点（四）》
《由浅入深，66条JavaScript面试知识点（五）》
《由浅入深，66条JavaScript面试知识点（六）》
《由浅入深，66条JavaScript面试知识点（七）》
作者：五月君
转发链接：https://mp.weixin.qq.com/s/TLKkRwftewa0uMvIRlOf5g
