SSE EventSource

最新推荐文章于 2024-10-31 17:30:08 发布
最新推荐文章于 2024-10-31 17:30:08 发布
阅读量597 收藏
点赞数 1
分类专栏： JavaScript 文章标签： eventSource SSE 数据推送
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010238381/article/details/79851954
版权

服务端事件EventSource揭秘

SSE eventSource简单介绍

20行代码写一个数据推送服务

服务端推

服务端推，指的是由服务器主动的向客户端发送消息（响应）。在应用层的HTTP协议实现中，“请求-响应”是一个round trip，它的起点来自客户端，因此在应用层之上无法实现简易的服务端推功能。当前解决服务端推送的方案有这几个：

  1. 客户端长轮询
  2. websocket双向连接
  3. iframe永久帧

长轮询虽然可以避免短轮询造成的服务端过载，但在服务端返回数据后仍需要客户端主动发起下一个长轮询请求，等待服务端响应，这样仍需要底层的连接建立而且服务端处理逻辑需要相应处理，不符合逻辑上的流程简单的服务端推送；

websocket连接相对而言功能最强大，但是它对服务器的版本有要求，在可以使用websocket协议的服务器上尽量采用此种方式；

iframe永久帧则是在在页面嵌入一个专用来接受数据的iframe页面，该页面由服务器输出相关信息，如，服务器不停的向iframe中写入类似的script标签和数据，实现另一种形式的服务端推送。不过永久帧的技术会导致主页面的加载条始终处于“loading”状态，体验很差。

HTML5规范中提供了服务端事件EventSource，浏览器在实现了该规范的前提下创建一个EventSource连接后，便可收到服务端的发送的消息，这些消息需要遵循一定的格式，对于前端开发人员而言，只需在浏览器中侦听对应的事件皆可。

相比较上文中提到的3中实现方式，EventSource流的实现方式对客户端开发人员而言非常简单，兼容性上出了IE系的浏览器（IE、Edge）外其他都良好；对于服务端，它可以兼容老的浏览器，无需upgrade为其他协议，在简单的服务端推送的场景下可以满足需求。在浏览器与服务端需要强交互的场景下，websocket仍是不二的选择。


            EventSource接口用于接收服务器发送的事件。它通过HTTP连接到一个服务器，以text/event-stream格式接收事件，不关闭连接。


属性

此接口从其父接口EventTarget继承属性。

EventSource.onerror
是一个  EventHandler，当发生错误时被调用，并且在此对象上派发  error 事件。
EventSource.onmessage
是一个  EventHandler，当收到一个  message事件，即消息来自源头时被调用。
EventSource.onopen
是一个  EventHandler，当收到一个  open 事件，即连接刚打开时被调用。
EventSource.readyState 
一个   unsigned  short  值，代表连接状态。可能值是 CONNECTING  ( 0 ),  OPEN  ( 1 ),  或者CLOSED  ( 2 )。
EventSource.url 

 一个DOMString，代表源头的URL。


方法

此接口从其父接口EventTarget继承方法。

EventSource.close()

如果存在，则关闭连接，并且设置readyState 属性为 CLOSED。如果连接已经被关闭，此方法不做任何事。


