在Html5中存在着这样的一个新特性，引入了websocket，关于websocket的内部实现原理可以看这篇文章，这篇文章讲述了websocket无到有，根据协议，分析数据帧的头，进行构建websocket。虽然代码短，但可以很好地体现websocket的原理。
，这个特性提供了浏览器端和服务器端的基于TCP连接的双向通道。但是并不是所有的浏览器都支持websocket特性，故为了磨平浏览器间的差异，为开发者提供统一的接口，引入了socket.io模块。在不支持websoket的浏览器中，socket.io可以降级为其他的通信方式，比如有AJAX long polling ，JSONP Polling等。
模块安装
新建一个package.json文件，在文件中写入如下内容：
{ "name": "socketiochatroom", "version": "0.0.1", "dependencies": { "socket.io": "*", "express":"*" } }
npm install
执行完这句，node将会从npm处下载socket.io和express模块。
-
服务器端的实现
在文件夹中添加index.js文件，并在文件中写入如下内容：
/** * Created by bamboo on 2016/3/31. */ var app = require('express')(); var http = require('http').Server(app); var io = require('socket.io')(http); app.get('https://www.jb51.net/', function (req, res) { "use strict"; res.end("<h1>socket server</h1>") }); /*在线人员*/ var onLineUsers = {}; /* 在线人数*/ var onLineCounts = 0; /*io监听到存在链接，此时回调一个socket进行socket监听*/ io.on('connection', function (socket) { console.log('a user connected'); /*监听新用户加入*/ socket.on('login', function (user) { "use strict"; //暂存socket.name 为user.userId;在用户退出时候将会用到 socket.name = user.userId; /*不存在则加入 */ if (!onLineUsers.hasOwnProperty(user.userId)) { //不存在则加入 onLineUsers[user.userId] = user.userName; onLineCounts++; } /*一个用户新加入，向所有客户端监听login的socket的实例发送响应，响应内容为一个对象*/ io.emit('login', {onLineUsers: onLineUsers, onLineCounts: onLineCounts, user: user}); console.log(user.userName, "加入了聊天室");//在服务器控制台中打印么么么用户加入到了聊天室 }); /*监听用户退出聊天室*/ socket.on('disconnect', function () { "use strict"; if (onLineUsers.hasOwnProperty(socket.name)) { var user = {userId: socket.name, userName: onLineUsers[socket.name]}; delete onLineUsers[socket.name]; onLineCounts--; /*向所有客户端广播该用户退出群聊*/ io.emit('logout', {onLineUsers: onLineUsers, onLineCounts: onLineCounts, user: user}); console.log(user.userName, "退出群聊"); } }) /*监听到用户发送了消息，就使用io广播信息，信息被所有客户端接收并显示。注意，如果客户端自己发送的也会接收到这个消息，故在客户端应当存在这的判断，是否收到的消息是自己发送的，故在emit时，应该将用户的id和信息封装成一个对象进行广播*/ socket.on('message', function (obj) { "use strict"; /*监听到有用户发消息，将该消息广播给所有客户端*/ io.emit('message', obj); console.log(obj.userName, "说了:", obj.content); }); }); /*监听3000*/ http.listen(3000, function () { "use strict"; console.log('listening 3000'); });
运行服务器端程序
node index.js
输出
listening 3000
此时在浏览器中打开localhost:3000会得到这样的结果：
原因是在代码中只对路由进行了如下设置
app.get('https://www.jb51.net/', function (req, res) { "use strict"; res.end("<h1>socket server</h1>") });
服务器端主要是提供socketio服务，并没有设置路由。
客户端的实现
在客户端建立如下的目录和文件，其中json3.min.js可以从网上下载到。
client
- - - client.js
- - - index.html
- - - json3.min.js
- - - style.css
在index.html中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta content="telephone=no"/> <meta content="email=no"/> <title>1301群聊</title> <link type="text/css" href="https://www.jb51.net/article/style.css"/> <script src="https://realtime.plhwin.com:3000/socket.io/socket.io.js"></script> <script src="https://www.jb51.net/article/json3.min.js"></script> </head> <body> <div> <div> 输入你在群聊中的昵称 <br/> <br/> <input type="text" placeholder="请输入用户名"/> <input type="button" value="提交"/> </div> </div> <div> <div> <div> <span>1301群聊</span> <span><span></span>| <a href="javascript:;">退出</a></span> </div> </div> <div> <div> <div> <div> </div> </div> <div> <div> <input type="text" maxlength="140" placeholder="输入聊天内容 " > </div> <div> <button type="button">提交</button> </div> </div> </div> </div> </div> <script type="text/javascript" src="https://www.jb51.net/article/client.js"></script> </body> </html>
在client.js中