SSE:服务器推送事件

摘要:
SSE:服务器SentEvent。服务器推送事件的常规Http协议是一个请求对应一个响应。然而,对于某些实时需求,HTML5添加了SSE,可以轻松刷新本地数据。也就是说,一个请求对将连续接收多个响应。SSE可以实现不需要用户执行任何操作的目标,您可以完成数据刷新。例如,我们的博客需要实时显示访问者的数量,或者邮箱服务的新电子邮件提醒此更新频繁且需要低延迟

SSE:Server-Sent Event,服务器推送事件

常规的Http协议是一个请求对应一个响应的这种方式的

但对于某些实时性要求比较高的需求,HTML5中新增了SSE,可以很方便的实现局部数据的刷新

即一个请求对后会不断的获得多个响应,SSE可以做到不需要用户执行任何操作,就能完成数据刷新

比如:我们的博客上面要实现访问人数的实时展示,或者邮箱服务的新邮件提醒这种更新比较频繁,要求低延迟的场景

SSE对比WebSocket

  • 理论上,SSE和WebSocket做的就是同一个事情,

  • SSE是单通道,只允许服务器向客户端发送消息,如果客服端想向服务器发送消息,需要新的HTTP请求

  • WebSocket是双通道的,如果客户端发起的请求比较多的话,SSE的消耗很是很大的,所以使用场景会有不同

  • 如果客户端平均每秒会向服务器发送一个消息的话,还是WebSocket比较合适

  • 但是如果一分钟就5.6次的话,其实差异不大,总的来说单通道要求客户端向服务端发起的请求越少越好

SSE技术规范

SSE是HTML5规范的一个组成部分,主要由两个部分组成

  • 服务器与浏览器之间的通讯协议

  • 浏览器中可供JavaScript使用的EventSource对象

通讯协议

这个通讯协议是基于纯文本的简单协议,服务端的响应内容必须为: "text/event-stream"

响应文本的内容必须是一个事件流,事件流是一个简单的文本流,仅支持UTF-8格式的编码

事件流

事件流由不同的事件组成,不同的事件间通过仅包含 回车符&换行符的空行分割 ( /r/n)

每个事件都可以由多行构成,每行有类型和数据两部分组成,类型和数据通过冒号:)分割,冒号前为类型,冒号后为其所对应的值,每个事件可以包含如下类型的行:

  • 类型为空白,表示改行为注释,会在处理时忽略

  • 类型为data,表示改行是事件说包含的数据,以data开头的允许出现多次,所有这些行都是该事件的数据

  • 类型为event,表示该行用来声明事件的类型,即事件名称,浏览器在收到数据时,会产生对应名称的事件

  • 类型为id,表示改行用来声明事件的标识符

  • 类型为retry,表示改行用来声明浏览器在连接断开之后进行重连的等待时间

  • data:china      //改事件仅仅包含数据
    ​
    data:beijing    //该事件不仅包含数据,还包含了事件标识
    id:100
    ​
    event:myevent   //该事件指定了名称
    ​
    :this is a comment  //改行具有注释、名称、且包含两行数据
    event:city
    data:sichuan
    data:shenzhen

事件标识id的作用:

如果服务器发送的时间包含事件标识id,那么浏览器会将最近一次接收到的事件标识id记录在HTTP头的Last-Event-ID属性中,如果浏览器与服务器连接中断,当浏览器再次连接时,会将Last-Event-ID记录的事件标识ID发送给服务端,服务器,通过这个事件标识id来确定将继续连接哪个事件

EventSource对象

对于服务器发送的带有事件的响应,浏览器需要在js中使用EventSource对象进行处理,EventSource使用的是标准的事件监听器方式,这个事件并不是响应中所带的事件,而是浏览器所发生的时间,当相应的事件发生时,只需要使EventSource对象调用相应的事件处理方法即可,EventSource提供了三个标准事件

SSE:服务器推送事件第1张

SSE:服务器推送事件第2张

测试小Demo

创建 一个普通的web工程,在测试的时候不要使用火狐,看不到效果的

  SSE:服务器推送事件第3张

  SSE:服务器推送事件第4张

启动Tomcat,依次进行访问,我们会发现:

  SSE:服务器推送事件第5张...---...SSE:服务器推送事件第6张

SSE:服务器推送事件第7张一共有两种不同的效果:

localhost:8080/commonServlet :普通的Servlet访问,浏览器被阻塞,然后待到阻塞完后,一次性将数据显示

localhost:8080/sseServlet:浏览器在逐条显示事件流中的数据,未出现阻塞现象

如果要指定事件名称的话:

  SSE:服务器推送事件第8张

SSE:服务器推送事件第9张数据也是逐条显示,不会阻塞,与访问sseServlet效果相同,但事件流内容多了事件名称

与jsp互动的小Demo

直接在index.jsp中操刀:

  SSE:服务器推送事件第10张

SSE:服务器推送事件第11张或者需要指定事件名才能触发的监听:

  SSE:服务器推送事件第12张

SSE:服务器推送事件第13张api就这么几个,可以了解一下:

   SSE:服务器推送事件第14张

免责声明:文章转载自《SSE:服务器推送事件》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇【大数据】hadoop3.0worker集群+flink+zeppelin+kafaka+zookeeper安装部署LoRa---她的芯片和她的几种工作模式下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

随便看看

正负无穷float('inf')的一些用法

示例:输入:[-2,1,-3,4,-1,2,1,-5,4],输出:6解释:连续子数组[4],-1,2,1]的和最大,为6。...

buildroot使用介绍【转】

整个Buildroot由Makefile脚本和Kconfig配置文件组成。就像编译Linux内核一样,您可以编译一个完整的Linux系统软件,该软件可以通过buildroot配置和menuconfig修改直接写入机器。使用buildroot构建基于qemu的虚拟开发平台。请参阅通过buildroot+qemu构建ARM Linux虚拟开发环境。工具链--˃配...

使用Docker构建redis集群

将六个独立的Redis节点关联到主机上的Redis集群中。Redis部落。rb是Redis官方提供的一个ruby脚本,用于构建Redis集群并修改Redis conf将其移动到上部路径/usr/docker_root/redis_Cluster/。受保护模式norequipassa1s2W3l4%Greunbind无法连接到凹坑以构建Redis基本映像。9....

每个文件之间延迟启动批处理bat方法之一

延迟在文件之间启动批处理的方法之一:。文本→. bat将扩展名更改为.bat或在txt中将其另存为.bat。例如,如果B是包含空格的路径名,请使用引号“”,否则将找不到文件。批处理bat要运行的文件位于同一目录文件夹@echoffstart xiongmaoshu.jpgping127.0.0.1-n 10>批处理bat和文件是否位于同一目录文...

easyexcel导出两种方式response返回文件流下载和保存到服务器返回下载链接

1、response方式返回excel文件流@GetMapping("/exportExcel")publicvoidexportExcel(@RequestParam(value="menu")Stringmenu,@RequestParam(value="dwflglId")intdwflglId,@RequestParam(value="qjCode"...

[C#]asp.net生成高清晰缩略图

Code//////生成缩略图//////源图路径(物理路径)///缩略图路径(物理路径)///缩略图宽度///缩略图高...