1.2.22  html5服务器推送事件

1.2.22.1  html5服务器推送事件介绍

　　服务器推送事件（Server-sent Events）是HTML5规范中的一个组成部分，可以用来从服务器端实时推送数据到浏览器端。

　　传统的服务器端推送数据技术：Websocket：WebSocket规范是HTML5中的一个重要组成部分，已经被很多主流浏览器所支持，也有不少基于WebSocket开发的应用。正如名称所表示的一样，WebSocket使用的是套接字链接，基于TCP协议。使用WebSocket之后，实际上在服务器端和浏览器之间建立起一个套接字连接，可以进行双向的数据传输。WebSocket的功能是很强大的，使用起来灵活，可以适用于不同的场景。不过WebSocket技术也比较复杂，包括服务器端和浏览器端的实现都不同于一般的web应用。

　　HTTP协议：简易轮询，即浏览器端定时向服务器端发出请求，来查询是否有数据更新。这种做法比较简单，可以在一定程度上解决问题。不过对于轮询的时间间隔需要进行仔细考虑。轮询的间隔过长，会导致用户不能及时接收得到更新的数据；轮询的时间过短，会导致查询请求过多，增加服务器的负担。

1.2.22.2  html5服务器推送事件实现

　　服务器代码头：

　　header('Content-Type:text/event-stream');

　　EventSource事件：

　　onopen事件：服务器链接被打开

　　onmessage事件：接受消息

　　onerror：错误发生

代码记录

index.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="index.js"></script>

</head>

<body>

    <h1>Status:</h1>

    <div id="statusDiv"></div>

    <h1>Server Data:</h1>

    <div id="serverData"></div>

    ？？？

</body>

</html>

index.js

var serverData;

var statusDiv;

var SERVER_URL = "index.php";

window.onload = function () {

    statusDiv = document.getElementById("statusDiv");

    serverData = document.getElementById("serverData");

    startlistenServer();

}

function startlistenServer() {

    statusDiv.innerHTML = "start connect Server......";

    var es = new EventSource(SERVER_URL);

    es.addEventListener("newDate",newDateHandler);

    //上面一行用来检测php中echo的内容有没有event:newDate，有的话执行函数newDateHandler；

    //它其实和onmessage函数有相同的功能在这里都是显示date日期的。

    //有用到EventSource的自定义事件的知识

    es.onopen = openHandler;

    es.onerror = errorHandler;

    es.onmessage = messageHandler;

}

function openHandler(e) {

    statusDiv.innerHTML = "Server open";

}

function errorHandler(e){

    statusDiv.innerHTML = "error";

}

function messageHandler(e){

    // serverData.innerHTML = e.data;

//    注释用来测试自定义事件。

//    不注释就是和下面那个函数一个功能，重复功能了。

}

function newDateHandler(e){

    serverData.innerHTML = e.data;

}

index.php

<?php

/**

 * Created by PhpStorm.

 * User: lin

 * Date: 2018/11/24

 * Time: 10:59

 */

/*

 * echo "hello";

echo 'data:'.date("Y-m-d H-i-s");

echo "\n\n";

flush();

*/

header('Content-Type:text/event-stream');

/*不带上面这一行的话打印\n没有反应，不会换行*/

for($i = 0; $i < 100;$i++){

    date_default_timezone_set("Asia/Shanghai");

//    时区设置；

    echo "event:newDate\n";

    echo 'data:'.date('Y-m-d H-i-s');

    echo "\n\n";

    flush();

    sleep(1);

}

