标签：
抛出问题：web浏览器如何与服务保持通信？
方法一：Ajax轮询
方法二：EventSource轮询
方法三：websocket保持长连接
下面的解决方案是，Ajax轮询与EventSource轮询的合体。
客户端代码：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script src="jquery.min.js"></script> <script src="PollSource.js"></script> </head> <body> <h1>Server Data:</h1> <div id="serverData"></div> <a href="javascript:Poll.open(1000);">open poll</a> <a href="javascript:Poll.close();">close poll</a> <script type="text/javascript"> var serverData,Poll; var SERVER_URL = "index.php"; window.onload = function(){ serverData = document.getElementById("serverData"); Poll = new PollSource(SERVER_URL); Poll.onmessage = function(data) { //console.log(data); json = JSON.parse(data); serverData.innerHTML = json.data; } } </script> </body> </html>
PollSource.js代码：
/** * PollSource javascript轮询服务器 * @param string url 服务器地址 例：www.example.com/index.php * @param json jsonParam 传递给服务器的参数 * @author Echo */ function PollSource(url,jsonParam) { this.url = url; this.onmessage = null; this.resource = null; this.PollType = typeof(EventSource)==‘undefined‘ ? ‘AjaxGet‘ : ‘EventSource‘; //将轮询类型传递给服务器，以便服务器作出响应 if(typeof jsonParam == ‘object‘) { jsonParam[‘PollType‘] = this.PollType; }else{ jsonParam = {PollType:this.PollType}; } this.url += ‘?‘; for(var i in jsonParam) { this.url += i+‘=‘+jsonParam[i]+‘&‘; } this.url = this.url.substring(0,(this.url.length-1)); /** * 开始轮询 * @param number spend AjaxGet 的速度 单位是毫秒 */ this.open = function(spend) { var onmessage = this.onmessage; var url = this.url; if(typeof spend == ‘undefined‘) spend = 5000; if(this.PollType == ‘AjaxGet‘) { //采用轮询 this.resource = {}; this.resource.lockInt = setInterval(function(){ try{ $.get(url,{},function(json){ if(typeof onmessage == ‘function‘) onmessage(json); }); }catch(e){ alert(e.message); } },spend); this.resource.close = function() { if(typeof this.lockInt == ‘number‘) { clearInterval(this.lockInt); } } }else{ //采用服务器发送事件技术 this.resource = new EventSource(this.url); this.resource.onmessage = function(e) { if(typeof onmessage == ‘function‘) onmessage(e.data); } this.resource.onerror = function(e) { if(this.readyState == 2) alert(‘连接没有被建立,或者已经关闭,或者发生了某个致命错误‘); } } } /** * 关闭轮询 */ this.close = function() { if(this.resource) this.resource.close(); } }
服务端代码：
<?php header("Content-type: text/html; charset=utf-8"); date_default_timezone_set("Asia/Shanghai"); $result = array(‘code‘=>0,‘msg‘=>‘拉取成功‘,‘data‘=>‘当前时间是：‘.date(‘Y-m-d H:i:s‘)); $result = json_encode($result); $PollType = isset($_GET[‘PollType‘]) ? trim($_GET[‘PollType‘]) : ‘‘; if($PollType == ‘AjaxGet‘) { //header(‘Content-Type:application/json; charset=utf-8‘); echo $result; }else if($PollType == ‘EventSource‘) { header(‘Content-Type: text/event-stream‘); echo ‘data:‘.$result."\n\n"; echo ‘retry:1000‘."\n\n"; //告诉客户端，按 1 秒一次发起请求 flush(); }else{ die(‘error‘); }
测试效果：
代码下载：百度网盘
参考资源：
https://developer.mozilla.org/zh-CN/docs/Server-sent_events/EventSource
https://developer.mozilla.org/zh-CN/docs/Server-sent_events/Using_server-sent_events#Event_stream_format
标签：
原文地址：http://www.cnblogs.com/buexplain/p/5003104.html
