实时数据传输：深入解析Server-Sent Events (SSE)原理与应用

NextJS API 实现 SSE （Server-Sent Events）

研究OpenAI Chat Completion接口时，发现其Stream响应模式。此模式下，每次请求返回部分完整数据，包含event_id, event_type, data三字段，data为完整数据一部分。需不断读取Stream，直至获取完整响应。

应用使用NextJS框架，该框架支持在Vercel上部署函数。目标是实现API，通过Stream方式从Chat Completion接口获取数据，并将数据提供给前端。初期因不了解持续消息发送实现，查阅资料后发现Server-Sent Events (SSE)。理解技术后，找到代码示例，进行功能适配。

实现SSE功能分为两部分：API接口与前端数据消费。具体方法如下。

在Next.js API中实现SSE步骤简单：

示例API响应文本为SSE流，设置Content-Type为text/event-stream，告知浏览器响应格式。添加Cache-Control和Connection标头。

使用setInterval()方法每秒向客户端发送一条SSE事件，事件包含数据、事件名称与事件ID。在事件数据之间插入相应标头，以便客户端正确处理。

发送所有事件后清除间隔器并结束响应。

客户端通过EventSource对象接收SSE事件，添加事件监听器处理myEvent事件，并在控制台输出事件数据。

SSE仅适用于单向数据流，若需双向通信，请考虑使用WebSocket。

总结，通过研究OpenAI接口，了解并实现SSE技术，解决API与前端数据交互问题。记录此过程，为遇到同样问题的开发者提供思路。完成任务，实现目标。

详解 Server Sent Event(SSE)——接收后端通知的轻量方案

在构建轻量级方案以接收后端通知时，Server Sent Events (SSE) 成为一种流行选择，特别是在后端需要频繁向客户端推送通知或数据的场景中。相较于传统方式，如轮询或WebSocket，SSE提供了更高效的解决方案。

在SSE中，客户端通过HTTP请求建立起长连接，从而实现后端能够随时向客户端推送数据。这种技术基于HTTP协议，使得其与现有开发环境的集成更为简便。相比WebSocket，SSE更为轻量，且使用标准HTTP协议，降低了代码改动的需求。

通过设置HTTP响应的`Content-Type`为`text/event-stream`，后端可以向客户端发送SSE事件。事件数据以UTF8编码的文本形式传输，每条消息之间由两个换行符分隔，并支持四种预定义属性。这一特性使得SSE在消息传递时保持高效和简洁。

在实现方面，后端通常采用诸如ASP.NET Core的框架，通过定制化消息类型来触发前端的特定事件处理逻辑。前端则利用JavaScript的`EventSource`接口来监听SSE事件，实现数据的实时更新。在处理关闭连接时，SSE不支持后端主动关闭连接，但通过自定义事件，前端可以主动关闭连接，以响应特定的场景需求。

面对SSE内容限制于UTF8编码的局限性，可通过额外的后端API来处理复杂内容，如、文件等。在客户端接收到简单的元数据后，发起额外请求获取详细内容。

借助SSE，如Probot和smee-client这样的工具或服务可以轻松集成，实现自动化和实时通知功能。开发者可以探索源码以深入了解其工作原理和实现细节。

综上所述，SSE作为接收后端通知的轻量级方案，不仅提供了高效的数据推送能力，还简化了集成过程，降低了开发复杂性，是构建实时应用时的优选技术。

Web端即时通讯技术盘点：短轮询、Comet、Websocket、SSE

Web端即时通讯技术盘点：短轮询、Comet、Websocket、SSE

Web端即时通讯技术因受限于浏览器设计限制，实现起来并不容易。主流方案大致分为四种：传统Ajax短轮询、Comet技术、WebSocket技术、SSE（Server-sent Events）。本文将简要介绍这四种技术的原理，指出它们的异同点、优缺点。

短轮询：Ajax技术的创新，允许浏览器脚本发送HTTP请求。Ajax的出现减少了客户端与服务器端传输数据的冗余，适应了web2.0时代初期的需求。但无法满足即时通信等富交互式应用的实时更新数据要求。浏览器基于http协议的请求/响应模式无法改变，除非http协议本身有所改变。

