web前端学习（二）html学习笔记部分（8）--服务器推送事件3
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的更多相关文章
- [html5] 学习笔记-服务器推送事件
1.HTML5服务器推送事件介绍 服务器推送事件(Server-sent Events)是Html5规范的一个组成部分,可以用来从服务端实时推送数据到浏览器端. 传统的服务器推送技术----WebSo ...
- Nginx 学习笔记（十）介绍HTTP / 2服务器推送（译）
原文地址:https://www.nginx.com/blog/nginx-1-13-9-http2-server-push/ 我们很高兴地宣布,2018年2月20日发布的NGINX 1.13.9支持 ...
- Web前端与移动开发学习路线图
文章转载自「开发者圆桌」一个关于开发者入门.进阶.踩坑的微信公众号 这里整理的Web前端与移动开发学习路线图包含初中级两个部分,你可以通过百度云盘下载观看对应的视频 链接: http://pan.ba ...
- 想做web前端project师应该学习些什么？
偶然间看到这篇文章.感觉博主写的挺不错的,假设你想做web前端project师的话,建议您阅读下面这篇文章,事实上web前端project师所做的工作事实上就是站点设计,有些小公司的美工事实上就是做w ...
- 最全的WEB前端开发程序员学习清单
史上最全的WEB前端开发程序员学习清单! 今天为什么要给大家分享这篇文章呢,我发现最近来学前端的特别多,群里面整天都有人问:前端好找工作吗?前端要怎么学啊?前端工资怎么样?前端XX,前端XXX,虽然我 ...
- 前端通信：SSE设计方案（二）--- 服务器推送技术的实践以及一些应用场景的demo（包括在线及时聊天系统以及线上缓存更新，代码热修复案例）
距离上一篇博客,这篇文章的发布大概过了整整三个月.我也从饿了么度过了试用期,成为了正式员工.刚进来恰好遇到项目底层改造和迁移,将项目从angular全部迁移到vue上,所以适应这边的节奏和业务的开发任 ...
- Web端服务器推送技术原理分析及dwr框架简单的使用
1 背景 “服务器推送技术”(ServerPushing)是最近Web技术中最热门的一个流行术语.它是继“Ajax”之后又一个倍受追捧的Web技术.“服务器推送技术”最近的流行跟“Ajax ”有着密切 ...
- PHP Web实时消息后台服务器推送技术---GoEasy
越来越多的项目需要用到实时消息的推送与接收,怎样用php实现最方便呢?我这里推荐大家使用GoEasy, 它是一款第三方推送服务平台,使用它的API可以轻松搞定实时推送! 浏览器兼容性:GoEasy推送 ...
- Ruby Web实时消息后台服务器推送技术---GoEasy
越来越多的项目需要用到实时消息的推送与接收,怎样用Ruby实现最方便呢?我这里推荐大家使用GoEasy, 它是一款第三方推送服务平台,使用它的API可以轻松搞定实时推送! 浏览器兼容性:GoEasy推 ...
随机推荐
- wps中，怎么快速查看xls中隐藏的图片
步骤: 页面布局->选择窗格 即可在右方看到"文档中的对象“
- Error: Could not link: /usr/local/share/doc/homebrew
mac 执行brew update 报错 Error: Could not link: /usr/local/share/doc/homebrew 更新brew,报错 Error: Could not ...
- Leetcode300. Longest Increasing Subsequence最长上升子序列
给定一个无序的整数数组,找到其中最长上升子序列的长度. 示例: 输入: [10,9,2,5,3,7,101,18] 输出: 4 解释: 最长的上升子序列是 [2,3,7,101],它的长度是 4. 说 ...
- Drupal创建Omega 4.x 子主题layout笔记
Adding a new region to your Omega 4.0 subtheme (Drupal) Drupal: Creating a custom layout with Omega ...
- NOIP2017普及组初赛总结
去年,我普及组复赛翻车,居然没进一等奖,于是,今年,我只能再做一次普及组. 这次初赛我93.5分,居然是中山市第一--(中山市太弱了?) 其实我觉得我没考好. 比赛时第二题(计算机存储数据的基本单位是 ...
- IT外包概要
IT外包 前两天和朋友聊起这个外包的问题,就顺便给他说了一下,自己也整理了一下,发出来,方便更多的人. 如果有说的不准确的地方欢迎大家补充分享. 大致分两种: 项目外包, 人力外包. 简而言之:项目外 ...
- iPhone X 底部菜单走光的问题
刘海的问题.我们一直没有关注.客户反映没有自适应iphone X. 解决方法就是写个head里面添加meta新属性+伪类:after+media screen媒体查询相结合一下.解决问题.供大家参考一 ...
- C++ Primer 阅读小结
一.变量和基本类型 类型是C++程序设计的基础. 每种类型都定义了其存储空间要求和可以在该类型的所有对象上执行的操作.C++提供了一组基本内置类型,如int.char等.这些类型与它们在机器硬件上的标 ...
- 一次.NET项目反编译的实战经验（WinForm）
最近由于业务需求,需要对一个老项目进行功能调整.但是项目的源代码已经找不到了.所以只能尝试对项目行进反编译. 一.反编译工具的选择 提到.NET的反编译,第一个想到的就是大名鼎鼎的Reflector. ...
- SSM4-Linux上jdk、tomcat、zookeeper------tar zxvf的安装
1.zookeeper .Zookeeper介绍 官方推荐使用zookeeper注册中心. 注册中心负责服务地址的注册与查找,相当于目录服务,服务提供者和消费者只在启动时与注册中心交互,注册中心不转发 ...