Love_vermouth
关注
专栏目录
Server-Sent Events（以下简称 SSE）及event-source-polyfill使用单向长连接(后台主动向前端推送)
周家大小姐
08-17 1万+
SSE 与 WebSocket 作用相似，都是建立浏览器与服务器之间的通信渠道，然后服务器向浏览器推送信息SSE 是单向通道，只能服务器向浏览器发送，因为流信息本质上就是下载。如果浏览器向服务器发送信息，就变成了另一次 HTTP 请求。如果加自定义参数可以使用三方插件event-source-polyfill。Server-Sent Events 教程 - 阮一峰的网络日志。缺点:不可以比如请求头中加token等。可 以看到token是有加上去的。...
浅谈html5之sse服务器发送事件EventSource介绍
09-27
本篇文章主要介绍了浅谈html5之sse服务器发送事件EventSource介绍，具有一定的参考价值，有兴趣的可以了解一下
SSE（Server-Sent Events)请求之EventSource
study_way的博客
11-12 5715
最近有个需求有个搜索接口需要支持流式和静态两种方法，这个接口的查询时间可能很长，完全等结果出来再返回前端对于用户体验不好，于是就想实现持续性返回以提高用户体验。于是学习一下SSE。SSE 是指 Server-Sent Events（服务器推送事件），是一种基于 HTTP 的、服务器向客户端单向推送数据的技术。它允许服务器实时发送数据到客户端，而不需要客户端明确地请求。SSE 主要用于实现服务器向客户端的实时更新，比如新闻更新、股票报价、实时监控等场景。
【SSE】前端vue3使用SSE，EventSource携带请求头
最新发布
alikami的博客
10-31 2511
SSE（Server-Sent Events）是一种基于 HTTP 协议，用于实现服务器主动向客户端推送数据的技术。它在客户端与服务器之间建立一条持久化连接，并通过这条连接实现服务器向客户端的实时数据推送，而客户端不能发送数据给服务端。总之——SSE是一种允许服务器向客户端单向发送数据的技术。
SSE eventSource简介
weixin_33757609的博客
05-03 363
eventSource简单介绍 eventSource是用来解决web上服务器端向客户端推送消息的问题的。不同于ajax轮询的复杂和websocket的资源占用过大，eventSource(sse)是一个轻量级的，易使用的消息推送api 如何使用 客户端代码 <!DOCTYPE html> <html lang="en"...
SSE之EventSource学习
qq_44327851的博客
01-25 1516
使用EventSource非常简单，只需要在客户端创建一个新的EventSource对象，然后指定要连接的服务器端URL即可。一旦连接建立，服务器端发送的事件将会被自动接收并触发相应的事件处理函数。对象上，EventSource是一个用于接收服务器发送的事件流的API。它允许客户端通过HTTP连接订阅服务器端的事件，并在服务器端发送事件时接收到通知。参考与推荐： 更详细版本强烈推荐大家一定一定要阅读阮一峰大大的文章！SSE 的客户端 API 部署在。在这里想强调一下服务器的。中的第四点的event事件，
实时通信的服务器推送机制 EventSource(SSE) 简介，附 go 实现示例
热门推荐
DisMisPres的博客
05-07 1万+
是HTML5中一个强大的API，提供了简单可靠的服务器推送机制，用于实现实时通信。与WebSocket相比，的优势在于其简单易用、自动重连、轻量级和跨域支持。然而，它也有一些限制，如单向通信和较低的浏览器支持。相比之下，WebSocket适用于双向通信、大规模应用和实时性要求较高的场景，但其复杂性和穿越防火墙的挑战也需要考虑。总的来说，是一种非常有用的API，适用于许多实时应用场景，如实时股票报价、即时聊天、实时通知等。它提供了一种简单而可靠的方式来建立服务器推送连接，并实现实时更新和通知。
EventSource:服务器发送事件（SSE）的简单Swift客户端库
05-06
事件源 使用NSURLSession在Swift上编写的SSE客户端。 抽象的 这是文档之后在Swift上编写的EventSource实现。 如果有什么缺失或不完全... EventSource ，您可以EventSource调用disconnect() 。 EventSource不再存储Last
vue-sse:一个Vue插件，用于使用服务器发送的事件（EventSource）
04-27
npm install --save vue-sse # OR yarn yarn add vue-sse // in main.js import VueSSE from 'vue-sse' ; // using defaults Vue . use ( VueSSE ) ; // OR specify custom defaults (described below) Vue . use ...
sse-example:SSE 和 EventSource 的快速而肮脏的例子
06-27
**SSE（Server-Sent Events）与EventSource详解** SSE（Server-Sent Events）是一种从服务器向客户端实时推送数据的技术，它允许Web应用程序接收来自服务器的连续更新，而无需不断发送HTTP请求。与WebSocket不同，...
由Nginx支持的快速，水平可扩展的多进程发布/订阅队列服务器和HTTP，长轮询，Websockets和EventSource（SSE）的代理。-C/C++开发
05-26
https://nchan.slact.net Nchan是现代Web的可伸缩，灵活的发布/订阅服务器，作为Nginx Web服务器的模块而构建。 它可以配置为独立服务器，也可以配置为应用程序与数百个服务器之间的中介服务器。...
了解html5之sse服务器发送事件EventSource
found的专栏
04-15 900
由于有一个需求，需要把一些统计数据实时显示在web上，不需要考虑浏览器兼容性。找了一圈之后，有客户端轮询式的ajax，有高大上的websocket，html5的SSE（SERVER-SENT EVENTS 服务端发送事件）感觉实现起来比较简单。 首先找到了这篇文章《PUSHING UPDATES TO THE WEB PAGE WITH HTML5 SERVER-SENT EVENTS》，根着它...
EventSource
weixin_63681863的博客
05-22 3844
除了默认的message事件，你还可以监听自定义事件。服务器可以通过event字段来定义事件类型，客户端使用来监听。});
Web实时通信的学习之旅：SSE（Server-Sent Events）的技术详解及简单示例演示
在这里，我乐于倾囊相授，分享我的技术心得、项目实战经验、技术技巧。希望能够惠及更多的开发者，助力大家在技术的海洋中扬帆远航。
06-25 1万+
服务器向浏览器推送信息，除了 WebSocket，还有一种方法：Server-Sent Events（以下简称 SSE）。SSE（Server-Sent Events）是一种用于实现服务器主动向客户端推送数据的技术，也被称为“事件流”（Event Stream）。它基于 HTTP 协议，利用了其长连接特性，在客户端与服务器之间建立一条持久化连接，并通过这条连接实现服务器向客户端的实时数据推送。
Server-sent events（SSE）& EventSource 客户端使用与服务器基础实现（基于Node.js）
Naisu的各种笔记
10-26 4924
文章目录目的总结 目的 总结
数据推送之 SSE(Server-Send Event)
陈靖
04-09 2250
服务器推送数据的新方式 //index.js var source; function init(){ source=new EventSource("http://localhost:8080/Comet/data.php"); source.onopen=function(){ console.log("连接已建立",this.readyState);...
Vue+（SSE）EventSource实现流式输出
qq_51201589的博客
07-16 2515
ai一键获取数据，fetch-event-source实现流式输出
SSE服务器发送事件(Server-Sent Events)
wang_gongzi的博客
09-26 987
兼容性：IE不兼容   Server-Sent 事件 - 单向消息传递 Server-Sent 事件指的是网页自动获取来自服务器的更新。 以前也可能做到，前提是网页需要询问是否有可用的更新。通过服务器发送事件，更新能够自动到达。 例子：Facebook/Twitter 更新、股价更新、新的博文、赛事结果等。 服务器端代码实例 把 "Content-Type" 报头设置为 "text/...
Server side event (SSE)实现消息推送功能
m0_50596083的博客
05-06 7553
目录问题场景Server side event (SSE)简介在后端使用SSE功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 问题场景  在开发web项目时，有一个需求是：后端服务器要主动地、不断地推送消息给客户端网页。要实现该需
SSE长连接 EventSource的实时输出
05-25
SSE (Server-Sent Events) 是一种用于实现服务器向客户端推送实时数据的技术，它基于HTTP协议，使用长连接来保持客户端和服务器之间的通信，并且服务器可以随时向客户端推送数据。 EventSource 是一个 JavaScript API，用于接收 SSE 服务器端推送的数据，并将其呈现给用户。使用 EventSource API，可以在客户端创建一个 SSE 连接，并监听服务器端推送的事件。当服务器端有新数据时，EventSource 会自动接收并触发相应的事件，从而实现实时输出。 以下是 SSE 和 EventSource 的使用示例： 1. 服务器端： ```python from flask import Flask, Response app = Flask(__name__) @app.route('/stream') def stream(): def event_stream(): for i in range(10): yield 'data: %s\n\n' % i return Response(event_stream(), mimetype="text/event-stream") ``` 2. 客户端： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>SSE Demo</title> </head> <body> <ul id="msg-list"> </ul> <script> var source = new EventSource("/stream"); source.onmessage = function(event) { var node = document.createElement("LI"); var textnode = document.createTextNode(event.data); node.appendChild(textnode); document.getElementById("msg-list").appendChild(node); }; </script> </body> </html> ``` 在上述示例中，服务器端使用 Flask 框架创建一个 SSE 连接，每隔一秒钟推送一个数据，客户端使用 EventSource API 创建一个 SSE 连接，并监听服务器端推送的数据，将数据添加到页面上的列表中。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值