Comet：一种基于HTTP长连接的“服务器推”技术，用于解决低延迟数据传输需求。Comet技术通过长连接保持客户端与服务器的实时通信，当客户端需要数据更新时，服务器主动推送数据。Comet技术分为基于Ajax的长轮询（long-polling）方式和基于Iframe及htmlfile的流方式。Comet技术已得到认可，有成熟的开源框架。

WebSocket：HTML5中的全双工通讯网络技术，提供浏览器和服务器间的双向传输。WebSocket基于TCP协议，与HTTP协议兼容，作为html5的一部分。建立连接后，双方即可双向通信。WebSocket相较于Comet技术更复杂，但提供了真正的双向传输能力。

SSE（Server-Sent Events）：HTML5技术，允许服务端向客户端推送新数据。SSE提供了一种更优的解决方案，相对于轮询拉取数据，SSE更高效地实现数据推送。SSE的优势在于简便性、服务端的简洁性和直接运行于现有代理服务器和认证技术的能力。

WebSocket和SSE各有优势。WebSocket提供双向通信能力，更适合需要从客户端向服务端发送数据的场景。SSE易于实现，提供既存基础设施优势，适用于文本数据传输。在性能方面，两者都是轻量级协议，延迟、带宽、服务器负载等方面没有区别，除非在设置网络服务器时，SSE连接会占用一个套接字和一个Apache线程或进程，限制了服务器的并行连接数。

总结：四种技术各有特点，选择哪种技术取决于具体应用需求。在浏览器兼容性方面，WebSocket难兼容，SSE易兼容。当需要实现Web端即时通讯功能时，可以考虑Comet、WebSocket或SSE，根据实际需求选择最适合的技术方案。

有人对sse(server sent events)了解的吗? - 知乎

SSE（Server-Sent Events）是一种服务器主动向浏览器推送消息的技术，特别适用于实时应用。在使用 ChatGPT 时，发现其通过流式返回数据，起初以为使用了双工协议，后发现实际采用的是基于 EventStream 的事件流通信方式。这一技术有助于在对话场景中实现数据的即时推送，避免用户因等待时间过长而关闭页面，提升用户体验。

SSE技术从服务端主动推送消息的角度，与WebSockets API存在相似性，但又有所不同。在实现上，浏览器通过发起HTTP请求，服务器响应包含特定格式的事件消息，格式包括事件类型、事件ID、重连时间以及数据内容。消息类型以文本形式传递，需在接收端解码为JSON对象。

浏览器端通过EventSource API监听服务器发送的事件消息，支持onmessage、onopen和onerror事件处理，实现与服务器的实时通信。EventSource对象提供了建立连接、监听事件及关闭连接的接口，且具有readyState属性，用于指示连接状态。

本文介绍了如何在Node.js中实现SSE示例，以及客户端如何使用index.html文件。考虑到浏览器兼容性问题，对于不支持EventSource的浏览器，可使用polyfill实现兼容性。同时，介绍了通过Fetch API实现类似SSE效果的方法，以解决SSE技术的限制。

在实践过程中，需注意浏览器之间的兼容性问题，例如某些浏览器对URL长度和请求头的限制。在本地环境或代理服务器下，可能存在数据推送不连续或等待服务器响应的问题。因此，在选择实时通信技术时，应考虑具体需求和场景，如并发量、吞吐量和延迟要求，以决定是否适合使用SSE。

总的来说，SSE技术是一种轻量级的实时通信解决方案，适用于需要实时数据推送的应用场景。然而，它在实现过程中存在一定的限制，如单向通信、连接数限制和请求类型限制等。因此，在选择实时更新方案时，应权衡技术特性和具体需求，以实现最佳的用户体验。

SSE特点以及SSE与WebSocket的比较

Server-Sent Events（SSE）是一种实时数据推送技术，基于HTTP协议，允许服务器向客户端推送数据。它的特点包括高效实时和简单易用，适用于单向推送数据场景。

