HTML5的服务器EventSource(server-sent event)发送事件
参考资料：
HTML5的服务器(server-sent event)发送事件有什么应用场景？
『后台消息推送功能』，前端除了轮询、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)发送事件的更多相关文章
- HTML5中使用EventSource实现服务器发送事件
在HTML5的服务器发送事件中,使用EventSource对象可以接收服务器发送事件的通知. 示例: es.html <!DOCTYPE html> <html> <he ...
- HTML5学习(十一)---服务器发送事件
参考教程:http://www.w3school.com.cn/html5/html_5_serversentevents.asp HTML5 服务器发送事件(server-sent event)允许 ...
- HTML5 总结-服务器发送事件-9
HTML 5 服务器发送事件 HTML5 服务器发送事件(server-sent event)允许网页获得来自服务器的更新. Server-Sent 事件 - 单向消息传递 Server-Sent 事 ...
- HTML5 服务器发送事件(Server-Sent Events)
沈阳SEO:HTML5 服务器发送事件(server-sent event)允许网页获得来自服务器的更新. Server-Sent 事件 - 单向消息传递 Server-Sent 事件指的是网页自动获 ...
- HTML5: HTML5 服务器发送事件(Server-Sent Events)
ylbtech-HTML5: HTML5 服务器发送事件(Server-Sent Events) 1.返回顶部 1. HTML5 服务器发送事件(Server-Sent Events) HTML5 服 ...
- Server-Sent Events（HTML5 服务器发送事件）
Server-Sent Events简介 Server-Sent Events(SSE)用于网页自动获取服务器上更新的数据,它是一个实时性的机制. 实时性获取数据的解决方案 对于某些需要实时更新的数据 ...
- 【HTML5】Server-Sent服务器发送事件
Server-Sent 事件 - 单向消息传递 Server-Sent 事件指的是网页自动获取来自服务器的更新. 以前也可能做到这一点,前提是网页不得不询问是否有可用的更新.通过服务器发送事件,更新能 ...
- HTML5 服务器发送事件(Server-Sent Events)介绍
w3cschool菜鸟教程 Server-Sent 事件 - 单向消息传递 Server-Sent 事件指的是网页自动获取来自服务器的更新. 以前也可能做到这一点,前提是网页不得不询问是否有可用的更新 ...
- HTML5支持服务器发送事件(Server-Sent Events)-单向消息传递数据推送（C#示例）
传统的WEB应用程序通信时的简单时序图: 现在Web App中,大都有Ajax,是这样子: HTML5有一个Server-Sent Events(SSE)功能,允许服务端推送数据到客户端.(通常叫数据 ...
随机推荐
- idea在maven中引入了jar包依赖，但是编译过程中报出XXX程序包不存在，已解决
idea在maven中引入了jar包依赖,但是编译过程中报出XXX程序包不存在 1. 报错具体情况 2. Project Structure中的Libraries没有任何红色波浪线 3. 发现自己要引 ...
- Junit测试。
Junit使用: 白盒测试 步骤: 1.定义测试类. 2.定义测试方法:可以单独运行. 3.给方法加@Test,导入junit依赖环境. 判定结果: 红色:失败 绿色:成功. 一般不看输出,而是使用 ...
- 记使用pyspider时，任务不执行的问题原因：save太大。
pyspider使用save传递大量文本时,如果是mysql数据库,有可能出现问题,因为任务表默认用的blob字段.字符数是有限制的. 解决办法就是手动把字段类型改成longblob. 希望作者能直接 ...
- python语言的堆栈与队列类的实现
基于python语言的数据结构之堆栈与队列的实现 # 堆栈的实现 # -*- coding: utf-8 -*- """ 栈(stack), 是一种容器,可以存入数据元素 ...
- 【异常】[ERROR] The cloud assistant is not installed on the ECS, or the cloud assistant is unavailable. cloudassistant is uninstall
一.异常信息 [INFO] Deployment File is Uploading... [INFO] IDE Version:IntelliJ IDEA [INFO] Alibaba Cloud ...
- linux 管道，输出重定向，后端执行
1. | (管道) $time|data:"Y-m-d"将前部的输出,作为后部的输入:配合管道使用的命令,典型的就是grep,more find --help | grep cne ...
- 团队第四次——Alpha版本的发布
这个作业属于哪个课程 https://edu.cnblogs.com/campus/xnsy/2019autumnsystemanalysisanddesign/ 这个作业要求在哪里 https:// ...
- Invalid mime type "application nd.ms-excel; charset=utf-8;charset=utf-8": does not contain '/'
org.springframework.web.util.NestedServletException: Request processing failed; nested exception is ...
- hashCode、HashMap 的原理
hashCode 的契约是:如果两个对象相等,那么调用两个对象的 hashCode() 方法一定会返回相同的 hash 值. HashMap 中 存储桶 的原理: 当你在 hashMap 中存储值的时 ...
- python基础语法3 元组，字典，集合
元组: ========================元组基本方法===========================用途:存储多个不同类型的值定义方式:用过小括号存储数据,数据与数据之间通过逗号 ...