参考资料:

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. Spring源码阅读总结(Ing)

    一.Spring源码架构 Spring源码地址 二.Spring中的设计模式 1.工厂模式 BeanFactory 2.模板模式 模板的使用者只需设计一个具体的类,集成模板类,然后定制那些具体方法,这 ...

  2. OCR6:Custom Traineddata

    参考:https://groups.google.com/forum/#!msg/tesseract-ocr/MSYezIbckvs/kO1VoNKMDMQJ V4版本代码示例 : import py ...

  3. scala快速入门之文档注释

    scala快速入门之文档注释 1.在项目栏的目录树中找到该源码,右击点击Show in Explorer, 即可找到该源码的本地路径,在路径中输入cmd 2.执行scaladoc -d  生成文档注释 ...

  4. 云服务器 - 定时备份MariaDB/MySQL

    数据库数据备份尤为重要,而我们不会人工手动去备份,这样会很麻烦,我们都是通过服务器每日自定运行来做的,设置一个定时时间即可 首先我们看一下mysqldump这个文件的位置: 可以看到目录在 /usr/ ...

  5. elasticsearch使用ansj分词器

    目前elasticsearch的版本已经更新到7.0以上了,不过由于客户需要5.2.2版本的elasticsearch,所以还是需要安装的,并且安装上ansj分词器.在部署ES的时候,采用容器的方式进 ...

  6. 轻量级C#编辑器RoslynPad((基于Roslyn编译器))

    简介 RoslynPad是一个Apache 2.0协议开源的轻量级C#编辑器.支持自动完成,语法提示,修改建议等功能.很适合平时随手写个C#程序看看运行结果. 目前版本:0.10.1,无需保存也可以运 ...

  7. python应用-21根火柴游戏

    """ 21跟火柴 """ from random import randint def main(): total=21 while to ...

  8. 12、Python函数高级(命名空间、作用域、装饰器)

    一.名称空间和作用域 1.命名空间(Namespace) 命名空间是从名称到对象的映射,大部分的命名空间都是通过 Python 字典来实现的. 命名空间提供了在项目中避免名字冲突的一种方法.各个命名空 ...

  9. Linux套接字与虚拟文件系统(1):初始化和创建

    http://www.cppblog.com/qinqing1984/archive/2015/05/03/210521.html 引言   在Unix的世界里,万物皆文件,通过虚拟文件系统VFS,程 ...

  10. docker 启动失败 Job for docker.service failed because the control process exited with error code. See "systemctl status docker.service" and "journalctl -xe" for details.

    CentOS7安装docker,安装成功后,启动失败 提示: 我们可以看到此处它提示是Failed to start Docker Application Container Engine. 于是在网 ...