SSE与WebSocket相比，主要区别在于通信的双向性。SSE仅支持服务器向客户端推送数据，而WebSocket支持双向通信。因此，选择SSE还是WebSocket取决于具体业务需求。

在进行SSE实时数据推送时，要注意服务器稳定性、安全性和性能，适当进行限流和安全控制以防止滥用和恶意连接。

在Spring Boot中使用SSE实现实时数据推送，如实时股票价格监控应用。通过定义控制器处理SSE请求，使用SseEmitter生成事件流，并在单独线程中不断发送实时股票价格数据。客户端通过HTML页面的EventSource对象监听SSE连接，接收并展示实时数据。

总结而言，SSE适合需要单向实时数据推送的简单场景，而WebSocket更适合双向通信和复杂业务需求。正确使用SSE，结合Spring Boot框架，可以实现高效、实时的数据推送功能。

Spring Boot使用Server-Sent Events

在实时获取数据需求的场景下，有多种解决方案可供选择。其中，轮询、长轮询和 Server-Sent Events（SSE）是三种常用的技术。

轮询机制下，客户端周期性地向服务器发送请求，检查是否有新数据更新。这一过程可能会导致服务器压力增大，特别是当请求频率较高时。

长轮询机制通过客户端发起请求，然后服务器在数据更新时通知客户端，直到数据变化，此时关闭连接，之后再次发起请求。这种方法减少了服务器的连接压力，但存在连接数限制问题。

Server-Sent Events（SSE）则在一次连接中多次发送数据，直至有新消息准备好，再将消息发送给客户端，保持连接状态以处理后续消息。相较于长轮询，SSE提供了更高效的通信机制，但需注意并非所有浏览器均支持。

相比之下，WebSocket技术提供了真正的双向连接，允许客户端与服务器进行实时通信，而无需频繁轮询。这一特性使得WebSocket成为实时应用的理想选择。

在Spring Boot框架中，实现Server-Sent Events技术较为简便。Controller方法返回SseEmitter实例，通过Spring的publishEvent发布异步事件。

在异步监听器中，执行相应的操作，如从队列中获取数据。若队列无值，操作将进入阻塞状态，等待更新。若SSE连接中断，则监听器将抛出异常并终止。

对于Java客户端而言，实现SSE监听的关键在于设置监听器并处理接收到的事件。通过注册事件处理器，可以实时响应服务器发送的数据更新。

你还在使用websocket实现实时消息推送吗？

在开发过程中，实时消息推送与数据同步需求日益凸显，服务端如何高效地向客户端传输信息成为关键。本文将介绍实时消息推送的实现方案，重点对比SSE（Server-Sent Events）与WebSocket，以帮助开发者选择最适合业务场景的技术。

常规实现这类需求的方法包括轮询、SSE与WebSocket。轮询是一种早期的实现方式，通过客户端周期性地向服务端发起请求来获取信息，实现一种“伪推送”效果。然而，轮询方法效率低下，不适用于高频率实时通信。

WebSocket提供了一种双向通信的解决方案，允许客户端与服务端同时发送和接收信息，功能强大，但支持范围有限，尤其是对于一些较旧的浏览器。相比之下，SSE是一种单向通信协议，仅支持服务端主动向客户端推送数据，但无需额外支持，兼容性好。

SSE因其轻量级、简单性和广泛的浏览器兼容性，在数据大屏实时显示、消息中心推送等业务场景中成为首选。而WebSocket因其双向通信能力，更适用于需要客户端与服务端实时交互的场景，如聊天应用。

为了便于理解SSE的使用，本文提供了一个简单示例。通过前端HTML页面和后端Node.js应用（使用Express框架）的代码片段，展示了如何建立并使用SSE连接。实践证明，只需将前端HTML和后端Node.js代码复制并运行，即可实现基本的SSE功能。

在总结部分，我们建议开发者根据实际业务需求，结合SSE与WebSocket的特性，选择最适合的技术方案。SSE因其轻量级和高兼容性，在实时数据推送等场景中具有明显优势；而WebSocket的双向通信能力使其在需要客户端与服务端实时交互的应用中成为理想选择。通过对比分析，开发者能够更好地理解这两种技术的差异与适用场景，为项目的高效实现提供参考。

