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)功能,允许服务端推送数据到客户端.(通常叫数据 ...
随机推荐
- tp5 宝塔open_basedir restriction in effect 错误; IIS open_basedir restriction in effect
很久前做过的一个微信项目,客户突然找到我说换了部署环境后网站报错,再跟客户确定了php版本,伪静态设置后,网站依旧打不开,官网手册这样解释: 然而因为客户是iis8的表示该文档一点鸡毛用都米有哇,求助 ...
- 安装socketio出现module 'importlib._bootstrap' has no attribute 'SourceFileLoader' 错误
安装socketio出现module 'importlib._bootstrap' has no attribute 'SourceFileLoader' 错误 执行: pip install --u ...
- SparkStreaming之checkpoint检查点
一.简介 流应用程序必须保证7*24全天候运行,因此必须能够适应与程序逻辑无关的故障[例如:系统故障.JVM崩溃等].为了实现这一点,SparkStreaming需要将足够的信息保存到容错存储系统中, ...
- css animation动画使用
<!-- animation 属性是一个简写属性,用于设置六个动画属性: animation-name animation-duration animation-timing-function ...
- 【转载】python2x与3x下urlretrieve的使用
转载地址:https://blog.csdn.net/drdairen/article/details/61934598 1.python2x下urlretrieve方法: 直接将远程数据下载到本地. ...
- 常用 shell 命令 chmod | root
chmod 命令 chmod 命令 [格式1:] chmod [ugoa][+-=][rwx] 文件或目录 /*u.g.o.a : u属主,g属组,o其他用户,a所有用户*/ /*+.-.= : 增加 ...
- 一个Java字符串中到底有多少个字符?
依照Java的文档, Java中的字符内部是以UTF-16编码方式表示的,最小值是 \u0000 (0),最大值是\uffff(65535), 也就是一个字符以2个字节来表示,难道Java最多只能表示 ...
- codeforces1267G
考虑我们在某个时刻,剩下的数有 $ i $ 个,这些数的和为 $ j $,那么我们期望要抽 $ n \over i $ 次才能取到一个新的物品,这个物品的期望权值为 $ j \over i $,我们花 ...
- Vant 实现 上拉加载更多
Vant 的List 组件 默认支持 瀑布流滚动加载.官方的示例是用定时器模拟的数据.我们在项目实战中,肯定是结合ajax请求处理的.那么我们该如何实现这个效果呢? Vant 的 List组件 使用方 ...
- UFUN函数 UF_CSYS函数 UF_MTX函数(如何创建坐标系);
// (题目不够长,写在这了) // 函数有 // UF_MTX3_initialize,UF_CSYS_create_matrix,UF_CSYS_create_csys,UF_CSYS_ask_c ...