javascript轮询请求服务器
抛出问题：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(json) {
//console.log(json);
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));
/**
* 开始轮询
*/
this.open = function() {
var onmessage = this.onmessage;
var url = this.url;
var msg = '连接没有被建立,或者已经关闭,或者发生了某个致命错误'; //错误时不友好提示 :)
if(this.PollType == 'AjaxGet') {
//采用轮询
this.resource = {};
url += '&Seconds=';
var hangUp = false; //是否挂起
var retry = spend = 3000; //最快轮询速度 3 秒一次
this.resource.lockInt = setInterval(function(){
retry -= spend;
//alert(retry);
if(retry > 0 || hangUp) return;
hangUp = true; //挂起
$.get(url+(new Date()).getSeconds(),{},function(data){
try{
var json = JSON.parse(data);
retry = json.retry;
hangUp = false; //取消挂起
if(typeof onmessage == 'function') onmessage(json);
}catch(e){console.log(e);alert(msg);}
});
},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) {
try{
var json = JSON.parse(e.data);
if(typeof onmessage == 'function') onmessage(json);
}catch(e){
console.log(e);alert(msg);
}
}
this.resource.onerror = function(e) {
if(this.readyState == 2) alert(msg);
}
}
}
/**
* 关闭轮询
*/
this.close = function() {
if(this.resource) this.resource.close();
}
}
服务端代码：
<?php
header("Content-type: text/html; charset=utf-8");
date_default_timezone_set("Asia/Shanghai");
$retry = 9000; //AjaxGet 轮询 最快是 3000 所以这里设置的值最好是 3 的倍数 如果不是三的倍数 那么时间误差在1~2秒内
$result = array('code'=>0,'msg'=>'拉取成功','retry'=>$retry,'data'=>'当前时间是：'.date('Y-m-d H:i:s'));
$result = json_encode($result);
$PollType = isset($_GET['PollType']) ? trim($_GET['PollType']) : '';
sleep(3); //延迟 3秒 返回数据 重试时间 9秒 刚好是 客户端12秒一次刷新数据
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:'.$retry."\n\n"; //EventSource轮询速度 虽然可以设定为 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
javascript轮询请求服务器的更多相关文章
- Ajax轮询请求
Ajax轮询请求 什么是轮询? 轮询(polling):客户端按规定时间定时向服务端发送ajax请求,服务器接到请求后马上返回响应信息并关闭连接. Ajax轮询需要服务器有很快的处理速度与快速响应. ...
- 常规轮询请求，客户端用Ajax调webservice的方法
服务端发布webservice,下图方框中的一定要有 客户端代码 <script type="text/javascript"> $(document).ready(f ...
- 实现Comet(服务器推送)的两种方式：长轮询和http流
Comet 是一种高级的Ajax技术,实现了服务器向页面实时推送数据的技术,应用场景有体育比赛比分和股票报价等. 实现Comet有两种方式:长轮询与http流 长轮询是短轮询的翻版,短轮询的方式是:页 ...
- 利用ajax短轮询+php与服务器交互制作简易即时聊天网站
主流的Web端即时通讯方案大致有4种:传统Ajax短轮询.Comet技术.WebSocket技术.SSE(Server-sent Events). 本文主要介绍ajax短轮询的简易实现方式. 看懂此文 ...
- ajax短轮询+php与服务器交互制作简易即时聊天网站
主流的Web端即时通讯方案大致有4种:传统Ajax短轮询.Comet技术.WebSocket技术.SSE(Server-sent Events). 本文主要介绍ajax短轮询的简易实现方式. 看懂此文 ...
- Comet 反Ajax: jQuery与PHP实现Ajax长轮询
原文地址(http://justcode.ikeepstudying.com/2016/08/comet-%E5%8F%8Dajax-%E5%9F%BA%E4%BA%8Ejquery%E4%B8%8E ...
- polling轮询和comet
comet:(原意:彗星) Comet is a web application model in which a long-held(held:保留) HTTP request allows a w ...
- .Net MVC 实现长轮询
什么是长轮询? 长轮询是“服务器推”技术实现方式的一种,可以将服务端发生的变化实时传送到客户端而无须客户端频繁的地刷新.发送请求. 长轮询原理? 客户端向服务器发送Ajax请求,服务器接收到请求后,保 ...
- 10分钟学会web通讯的四种方式，短轮询、长轮询(comet)、长连接(SSE)、WebSocket
一般看到标题我们一般会产生下面几个问题??? 什么是短轮询? 什么是长轮询? 长连接又是什么? wensocket怎么实现呢? 他们都能实现web通讯,区别在哪呢,哪个好用呢? 接下来我们就一个个来了 ...
随机推荐
- 【开发工具】-解决Myeclipse 的 Server窗口报空指针错误
Eclipse 或者 MyEclipse 查看 server面板的时候,报错,如图所示,错误 代码:java.lang.NullPointerException .另外,由于此错误,导致 项目不能够 ...
- JavaWeb 之 三层架构：软件设计架构
界面层(表示层):用户看的得界面.用户可以通过界面上的组件和服务器进行交互. 业务逻辑层:处理业务逻辑的. 数据访问层:操作数据存储文件.
- 如何选择优秀的APS系统供应商？问自己这几个问题！
高级的计划和排程和生产排程软件的好处是巨大的.然而,生产排程软件不是商品,尚不能保证您选择的任何高级的计划和排程软件能满足您的所有需求. 那么,我们来谈谈如何选择适合你的公司最好的生产排程软件.这需要 ...
- Hive性能优化【严格模式、join优化、Map-Side聚合、JVM重用】
一.严格模式 通过设置以下参数开启严格模式: >set hive.mapred.mode=strict;[默认为nonstrict非严格模式] 查询限制: 1.对于分区表,必须添加where查询 ...
- Hive架构分析
一.Hive三种设计模式 1.默认配置[使用Netty存储元数据] 2.mysql[使用mysql存储元数据] 3.配置Thrift[使用mysql存储元数据] 二.执行步骤 三.scala访问Hiv ...
- JavaScript: 自动类型转换-续
在上一篇文章中,我们详细讲解了JavaScript中的自动类型转换,由于篇幅限制,没能覆盖到所有的转换规则,这次准备详细讲解一下. 上次我们提到了对象类型参与运算时转换规则: 1). 在逻辑环境中执行 ...
- tar.bz2解压异常
问题描述: [root@mvp-dd ~]# tar jxf ffmpeg-.tar.bz2 tar (child): bzip2: Cannot exec: No such file or dire ...
- Thinkphp 配置不用输入index.php
版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/u011186019/article/det ...
- 如何寻找sql注入漏洞？
1.sql注入是怎么产生的 2.如何寻找sql注入漏洞 在地址栏输入单双引号造成sql执行异常(get) post请求,在标题后输入单引号,造成sql执行异常.
- header中Content-Disposition的作用与使用方法
下载文件的时候会使用: Content-disposition 是 MIME 协议的扩展,MIME 协议指示 MIME 用户代理如何显示附加的文件.Content-disposition其实可以控制用 ...