十分钟学会前端获取实时数据的三种主流方式

前端获取实时数据的三种主流方式

本文探讨了三种主流的前端获取实时数据方式：轮询（Polling）、网页套接字（WebSocket）和服务器发送事件（Server-Sent Events, SSE）。这些技术在实时更新网页内容方面发挥了关键作用，下文将详细解析。

轮询（Polling）原理

轮询机制模拟了孩子不断询问父母到达目的地的情况，前端周期性向后端请求新数据。分为短轮询和长轮询两种。

优缺点

轮询优点在于实现简单，兼容性好；缺点在于频繁请求增加服务器负担，实时性不高，资源消耗较多。

适用场景

适用于实时性要求不高的场景，如后台通知、非实时统计信息展示。

代码示例

通过Node.js后端程序和前端轮询代码实现简单案例。

网页套接字（WebSocket）原理

WebSocket提供全双工通信，允许前后端建立持久连接，随时发送数据，减少HTTP请求开销。

优缺点

优点为真正的实时通信，减少服务器和客户端间的通信开销；缺点为实现相对复杂，旧版浏览器可能不支持。

适用场景

适合高实时性需求场景，如在线游戏、股票交易等。

代码示例

使用Node.js和ws模块创建WebSocket服务器与客户端代码。

服务器发送事件（SSE）原理

SSE类似于广播站，服务器主动向客户端推送数据，实现单向通信。

优缺点

优点包括实现简单，支持自动重连，服务器推送更高效；缺点为单向通信，不支持客户端至服务器通信，部分老旧浏览器不支持。

适用场景

适用于服务器单向推送实时数据的场景，如股票价格更新、新闻直播等。

代码示例

通过Node.js创建SSE服务器和客户端代码。

总结

每种技术各有优劣，选择取决于具体需求。无论是实时聊天应用还是股票交易平台，这些技术都能有效提升用户体验。

SSE(Server-Send Events)实践

HTTP 是客户端-服务器计算模型中的请求-响应协议。要开始交换，客户端向服务器提交请求。为了完成交换，服务器向客户端返回响应。服务器只能向一个客户端发送响应 （发出请求的那个） 。在 HTTP 协议中，客户端是消息交换的发起者。

服务器发送事件 (SSE) 是一种简单的技术，用于为特定的 Web 应用程序实现服务器到客户端的异步通信。

有多种技术允许客户端从服务器接收有关异步更新的消息。它们可以分为两类： 客户端拉取 和 服务器推送 。

在客户端拉取技术中，客户端会定期向服务器请求更新。服务器可以使用更新或尚未更新的特殊响应进行响应。有两种类型的客户端拉取：短轮询和长轮询。

客户端定期向服务器发送请求。如果服务器有更新，它会向客户端发送响应并关闭连接。如果服务器没有更新，它也会向客户端发送一个响应并关闭连接。

客户端向服务器发送请求。如果服务器有更新，它会向客户端发送响应并关闭连接。如果服务器没有更新，它会保持连接直到更新可用。当更新可用时，服务器向客户端发送响应并关闭连接。如果更新在某个超时时间内不可用，服务器会向客户端发送响应并关闭连接。

在服务器推送技术中，服务器在消息可用后立即主动向客户端发送消息。其中，有两种类型的服务器推送：SSE和 WebSocket。

SSE 是一种在基于浏览器的 Web 应用程序中仅从服务器向客户端发送文本消息的技术。SSE基于 HTTP 协议中的持久连接， 具有由 W3C 标准化的网络协议和 EventSource 客户端接口，作为 HTML5 标准套件的一部分。

WebSocket 是一种在 Web 应用程序中实现同时、双向、实时通信的技术。WebSocket 基于 HTTP 以外的协议（TCP），因此可能需要额外设置网络基础设施（代理服务器、NAT、防火墙等）。

客户端通过Http协议请求，在握手阶段升级为WebSocket协议。