web前端学习（二）html学习笔记部分（8）--服务器推送事件3的更多相关文章

  1. [html5] 学习笔记-服务器推送事件

    1.HTML5服务器推送事件介绍 服务器推送事件(Server-sent Events)是Html5规范的一个组成部分,可以用来从服务端实时推送数据到浏览器端. 传统的服务器推送技术----WebSo ...

  2. Nginx 学习笔记（十）介绍HTTP / 2服务器推送（译）

    原文地址:https://www.nginx.com/blog/nginx-1-13-9-http2-server-push/ 我们很高兴地宣布,2018年2月20日发布的NGINX 1.13.9支持 ...

  3. Web前端与移动开发学习路线图

    文章转载自「开发者圆桌」一个关于开发者入门.进阶.踩坑的微信公众号 这里整理的Web前端与移动开发学习路线图包含初中级两个部分,你可以通过百度云盘下载观看对应的视频 链接: http://pan.ba ...

  4. 想做web前端project师应该学习些什么？

    偶然间看到这篇文章.感觉博主写的挺不错的,假设你想做web前端project师的话,建议您阅读下面这篇文章,事实上web前端project师所做的工作事实上就是站点设计,有些小公司的美工事实上就是做w ...

  5. 最全的WEB前端开发程序员学习清单

    史上最全的WEB前端开发程序员学习清单! 今天为什么要给大家分享这篇文章呢,我发现最近来学前端的特别多,群里面整天都有人问:前端好找工作吗?前端要怎么学啊?前端工资怎么样?前端XX,前端XXX,虽然我 ...

  6. 前端通信：SSE设计方案（二）--- 服务器推送技术的实践以及一些应用场景的demo（包括在线及时聊天系统以及线上缓存更新，代码热修复案例）

    距离上一篇博客,这篇文章的发布大概过了整整三个月.我也从饿了么度过了试用期,成为了正式员工.刚进来恰好遇到项目底层改造和迁移,将项目从angular全部迁移到vue上,所以适应这边的节奏和业务的开发任 ...

  7. Web端服务器推送技术原理分析及dwr框架简单的使用

    1 背景 “服务器推送技术”(ServerPushing)是最近Web技术中最热门的一个流行术语.它是继“Ajax”之后又一个倍受追捧的Web技术.“服务器推送技术”最近的流行跟“Ajax ”有着密切 ...

  8. PHP Web实时消息后台服务器推送技术---GoEasy

    越来越多的项目需要用到实时消息的推送与接收,怎样用php实现最方便呢?我这里推荐大家使用GoEasy, 它是一款第三方推送服务平台,使用它的API可以轻松搞定实时推送! 浏览器兼容性:GoEasy推送 ...

  9. Ruby Web实时消息后台服务器推送技术---GoEasy

    越来越多的项目需要用到实时消息的推送与接收,怎样用Ruby实现最方便呢?我这里推荐大家使用GoEasy, 它是一款第三方推送服务平台,使用它的API可以轻松搞定实时推送! 浏览器兼容性:GoEasy推 ...

随机推荐

  1. tty who 命令

    #tty : 查看当前终端对应的终端的设备文件 #who : 查看当前系统登录的所有用户及其信息

  2. day 42 02--CSS的继承性和层叠性

    02--CSS的继承性和层叠性   本节目录 一 继承性 二 层叠性 三 层叠性权重相同处理 一 继承性 css有两大特性:继承性和层叠性 面向对象语言都会存在继承的概念,在面向对象语言中,继承的特点 ...

  3. <每日一题>题目27：插入排序(假)

    ''' 插入排序:假设元素左侧全部有序,找到自己的位置插入 ''' import random import cProfile def insert_sort(nums): for i in rang ...

  4. javascript 解析ajax返回的xml和json格式的数据

    写个例子,以备后用 一.JavaScript 解析返回的xml格式的数据: 1.javascript版本的ajax发送请求 (1).创建XMLHttpRequest对象,这个对象就是ajax请求的核心 ...

  5. 新浪新闻API

    新浪新闻API ustcmio 关注 2017.01.15 20:44* 字数 536 阅读 2479评论 2喜欢 7 新浪新闻的API:1.访问手机新浪网https://sina.cn/?from= ...

  6. Nginx简介与基础配置

    何为Nginx? Nginx ("engine x") 是一个高性能的HTTP和反向代理服务器,也是一个IMAP/POP3/SMTP服务器.最初是为了解决C10k的问题,由Igor ...

  7. Python学习之enumerate

         enumerate还可以接收第二个参数,用于指定索引起始值   2.     注意open返回文件对象,可迭代,而os.open返回的是文件指针,int类型, <wiz_tmp_tag ...

  8. python 3.6 关于python的介绍

    python的官方网站 https://www.python.org/ python 3.6 的官方网站的下载地址 https://www.python.org/downloads/release/p ...

  9. __autoreleasing 修饰符

    将对象赋值给附有__autoreleasing 修饰符的变量等同于ARC 无效时调用对象的autorelease方法.我们通过以下源代码来看一下. @autoreleasepool { id __au ...

  10. 矩阵快速幂2 3*n铺方格

    #include <iostream> #include <cstdlib> #include <cstring> #include <queue> # ...