SSE EventSource

2024-05-09 18:58
文章标签 sse eventsource

本文主要是介绍SSE EventSource,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

服务端事件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。如果连接已经被关闭,此方法不做任何事。


这篇关于SSE EventSource的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/974220

相关文章

sse简单介绍

sse fetch-event-source插件的使用https://blog.csdn.net/weixin_42400404/article/details/141896061?csdn_share_tail=%7B%22type%22%3A%22blog%22%2C%22rType%22%3A%22article%22%2C%22rId%22%3A%22141896061%22%2C%22s

Web服务端通过SSE推送消息给浏览器客户端的实现方案(附详细代码和仓库地址)

目录 1、SSE(Server-Sent Events)简介2、SSE 的工作原理3、SSE 与客户端轮询的区别和优势比较区别优势 4、SSE简单实现(单机应用Demo)演示效果SSE-Demo仓库地址下面直接贴代码:前端实现:后端实现: 5、SSE简单实现(分布式应用Demo)SSE-Demo仓库地址关键代码方案说明 1、SSE(Server-Sent Events)简介

vue3项目使用EventSource实现流式输出例如滚动日志

前言 之前接触的通信方式主要是HTTP请求和WebSocket,这次有机会了解到EventSource,记录一下。 简介 EventSource是一个浏览器端用于接收服务器推送事件(Server-Sent Events, SSE)的 JS API。与 WebSocket 不同,SSE 是单向的(服务器到客户端),适用于更新频率不高的实时通知、消息推送等场景。 基本用法 创建连接 con

持久化SSE对象

SpringBoot整合SSE,实现后端主动推送DEMO 前些日子写了整合SSE得demo。但是SSE对象是存储在ConcurrentHashMap<String, SseEmitter>中。在正式环境明显就不行了,服务重启一下的话都没有了。 那么要持久化,第一选择放redis 1、写了一个redis操作组件 SseEmitterStore /*** 不考虑redis 连接异常问题*

前端怎么用 EventSource并配置请求头及加参数(流式数据)

这里写目录标题 一、EventSourcePolyfill二、直接上代码 EventSource 接口是 web 内容与服务器发送事件通信的接口。 一个 EventSource 实例会对 HTTP 服务器开启一个持久化的连接,以 text/event-stream 格式发送事件,此连接会一直保持开启直到通过调用 EventSource.close() 关闭。 EventSourc

HTML5 服务器发送事件(Server-Sent Events, SSE):实时数据传输的新篇章

在实时Web应用领域,HTML5 引入的 Server-Sent Events (SSE) 技术提供了一种轻量级的通信机制,使得服务器能够主动向客户端推送数据。与WebSocket相比,SSE更加简单易用,特别适合于单向通知、实时更新等场景。本文将深入探讨SSE的工作原理、优势、应用场景,并通过实际代码示例带你上手实践。 什么是Server-Sent Events? Server-Sent E

使用SSE指令集来优化程序

SSE和SSE2的指令系统非常相似,SSE2比SSE多的仅是少量的额外浮点处理功能、64位浮点数运算支持和64位整数运算支持。     SSE为什么会比传统的浮点运算更快呢?因为它使用了128位的存储单元,这对于32位的浮点数来讲,是可以存下4个的,也就是说,SSE中的所有计算都是一次性针对4个浮点数来完成的。     虽然SSE从理论上来讲要比传统的浮点运算会快,但是所受的限制也很

Semantic Kernel 中的流式输出SSE与Vue3前端接收示例

本文将介绍如何在使用 Semantic Kernel 框架的 ASP.NET 项目中使用流式输出 SSE(Server-Sent Events),并展示如何在Vue3前端应用中接收这些数据。并介绍了如何使用 @microsoft/fetch-event-source 库使用 POST 方法来接收 SSE 数据。 1. 背景 在大模型的应用场景中,用户经常需要与模型进行实时交互,例如,生成

前端如何接收SSE流式数据传输(大模型网站常用)

使用fetchEventSource 参考:https://blog.csdn.net/qq_43750656/article/details/1315911984 https://zhuanlan.zhihu.com/p/686618062 首先安装: npm install --save @microsoft/fetch-event-source 我参考各个资料写的函数: // 流式

Springboot集成SSE消息推送

SSE介绍         SSE(Server-Sent Events)的全称是服务器推送事件,它是一种基于 HTTP 协议的实时通信技术,用于在客户端和服务器之间建立持久、单向的链接,允许服务器向客户端发送异步消息。         了解 websocket 的小伙伴,可能也知道它也是长连接,可以推送信息,但是它们有一个明显的区别:SSE 是单通道,只能服务端向客户端发消息;而 websco