在数据字段中，服务器可以发送事件数据

服务器可以发送唯一的事件标识符（id字段）。如果连接中断，客户端会 自动重新连接 并发送最后接收到的带有header的 Last-Event-ID 的事件 ID。

在重试字段中，服务器可以发送超时（以毫秒为单位），之后客户端应在连接中断时自动重新连接。如果未指定此字段，则标准应为 3000 毫秒。

如果一行以冒号字符 : 开头，客户端应该忽略它。这可用于从服务器发送评论或防止某些代理服务器因超时关闭连接。

要打开连接，应创建一个 EventSource 对象。

尽管 SSE 旨在将事件从服务器发送到客户端，但可以使用 GET 查询参数将数据从客户端传递到服务器。

要关闭连接，应调用方法 close()。

有表示连接状态的 readyState 属性：

客户端接收消息并处理他们，可以使用onmessage方法

SSE可被大多数浏览器支持：

Spring Web MVC 框架 5.2.0 是基于 Servlet 3.1 API 且用线程池实现异步应用程序. 所以应用能够被使用在 Servlet 3.1+ 的容器，比如：Tomcat 8.5 和 Jetty 9.3.

使用Spring MVC来发送事件:

示例：

在这个例子中，服务器每秒发送一个持续时间短的周期性事件流 - 一个有限的词流，直到词完成。

示例：

运行效果：

客户端示例（words.html）：

运行效果：

在此示例中，服务器发送持久的周期性事件流 - 每秒可能无限的服务器性能信息流：

效果预览（每秒输出一次）：

非周期性是指没有固定的时间周期，可能由其他因素在任意时刻都可能触发，下面示例通过spring event来模拟触发因子。

效果:

模拟触发动作：调用 http://localhost:8080/sse/mvc/trigger?eventType=customer

客户端收到数据：

Spring Web Flux 框架 5.2.0 是基于 Reactive Streams API 且使用 event-loop 计算模型来实现异步java应用程序。 此类应用程序可以在非阻塞 Web 服务器（例如 Netty 4.1 和 Undertow 1.4）和 Servlet 3.1+ 容器（例如 Tomcat 8.5 和 Jetty 9.3）上运行。

使用 Spring Web Flux 框架实现发送事件：

简单示例：

和上面spring mvc的示例一样，也是每秒输出数据，实现如下：

效果：

对比spring mvc的实现，我们改为flux实现，如下：

效果和上面是一样的，可以看出，reactive api是非常的简洁。

IM通信技术快速入门：短轮询、长轮询、SSE、WebSocket

即时通讯技术的多样化选择，从短轮询到WebSocket，每种技术都有其独特之处和适用场景。让我们一起深入了解这几种技术。

短轮询技术，通过客户端定期向服务器发起请求来获取最新的数据，实现即时通讯功能。优点在于实现简单，兼容性强，但缺点是服务器资源消耗大，且消息延迟问题明显。

长轮询技术则是一种改进的短轮询方式，它让服务器在没有新数据发送时保持连接，直到有新数据生成，才结束等待并发送数据给客户端。这种技术减少了服务器资源的消耗，提高了用户体验，但仍然存在消息延迟问题。

基于iframe的长轮询则利用iframe的同源策略，通过创建一个持久的iframe连接，使得数据能够实时传输。这种方式在一定程度上解决了长轮询的连接问题，但仍然存在资源占用和延迟问题。

SSE(Server-Sent Events)技术允许服务器向客户端推送实时数据更新。它利用HTTP长轮询机制，使得服务器能够实时将事件发送给客户端，但浏览器对SSE的支持程度不同，限制了其应用范围。

WebSocket技术实现了双向实时通信，允许服务器和客户端实时交换数据，无需频繁地向服务器请求更新。其优点是实时性高、数据传输效率高，但开发复杂，兼容性问题也相对较多。

总结而言，短轮询、长轮询、SSE和WebSocket各有优劣，选择合适的技术取决于实际需求、资源限制和目标实现的复杂度。通过了解这些技术的原理和特点，开发者可以更好地应对实时通信场景中的挑战。