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)功能,允许服务端推送数据到客户端.(通常叫数据 ...
随机推荐
- Golang: 解析JSON数据之三
前面我们介绍了 Marshal 和 Unmarshal 方法,今天再解一下另外两个 API:Encoder 和 Decoder. Encoder Encoder 主要负责将结构对象编码成 JSON 数 ...
- .Net Core 2.2 发布IIS遇到的那些坑
这两天在研究.Net Core 发布iis总结一下. 我主要是参照官方文档: https://docs.microsoft.com/zh-cn/aspnet/core/host-and-deploy/ ...
- shell中read用法
1. Read的一些选项 Read可以带有-a, -d, -e, -n, -p, -r, -t, 和 -s八个选项. -a :将内容读入到数值中 1 2 3 echo -n "Input m ...
- Linux运维技术之scp命令使用
命令格式: scp -P 8031 -r 路径1 路径2 命令解释, 其中-P中的P一定要大写,小写不行(这个也是问题的关键,这个大小写耽搁了好长时间) -P 2424表示更改SSH端口后的端口,如 ...
- CentOS6.7安装部署之Tomcat多实例
Tomcat单机多实例配置 操作前的准备:关闭防火墙,配置好IP地址,安装好JAVA环境 1.首先创建tomcat所有实例共同的工作目录/data/webapps以及tomcat所有实例的所在目录/d ...
- python基础语法10 函数递归,模块,软件开发目录规范
函数递归: 函数递归指的是重复 “直接调用或间接调用” 函数本身, 这是一种函数嵌套调用的表现形式. 直接调用: 指的是在函数内置,直接调用函数本身. 间接调用: 两个函数之间相互调用间接造成递归. ...
- ReadIniTest_GetPrivateProfileString
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.R ...
- react语法注意事项
组件: var HelloMessage = React.createClass({ render: function() { return <h1>Hello {this.props.n ...
- python的虚拟环境管理工具venv使用方法介绍及与nodejs的包管理方式对比
一.nodejs 包管理方式 我们知道, nodejs的包管理工具npm可以安装项目所需要的包,安装方法及区别如下: npm i module_name -g 全局安装 npm i module_na ...
- CentOS7 配置阿里云yum源,vim编辑器,tab自动补全
1.进入yum的文件夹 命令:cd /etc/yum.repos.d/ 2.下载wget 命令:yum -y install wget 3.删除yum文件夹所有yum源 命令:rm -rf ...