李伙钦
（福建船政交通职业学院信息工程系，福建 福州 350007）
【摘要】随着互联网的飞速发展，网页中实时通讯和消息推送的应用愈加广泛。传统上采用定时轮询或Comet的方式实现实时通讯，但对服务器负担较重。全新的HTML5标准中引入了WebSocket，WebSocket实现了服务器与浏览器间的双向连接，基于事件方式，效率高，服务器负担轻。本文使用Node.js平台和Socket.IO组件设计并实现了WebSocket实时消息推送网页应用。
教育期刊网 http://www.jyqkw.com
关键词 WebSocket; Socket.IO; Node.js
0 引言
随着互联网的高速发展，网页中实时通讯和消息推送的应用愈加广泛，如论坛中消息实时推送、商务网站中的QQ在线客服、淘宝中网页版阿里旺旺、股票实时报价、实时数据监控等，这些应用都需要浏览器与服务器间的双向通讯。但是HTTP设计初衷是一种“请求-响应”的设计，即用户通过浏览器向服务器发出网页请求，浏览器将网页数据发给用户后就断开了与用户连接，请求都是由用户发起的，服务器只是被动的接收请求和反馈数据。这种模式下，用户可以主动发数据给服务器，而服务器只能被动反馈数据，不能主动发数据给用户。要实现实时通讯就需要“破解”这种单向的连接方式。
传统上常用解决办法是采用定时轮询方式和Comet方式，定时轮询是浏览器定时刷新页面，由浏览器主动发出请求，获取服务器上发给该用户的数据，这种方式轮询的时间间隔不好控制，还会造成大量无用请求，浪费服务器资源；而Comet是一种“长连接”设计，通过AJAX向服务器发出请求，服务器端会阻塞请求直到有数据传递或超时才返回，浏览器接收到数据或者超时后立即发出新请求，以此保持浏览器与服务器间的连接，这种方式Comet会长时间占用一个连接，当有大量长连接时会服务器负担加重。WebSocket的到来，解决了定时轮询方式和Comet方式无法根本解决的服务器负担难题。
1 WebScoket
WebSocket是HTML5标准中的一部分，其实现了浏览器与服务器之间的全双工通信。通过WebSocket浏览器与服务器只需要做一次握手动作，浏览器与服务器之间就形成了一条快速通道，两者之间可以进行消息互发了，这与传统的HTTP“请求-响应”模式有很大不同，更像是底层Socket通信的TCP运作模式。
WebSocket有以下优点：
（1）WebSocket与轮询或Comet方式比较，更简单更节省服务器资源。
（2）Comet中AJAX通信受到域的限制，而WebSocket允许跨域通信。
（3）与底层Socket相比，WebScoket的客户端是浏览器，有很强的通用性，也一般不会被防火墙屏蔽。
2 Node.js
Node.js是一个服务器端的JavaScript解释器，基于Google的V8 JavaScript引擎，速度与性能都相当优秀，其最大的特点是事件驱动、异步处理的运作模型，能够并发处理数以万计的网络请求，非常适合大量但数据小的请求。事件驱动是JavaScript的语言特性，通过回调函数来处理事件，这样就可以进行异步运作，避免服务器处理数据造成阻塞等待。此外Node.js还具有非阻塞I/O，单线程的特点，既能提高性能，又减低开发复杂度。
鉴于Node.js优异的性能，社区论坛的开发者们为其开发了很多优秀的扩展库，大大增强扩展了Node.js功能。其中本文要使用到Scoket.IO扩展库，Scoket.IO是一个开源的WebSocket库，Socket.IO提供基于事件的实时双向通讯，支持多种平台、浏览器和移动设备。
3 设计总体思路
基于WebSocket的实时消息推送设计的总体思路是在Linux系统下搭建Node.js服务器，然后安装Socket.IO扩展。然后通过JavaScript创建Web服务，Socket.IO监听Web服务，当有消息到来，就广播给每个在线用户。客户端包括发送者与接收者，发送者只负责发送消息，广播到每个接收者，而接收者只负责接收消息。发送者与接收者都引用Socket.IO提供的js库文件进行收发。
4 服务器端设计
服务器端创建Web服务，端口为8080，Socket.IO监听Web服务，当有消息到来，就广播给每个在线用户。
var fs = require(´fs´) , http = require(´http´) , sio = require(´socket.io´);
//引入fs、http、socket.io库
var server = http.createServer(function(req, res) { //创建Web服务，监听8080端口
res.writeHead(200, { ´Content-type´: ´text/html´});
res.end(fs.readFileSync(__dirname + ´/index.html´));
}).listen(8080);
sio.listen(server).on(´connection´, function (socket) { //socket.io监听Web服务
socket.on(´message´, function (msg) { socket.broadcast.emit(´message´, msg); });
//当有数据到来，调用broadcast.emit广播分发给在线用户
});
5 客户端设计
发送者send.html，只负责接收消息，需要引入jquery库和socket.io库，调用send方法发送。
<script src="jquery.min.js"></script> <script src="/socket.io/socket.io.js"></script>
<script>
$(function(){ var soc = io.connect(); //创建连接
$(´#bb´).click(function() { soc.send($(´#mm´).val()); }); }); //发送消息
</script>
<input type="text" id="mm"><input type=button id="bb" value="发送" />
接收者index.html，只负责接收消息，需要引入jquery库和socket.io库，当有数据到来时就会触发message事件，在其处理函数中就将该消息呈现出来。
<script src="jquery.min.js"></script> <script src="/socket.io/socket.io.js"></script>
<script>
$(function(){
var soc = io.connect(); //创建连接
soc.on(´connect´, function () {$(´#msgs´).append($(´<li>连接成功</li>´)); //连接成功事件
soc.on(´message´, function(message) { $(´#msgs´).append($(´<li></li>´).text(message));
//message数据到来事件，处理函数将内容呈现在列表中
}); });
</script>
<ul id="msgs"></ul>
6 总结
WebSocket为服务器与浏览器双向通讯提供的一个高效便捷的解决方案。基于WebSocket的实时消息推送实践效果良好，速度快，运行稳定，可以作为服务器与浏览器全双工通讯的参考实例。将来随着HTML5的普及和移动互联网快速发展，WebSocket必将被广泛应用。
［责任编辑：杨玉洁］