HTML5 SSE

 

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


服务器发送事件(Server-sent Events)是基于 WebSocket 协议的一种服务器向客户端发送事件和数据的单向通讯。

HTML5 服务器发送事件(server-sent event)允许网页获得来自服务器的更新。


Server-Sent 事件 - 单向消息传递

Server-Sent 事件指的是网页自动获取来自服务器的更新。

以前也可能做到这一点,前提是网页不得不询问是否有可用的更新。通过服务器发送事件,更新能够自动到达。

例子:Facebook/Twitter 更新、估价更新、新的博文、赛事结果等。


浏览器支持

所有主流浏览器均支持服务器发送事件,除了 Internet Explorer。


接收 Server-Sent 事件通知

EventSource 对象用于接收服务器发送事件通知:

实例

var source=new EventSource("demo_sse.php");
source.onmessage=function(event)
  {
  document.getElementById("result").innerHTML+=event.data + "<br>";
  };


尝试一下 »

实例解析:

  • 创建一个新的 EventSource 对象,然后规定发送更新的页面的 URL(本例中是 "demo_sse.php")

  • 每接收到一次更新,就会发生 onmessage 事件

  • 当 onmessage 事件发生时,把已接收的数据推入 id 为 "result" 的元素中


检测 Server-Sent 事件支持

以下实例,我们编写了一段额外的代码来检测服务器发送事件的浏览器支持情况:

if(typeof(EventSource)!=="undefined")
  {
  // 浏览器支持 Server-Sent
  // 一些代码.....
  }
else
  {
  // 浏览器不支持 Server-Sent..
  }


服务器端代码实例

为了让上面的例子可以运行,您还需要能够发送数据更新的服务器(比如 PHP 和 ASP)。

服务器端事件流的语法是非常简单的。把 "Content-Type" 报头设置为 "text/event-stream"。现在,您可以开始发送事件流了。

<pPHP 代码 (demo_sse.php):

<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');

$time = date('r');
echo "data: The server time is: {$time}nn";
flush();
?>

ASP 代码 (VB) (demo_sse.asp):

<%
Response.ContentType="text/event-stream"
Response.Expires=-1
Response.Write("data: " & now())
Response.Flush()
%>

代码解释:

  • 把报头 "Content-Type" 设置为 "text/event-stream"

  • 规定不对页面进行缓存

  • 输出发送日期(始终以 "data: " 开头)

  • 向网页刷新输出数据


EventSource 对象

在上面的例子中,我们使用 onmessage 事件来获取消息。不过还可以使用其他事件:

事件描述
onopen当通往服务器的连接被打开
onmessage当接收到消息
onerror当发生错误

在本节的开头我们介绍过服务器发送事件(Server-sent Events)是基于 WebSocket 协议的,那么在本教程的下节内容中,我们将继续向你介绍 HTML WebSocket!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/6386.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

快速将PDF转换为图片:免费的在线PDF转换器

在现代数字时代&#xff0c;PDF是一种非常常见的文件格式。它们在学术界&#xff0c;商业领域和许多其他领域中被广泛使用。有时&#xff0c;您可能需要将PDF文件转换为图像格式&#xff0c;以便能够方便地与他人共享和使用。在这种情况下&#xff0c;您可以使用免费的在线PDF转…

PyCharm 配置sqlite3驱动

在PyCharm中可以查看sqlite3数据库&#xff0c;具体要如何做呢&#xff1f; 数据库入口 打开PyCharm&#xff0c; 在最右侧&#xff0c;有一个Database的表示&#xff0c;点击如下图所示。 如果没有找到这个选项&#xff0c; 点击View -> Tool Windows -> Database同…

chatgpt实际是怎样工作的?

文章翻译自&#xff1a; https://www.assemblyai.com/blog/how-chatgpt-actually-works/ ChatGPT 是 OpenAI 的最新语言模型&#xff0c;比其前身 GPT-3 有了重大改进。与许多大型语言模型类似&#xff0c;ChatGPT 能够为不同目的生成多种样式的文本&#xff0c;但具有更高的精…

MBD-有感(Hall)开环BLDC控制模型(下)

目录 前面 保护策略 DC_Bus_Measurements Protection_Check 外设配置 最后 前面 上一篇已经把霍尔有感BLDC开环控制模型的主要部分分析完成了 MBD-有感(Hall)开环BLDC控制模型&#xff08;上&#xff09; 语雀 这一篇分析一些边边角角&#xff0c;但不成体系的部分。…

全网最详细,Jmeter接口测试场景-万条测试数据校验结果,循环断言(案例)

目录&#xff1a;导读前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09;前言 在工作中&#xff0…

这个ChatGPT插件可以远程运行代码,还生成图表

ChatGPT的插件使数据科学成为一种简单、愉快的体验 我们做数据分析时一般都是使用这样的流程来进行&#xff1a;运行jupyter notebook、安装库、解决依赖关系和版本控制&#xff0c;数据分析&#xff0c;生成图表。ChatGPT的“Code Interpreter”插件可以帮助我们进行数据分析…

【Redis】五大数据结构及其常用指令

文章目录说明String类型List类型Set类型Hash类型Sorted Set 排序集合总结说明 Redis里面的数据类型有String、List、Set、Hash、Zset。这篇文章会介绍这5种数据类型并介绍操作它们的指令. String类型 字符串是一种最基本的Redis值类型。Redis字符串是二进制安全的&#xff0…

