基于WebSoeket的实时消息推送的设计与实现.doc

基于WebSoeket的实时消息推送的设计与实现-设计论文基于WebSoeket的实时消息推送的设计与实现 李伙钦 （福建船政交通职业学院信息工程系，福建 福州 350007） 【摘要】随着互联网的飞速发展，网页中实时通讯和消息推送的应用愈加广泛。传统上采用定时轮询或Comet的方式实现实时通讯，但对服务器负担较重。全新的HTML5标准中引入了WebSocket，WebSocket实现了服务器与浏览器间的双向连接，基于事件方式，效率高，服务器负担轻。本文使用Node.js平台和Socket.IO组件设计并实现了WebSocket实时消息推送网页应用。 关键词WebSocket; Socket.IO; Node.js 0引言 随着互联网的高速发展，网页中实时通讯和消息推送的应用愈加广泛，如论坛中消息实时推送、商务网站中的QQ在线客服、淘宝中网页版阿里旺旺、股票实时报价、实时数据监控等，这些应用都需要浏览器与服务器间的双向通讯。但是HTTP设计初衷是一种“请求-响应”的设计，即用户通过浏览器向服务器发出网页请求，浏览器将网页数据发给用户后就断开了与用户连接，请求都是由用户发起的，服务器只是被动的接收请求和反馈数据。这种模式下，用户可以主动发数据给服务器，而服务器只能被动反馈数据，不能主动发数据给用户。要实现实时通讯就需要“破解”这种单向的连接方式。 传统上常用解决办法是采用定时轮询方式和Comet方式，定时轮询是浏览器定时刷新页面，由浏览器主动发出请求，获取服务器上发给该用户的数据，这种方式轮询的时间间隔不好控制，还会造成大量无用请求，浪费服务器资源；而Comet是一种“长连接”设计，通过AJAX向服务器发出请求，服务器端会阻塞请求直到有数据传递或超时才返回，浏览器接收到数据或者超时后立即发出新请求，以此保持浏览器与服务器间的连接，这种方式Comet会长时间占用一个连接，当有大量长连接时会服务器负担加重。WebSocket的到来，解决了定时轮询方式和Comet方式无法根本解决的服务器负担难题。 1WebScoket WebSocket是HTML5标准中的一部分，其实现了浏览器与服务器之间的全双工通信。通过WebSocket浏览器与服务器只需要做一次握手动作，浏览器与服务器之间就形成了一条快速通道，两者之间可以进行消息互发了，这与传统的HTTP“请求-响应”模式有很大不同，更像是底层Socket通信的TCP运作模式。 WebSocket有以下优点： （1）WebSocket与轮询或Comet方式比较，更简单更节省服务器资源。 （2）Comet中AJAX通信受到域的限制，而WebSocket允许跨域通信。 （3）与底层Socket相比，WebScoket的客户端是浏览器，有很强的通用性，也一般不会被防火墙屏蔽。 2Node.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(acute;fsacute;) , http = require(acute;httpacute;) , sio = require(acute;socket.ioacute;); /引入fs、http、socket.io库 var server = http.createServer(function(req, res) /创建Web服务，监听8080端口 res.writeHead(200, acute;Content-typeacute;: acute;text/htmlacute;); res.end(fs.readFileSync(_dirname + acute;/index.htmlacute;); ).listen(8080); sio.listen(server).on(acute;connectionacute;, function (socket) /socket.io监听Web服务 socket.on(acute;messageacute;, function (msg) socket.broadcast.emit(acute;messageacute;, 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(); /创建连接 $(acute;#bbacute;).click(function() soc.send($(acute;#mmacute;).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(acute;connectacute;, function () $(acute;#msgsacute;).append($(acute;li连接成功/liacute;); /连接成功事件 soc.on(acute;messageacute;, function(message) $(acute;#msgsacute;).append($(acute;li/liacute;).text(message); /message数据到来事件，处理函数将内容呈现在列表中 ); ); /s