我们使用ajax与后台服务进行交互,常常是通过触发事件来单次交互,但对于有些web应用来说,需要前台与后台保持长连接,前端不定时地接收后台推送的数据信息,
例如:股票行情分析、聊天室和网页在线游戏等。
怎么做到呢?
最笨的方法: 前端需要隔一段时间向服务器发送一次ajax,请求成本太昂贵呀,就好比,你每次约炮,都得开房,还是租一个便宜点儿房子合算。
所以不能这么做。
1.comet
原理:comet是基于HTTP长连接的服务器推送技术,是一种web应用架构,服务器会主动以异步的方式向客户端程序推送数据,而不需要客户端显示的发出请求,
当前端与服务器连接完一次后,保持长链接,让服务器来做推送,服务器利用缓存技术来实现
comet非常适合事件驱动的web应用,以及对交互性与实时要求很强的应用。
前端js代码
var xhr = (function(){ if(typeof XMLHttpRequest != undefined){ return new XMLHttpRequest }else{ return new ActiveXObject("Microsoft.XMLHttp") } })(); xhr.open("GET", url, true); xhr.send(data); xhr.onreadystatechange = function(){ if(xhr.readyState == 3){ if(xhr.status == 200){ xhr.responseText; } } };
后台代码(这里用PHP实现)
<?php //设置响应输出头 header("Content-Type:application/json;charset=UTF-8"); header("Cache-Control:max-age=0");//去除缓存 $i= 0; while($i<9){ $i++; $res = ["success"=>"ok","text"=>i] ;//结果 echo json_encode($res); //刷新页面流,不缓存 ob_flush(); flush();结束流 } ?>
2.websocket
没有Network请求,节省资源
前端:
var socket,state=-1; function connect(){ console.log("Connection Begin:"); if(socket == null || socket.readyState != 1){ socket = new WebSocket(host); } socket.onerror = function(){ console.log("Connection error!") } socket.onopen = function(e){ console.log("Connection isavaliable!"); } socket.onmessage = function(e){ console.log("Receive ServerMessage Beign:"); document.querySelector("#txtarea").innerHTML = e.data; console.log("Receive ServerMessage End!"); } socket.onclose = function(e){ console.log("Connection closed!"); document.querySelector("#txtarea").innerHTML += "/n" + event.wasClean + ";" + event.code + ";" + event.reason; } } function send(){ if(socket.readyState == 1){ console.log("Send Message Begin:"); var text = document.querySelector("#text").value; var message = { time : new Date(), clientId : "049"; }; if(text=="" || message == null){ console.log("No date to send!"); return; } socket.send(JSON.stringify(message)); socket.send(text); console.log("Send Message End!"); }else{ console.log("Connection not aviliable,please create connection!"); } } /** * Web Socket 任何时候都可以关闭,没有什么限制 * 可以根据需求进行控制 */ function disconnect(){ console.log("Close Connection Begin:"); socket.close(); }
后端:需要使用node,个人不懂node,只是看了一点点,如果写错了,请见谅! 去他地把,管她好不好看呢,自己约的炮,含着泪也得打完
var sys = require(‘sys‘); var ws = require(‘websocket‘); var server = ws.createServer(); server.addEventListener(‘connection‘,function(conn){//当客户端接入时 conn.send(‘hi,‘+conn.id);//向客户端发送消息 conn.addEventListener(‘message‘,function(msg){//当收到客户端发来的消息时 console.log(‘Recieved message :‘ + msg); var i=0; while(i<9){ i++; server.broadcast(i);//向所有客户端广播消息 conn.send(i); } }); }); server.addEventListener(‘close‘,function(conn){ server.broadcast(‘Disconnected: ‘ + conn.id); }); server.listen(8000); console.log(‘Hello,Server is Running:8000‘);
3.SSE方式
SSE: Server - Send Event 浏览器新API
不需要ajax,可以实现实时动态刷新数据
var source = new EventSource(url); function init(){ source.onopen = function(){ console.log(‘connect:‘ + this.readyState); } source.onmessage = function(e){ console.log(‘Recieve:‘ + e.data); } source.onerror = function(e){ console.log(‘error‘); } } init();
后台:还是php,请叫我P哥
<?php //设置响应输出头 header("Content-Type:text/event-stream;charset=UTF-8"); header("Access -Control-Aollow-Origin:http:/IP/"); echo "data:现在是北京时间:".date(‘H:i:s‘)."<br/>" ?>
随着H5的发展,个人相信,这种数据推送技术会得到更广的应用
时间: 2024-10-13 20:00:44