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); }