抛出问题：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轮询请求服务器的更多相关文章

  1. Ajax轮询请求

    Ajax轮询请求 什么是轮询? 轮询(polling):客户端按规定时间定时向服务端发送ajax请求,服务器接到请求后马上返回响应信息并关闭连接. Ajax轮询需要服务器有很快的处理速度与快速响应. ...

  2. 常规轮询请求，客户端用Ajax调webservice的方法

    服务端发布webservice,下图方框中的一定要有 客户端代码 <script type="text/javascript"> $(document).ready(f ...

  3. 实现Comet(服务器推送)的两种方式：长轮询和http流

    Comet 是一种高级的Ajax技术,实现了服务器向页面实时推送数据的技术,应用场景有体育比赛比分和股票报价等. 实现Comet有两种方式:长轮询与http流 长轮询是短轮询的翻版,短轮询的方式是:页 ...

  4. 利用ajax短轮询+php与服务器交互制作简易即时聊天网站

    主流的Web端即时通讯方案大致有4种:传统Ajax短轮询.Comet技术.WebSocket技术.SSE(Server-sent Events). 本文主要介绍ajax短轮询的简易实现方式. 看懂此文 ...

  5. ajax短轮询+php与服务器交互制作简易即时聊天网站

    主流的Web端即时通讯方案大致有4种:传统Ajax短轮询.Comet技术.WebSocket技术.SSE(Server-sent Events). 本文主要介绍ajax短轮询的简易实现方式. 看懂此文 ...

  6. Comet 反Ajax: jQuery与PHP实现Ajax长轮询

    原文地址(http://justcode.ikeepstudying.com/2016/08/comet-%E5%8F%8Dajax-%E5%9F%BA%E4%BA%8Ejquery%E4%B8%8E ...

  7. polling轮询和comet

    comet:(原意:彗星) Comet is a web application model in which a long-held(held:保留) HTTP request allows a w ...

  8. .Net MVC 实现长轮询

    什么是长轮询? 长轮询是“服务器推”技术实现方式的一种,可以将服务端发生的变化实时传送到客户端而无须客户端频繁的地刷新.发送请求. 长轮询原理? 客户端向服务器发送Ajax请求,服务器接收到请求后,保 ...

  9. 10分钟学会web通讯的四种方式，短轮询、长轮询(comet)、长连接(SSE)、WebSocket

    一般看到标题我们一般会产生下面几个问题??? 什么是短轮询? 什么是长轮询? 长连接又是什么? wensocket怎么实现呢? 他们都能实现web通讯,区别在哪呢,哪个好用呢? 接下来我们就一个个来了 ...

随机推荐

  1. 1.java小作业-计算1到100的整合-指定输入多少行输出就打印多少行-打印24小时60分钟每一分钟-重载基础练习-面向java编程初学者

    可能有和我一样刚开始学习java的小伙伴们, 可以或多或少了解一点别的语言知识,我就是中途转过来的, 明白一点,关键不在语言本身····· 所以面对初学者来说,基础要学好, 下面列举几个没什么难度的小 ...

  2. pandas-08 pd.cut()的功能和作用

    pandas-08 pd.cut()的功能和作用 pd.cut()的作用,有点类似给成绩设定优良中差,比如:0-59分为差,60-70分为中,71-80分为优秀等等,在pandas中,也提供了这样一个 ...

  3. Java 单例类

    单例类:该类只能创建一个实例,或者说内存中只有一个实例,该类的对象引用的都是这个实例. 示例: package my_package; //定义一个单例类 class Singleton{ //使用一 ...

  4. MySQL--使用mysqldump进行数据库版本升级

    在MySQL跨版本升级时,建议使用mysqldump方式导出用户权限和用户数据,即使是小版本升级,导出过程中也应忽略系统数据库,避免系统表不兼容. 导出用户数据库脚本和用户创建脚本 ##======= ...

  5. NT Kernel & System （ntoskrnl）占用80端口

    释放80端口 netstat -ano|findstr "80" 查询占用的进程 , PID =4 发现是system进程 无法直接kill. 1. 关闭iis的默认网站的80端口 ...

  6. ThinkPHP模型中的HAS_ONE,BELONG_TO,HAS_MANY实践

    因为很熟悉DJANGO,所以对TP,要慢慢适应. 1,SQL文件 /* Navicat MySQL Data Transfer Source Server : localhost_3306 Sourc ...

  7. 如果在使用谷歌的gson的时候,在返回时间类型的数据的时候,

    可能会出现在long类型的时间后面多3个0 如下图所示 可以自己创建一个json序列化的类 public class Date2LongSerializer extends JsonSerialize ...

  8. Zookeeper基础入门介绍

    什么Zookeeper Zookeeper是一个分布式开源框架,提供了协调分布式应用的基本服务,它向外部应用暴露一组通用服务——分布式同步(Distributed Synchronization).命 ...

  9. Hive UDF函数构建

    1. 概述 UDF函数其实就是一个简单的函数,执行过程就是在Hive转换成MapReduce程序后,执行java方法,类似于像MapReduce执行过程中加入一个插件,方便扩展.UDF只能实现一进一出 ...

  10. 浏览器-同源政策（same-origin policy）

    浏览器安全的基石是“同源政策”(same-origin policy). 1995年,同源政策由 Netscape 公司引入浏览器.目前,所有浏览器都实行这个政策. 何为同源? 协议相同 域名相同 端 ...