5.1.1 Ext JS之Grid actioncolumn动作列的动态显示

在Ext JS 的 Grid中添加动作列的方式是配置一个 actioncolumn类型的动作列,这个动作列可以包含多个图表的按钮。 添加的方式如下: {xtype: actioncolumn,items:[{iconCls: x-fa fa-trash,}]}在有的时候场景中, 会根据不同行的数据来决定是否显示动作按钮, 也就是最后的效果…

关于OpenAI的DALL的一点使用心得

文章目录注册DALL使用根据描述来generate上传图片来generate也可以根据描述信息或者相似的图片来进行设计注册DALL https://openai.com/product/dall-e-2 使用 根据描述来generate surprise me 自动生成描述&#xff08;因为每个月只有15个免费credits&#xff0c;节省起见…

java面试题(持续更新)

java面试题&#xff08;持续更新&#xff09; java 基础 java面向对象有哪些特征 面向对象的三大特征&#xff1a;封装、继承、多态 封装&#xff1a;隐藏了类的内部实现机制&#xff0c;可以在不影响使用的情况下改变类的内部结构&#xff0c;同时也保护了数据&#xff0c;…

Microsoft Dynamics 365 Business Central Planning Worksheet中Action Message状态变化

学习目标&#xff1a; 掌握Planning Worksheet中Action Message状态变化 学习内容&#xff1a; 掌握 创建物料&#xff0c;工作中心&#xff0c;工艺路线&#xff0c;BOM&#xff0c;物料和工艺路线&#xff0c;BOM的关联掌握 按订单的生产的物料卡片设置掌握 创建销售订单并…

二叉树的5个性质【要点:完全二叉树的性质】

只讲不会的 普通二叉树就要讲排列顺序了&#xff01;&#xff01;&#xff01; 预备&#xff1a;满二叉树&#xff1a;1.前提是它必须是二叉树 2.每个结点&#xff08;除了终端结点外&#xff09;都是2个子女。 要点1&#xff1a;关于普通的树的结点的计算&#xff0…

【CocosCreator入门】CocosCreator组件 | Label(文本)组件

Cocos Creator 是一款流行的游戏开发引擎&#xff0c;具有丰富的组件和工具&#xff0c;其中Label组件是最常用的之一。Label 组件是一个用于显示文本的 UI 组件。在本文中&#xff0c;我们将探讨 Label 组件的一些技术方面&#xff0c;包括如何创建、配置和使用它。 目录 一、…

java的集合体系结构(以及集合的遍历方式)

文章目录java集合的体系结构遍历方式通用(三种):迭代器,增强for,lambda表达式遍历迭代器(不依赖索引,适合set集合遍历)java集合的体系结构 注意点&#xff1a; Col1 ection是一个接口&#xff0c;我们不能直接创建他的对象。 所以&#xff0c;现在我们学习他的方法时&#xff0…

【数据库管理】①实例与数据库

1.Oracle RDBMS 架构图 2. Oracle 体系结构 由此区分database和instance的区别 No.1.oracle serverdatabase instance2.databasedata file、control file、redo log file3.instancean instance accesses a database4.oracle memorySGA PGA(oracle的内存结构)5.instanceSGA …

用C语言写一个函数,把字符串转换成整数

这是一个很有意思的问题。请不要把这个问题想的太简单了&#xff0c;考虑问题时应该尽可能的全面一些。请先思考并且实现这个函数&#xff0c;再来看讲解。 分析一下&#xff1a;函数名是StrToInt&#xff0c;那么可以这么调用&#xff1a; int ret StrToInt("1234&quo…

前端后端交互系列之Jquery下的Ajax

目录前言Jquery发送Ajax请求1. 引入jquery文件2. 页面结构3. 发送get请求4. 发送post请求5. 通用方法总结前言 本篇文章讲解的是Jquery下的Ajax。Jquery到现今用的不是很多&#xff0c;但是会有老的项目依旧使用Jquery&#xff0c;所以了解用Jquery实现利用ajax进行交互是有必…

SpringCloud微服务技术栈.黑马跟学(十二)

SpringCloud微服务技术栈.黑马跟学 十二今日目标服务异步通信-高级篇1.消息可靠性1.1.生产者消息确认1.1.1.修改配置1.1.2.定义Return回调1.1.3.定义ConfirmCallback1.2.消息持久化1.2.1.交换机持久化1.2.2.队列持久化1.2.3.消息持久化1.3.消费者消息确认1.3.1.演示none模式1.3…

蓝桥杯刷题冲刺 | 倒计时6天

作者&#xff1a;指针不指南吗 专栏&#xff1a;蓝桥杯倒计时冲刺 &#x1f43e;马上就要蓝桥杯了&#xff0c;最后的这几天尤为重要&#xff0c;不可懈怠哦&#x1f43e; 文章目录1.凑数2.砝码称重1.凑数 题目 链接&#xff1a; 4941. 凑数 - AcWing题库 初始时&#xff0c;n0…

CesiumForUnreal实现贴地面(SurfacePolygon)效果

文章目录 1.实现目标2.实现过程2.1 材质实例2.2 Cartographic Polygon2.3 Runtime环境使用2.4 效果测试2.5 遇到的UE崩溃问题与解决3.参考资料1.实现目标 基于UE5的Cesium-Unreal插件添加在线世界地形Cesium World Terrain,在地形表面绘制Polygon面,并使其紧贴地形,实现贴地…