HTML5+NodeJs实现WebSocket实现循环推送
最近在做图表展示方面需要实现循环推送效果,那么webSocket无疑是比较好的选择了,WebSocket相较于HTTP来说,有很多的优点,主要表现在WebSocket只建立一个TCP连接,可以主动推送数据到客户端,而且还有更轻量级的协议头,减少数据传送量。所以WebSocket暂时来说是循环推送的最佳协议了。
至于服务器语言选择nodeJs,一是因为自己是做前端的,对javascript比较熟悉,相比于其他后台语言,自然会更喜欢nodeJs了,二是NodeJs本身事件驱动的方式很擅长与大量客户端保持高并发的连接。所以就选择NodeJs了。
服务器的实现很简单,先装一个nodeJs的模块,叫nodejs-websocket , 直接在nodeJs命令行中敲入:npm install nodejs-websocket回车就可以安装好了,然后就可以开始建立服务器了,因为有了nodejs-websocket模块,所以很多工作都不用我们自己做,直接调用别人封装好的方法就行了:
首先,服务端app.js代码如下:
var ws = require("nodejs-websocket");
console.log("开始建立连接...")
var index = null , indexReady = false;
var server = ws.createServer(function(conn){
conn.on("text", function (str) {
console.log("收到的信息为:"+str)
if(str==="index"){
index = conn;
}
sendMess();
function sendMess(){
if(index&&index.readyState===1){
index.sendText(new Date + "");
setTimeout(sendMess,1000);
}
}
})
conn.on("close", function (code, reason) {
console.log("关闭连接")
});
conn.on("error", function (code, reason) {
console.log("异常关闭")
});
}).listen(8000)
console.log("WebSocket建立完毕")
其中,sendMess函数 很明显就是实现定时循环,这里推送的是本地时间。
然后就是获取推送来的消息进行展示,代码如下:
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.kuang{text-align: center;margin-top:200px;}
#mess{text-align: center}
</style>
</head>
<body>
<div id="mess"></div>
<script>
var mess = document.getElementById("mess");
if(window.WebSocket){
var ws = new WebSocket('ws://localhost:8000');
ws.onopen = function(e){
console.log("连接服务器成功");
ws.send("index");
}
ws.onclose = function(e){
console.log("服务器关闭");
}
ws.onerror = function(){
console.log("连接出错");
}
ws.onmessage = function(e){
var time = new Date();
mess.innerHTML+=time+"的消息:"+e.data+"<br>"
}
}
</script>
</body>
</html>
最后启动node服务器,完成连接。
代码非常简单:很容易看懂,nodejs-WebSocket的调用也非常简洁明了,具体nodejs-websocket的API可以看https://www.npmjs.org/package/nodejs-websocket,里面都有介绍,自己测试一下,就很容易了