参考资料：

HTML5的服务器(server-sent event)发送事件有什么应用场景？

W3school HTML 5 服务器发送事件

『后台消息推送功能』，前端除了轮询、scoket、第三方服务（如wilddog）外，暂时没好方案。刚刚还真发现个新的了：HTML5的服务器 EventSource (server-sent event)发送事件

总体体验就是简化版的socket。并不能代替 socket ，适应场景是客户端只需要监听，不需要发送消息给服务端的情况。

目前还有一个问题：从效果上看，是3秒一次轮询。但不知道有什么API可以设定频率……

index.html

<!DOCTYPE html>

<html lang='en'>

<head>

    <meta charset='UTF-8'>

</head>

<body>

    <div id='app'></div>

</body>

<script>

const app = document.getElementById('app')

const source = new EventSource('http://localhost/SSE.php')

/**

 * EventSource 支持的事件有三种 ...

 *

    『名称』    『说明』                      『事件处理方法』

    open     当成功与服务器建立连接时产生  onopen

    message  当收到服务器发送的事件时产生  onmessage

    error    当出现错误时产生             onerror

 */

source.onmessage = e => {

    app.innerHTML += e.data + '<br>'

}

</script>

</html>

SSE.php

<?php

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

header('Cache-Control: no-cache'); 

$time = date('r'); 

/**

 * ⚠️ 需要注意的点

 * 1. php推送的信息一个使用了”\n\n”作为结束标志。

 * 经过测试，如果不以”\n\n”作为结束标志。

 * 那么客户端将不能接收到推送的值。

 *

 * 2. 推送的信息格式必须为"data:内容\n\n"

 */

echo "data: The server time is: {$time}\n\n";

flush();

效果图如下：

HTML5的服务器EventSource(server-sent event)发送事件的更多相关文章

  1. HTML5中使用EventSource实现服务器发送事件

    在HTML5的服务器发送事件中,使用EventSource对象可以接收服务器发送事件的通知. 示例: es.html <!DOCTYPE html> <html> <he ...

  2. HTML5学习(十一)---服务器发送事件

    参考教程:http://www.w3school.com.cn/html5/html_5_serversentevents.asp HTML5 服务器发送事件(server-sent event)允许 ...

  3. HTML5 总结-服务器发送事件-9

    HTML 5 服务器发送事件 HTML5 服务器发送事件(server-sent event)允许网页获得来自服务器的更新. Server-Sent 事件 - 单向消息传递 Server-Sent 事 ...

  4. HTML5 服务器发送事件(Server-Sent Events)

    沈阳SEO:HTML5 服务器发送事件(server-sent event)允许网页获得来自服务器的更新. Server-Sent 事件 - 单向消息传递 Server-Sent 事件指的是网页自动获 ...

  5. HTML5: HTML5 服务器发送事件(Server-Sent Events)

    ylbtech-HTML5: HTML5 服务器发送事件(Server-Sent Events) 1.返回顶部 1. HTML5 服务器发送事件(Server-Sent Events) HTML5 服 ...

  6. Server-Sent Events（HTML5 服务器发送事件）

    Server-Sent Events简介 Server-Sent Events(SSE)用于网页自动获取服务器上更新的数据,它是一个实时性的机制. 实时性获取数据的解决方案 对于某些需要实时更新的数据 ...

  7. 【HTML5】Server-Sent服务器发送事件

    Server-Sent 事件 - 单向消息传递 Server-Sent 事件指的是网页自动获取来自服务器的更新. 以前也可能做到这一点,前提是网页不得不询问是否有可用的更新.通过服务器发送事件,更新能 ...

  8. HTML5 服务器发送事件(Server-Sent Events)介绍

    w3cschool菜鸟教程 Server-Sent 事件 - 单向消息传递 Server-Sent 事件指的是网页自动获取来自服务器的更新. 以前也可能做到这一点,前提是网页不得不询问是否有可用的更新 ...

  9. HTML5支持服务器发送事件(Server-Sent Events)-单向消息传递数据推送（C#示例）

    传统的WEB应用程序通信时的简单时序图: 现在Web App中,大都有Ajax,是这样子: HTML5有一个Server-Sent Events(SSE)功能,允许服务端推送数据到客户端.(通常叫数据 ...

随机推荐

  1. 06-Vue路由

    什么是路由 对于普通的网站,所有的超链接都是URL地址,所有的URL地址都对应服务器上对应的资源: 对于单页面应用程序来说,主要通过URL中的hash(#号)来实现不同页面之间的切换,同时,hash有 ...

  2. Golang中文乱码问题

    在学习golang读取文件的过程中,遇到中文显示乱码的问题!golang没有自带的编解码包,因此需要借助第三方包 解决方法: 引入第三发转码包:git clone https://github.com ...

  3. SPRINGBOOT注解最全详解(

    #     SPRINGBOOT注解最全详解(整合超详细版本)          使用注解的优势:               1.采用纯java代码,不在需要配置繁杂的xml文件           ...

  4. Linux 环境变量配置(Nodejs/MongoDB/JDK/Nginx)

    一.环境变量配置 注:配置环境变量的文件 全局变量(系统级别): /etc/bashrc /etc/profile /etc/environment 用户变量(用户级别): ~/.bash_profi ...

  5. 【GitHub】源代码管理工具初识

    软件工程综合实践第四次个人作业 作业要求:通过搜索资料和自学,了解源代码管理工具——GitHub 前言: GitHub,读音 /git·hʌb/ ,让社会化编程成为现实,其于2018年6月4日被微软收 ...

  6. .Net core 在类库中获取配置文件Appsettings中的值

    大多数情况,我们开发的程序中都含有很多个类库和文件夹,有时候,我们会遇到程序中的类库需要获取配置文件的信息的情况. 像dapper 中需要使用连接字符串的时候,那么我们一直从主程序中传值这是个不好的方 ...

  7. Odoo采购模块

    转载请注明原文地址:https://www.cnblogs.com/ygj0930/p/10825976.html 一:采购过程 采购业务可以分为以下几个流程: 1)建立供应商信息 企业需要与供应商建 ...

  8. Ubuntu 18.10 安装之后做的一点事

    sb_release -c //查看系统代号 #更新源/etc/apt/sources.list //打开更新目录 deb https://linux.xidian.edu.cn/mirrors/ub ...

  9. python的模块放在哪里

    python程序中使用 import XXX 时,python解析器会在当前目录.已安装和第三方模块中搜索 xxx,如果都搜索不到就会报错. 使用sys.path.append()方法可以临时添加搜索 ...

  10. Nikto 扫描工具

    一.渗透步骤 信息收集 (被动的信息收集,主动的信息收集) 扫描探测 制定攻击方向 渗透 留后门 课堂分享: 书籍: <使用kali Linux进行web渗透测试>--书中部分工具已经无法 ...