在 Web 应用程序的开发中，经常需要处理实时的事件，例如新消息通知、定时任务提醒等。传统的方式通常是通过轮询的方式每隔一段时间去询问服务器是否有新数据，但这种方法会有一定的延迟，也会浪费带宽资源。在这种情况下，Server-Sent Events（简称 SSE）是一种更好的解决方案。
本文将对 SSE 进行详细介绍，包括技术原理、应用场景和实现方式。
技术原理
SSE 是一种 HTML5 新增的技术，它允许 Web 应用程序与服务器之间保持长期的连接，从而使服务器能够实时向客户端推送事件。与传统的 Ajax 轮询方式不同，SSE 不需要客户端不断去询问服务器是否有新数据，而是通过标准的 HTTP 协议在服务器端向客户端发送数据流，客户端则只需要等待新消息的到来即可。这样就实现了更实时、更高效的事件通知方式。
SSE 的通信过程非常简单：
- 客户端向服务器发送一个 HTTP 请求，请求头包含固定的
Accept: text/event-stream。 - 服务器收到请求后，建立一个长连接，并将当前的事件流实时输出到连接中。服务器端通过
Content-Type: text/event-stream来标识这一次请求的类型。 - 客户端收到数据后，这些数据被视为一个事件流，包含了一些事件和数据。客户端可以使用 JavaScript 监听这个事件流，以及事件和数据的变化情况。
SSE 可以通过 event: 和 data: 两个字段来定义事件和数据。其中，event: 表示事件类型，data: 表示事件产生的数据内容。例如：
event: new_message\n data: {"content": "Hello world!"}\n\n
这个事件表示产生了一个 new_message 类型的事件，并包含了一条消息 Hello world!。
应用场景
SSE 可以非常方便地实现一些实时通知的功能。例如：
- 新消息通知：在聊天室或社交网络应用程序中，用户可以接收到消息的实时通知。这样就不需要用户不断地去查询有没有新消息。
- 实时在线人数：在网站的管理员后台中，可以实时监控当前在线人数，并以图表形式呈现。
- 实时数据更新：在数据可视化应用程序中，可以实时监测数据的变化，并将变化以图表形式展示。
实现方式
以下是一个示例代码，用于演示如何通过 SSE 实现一个简单的消息推送功能：
-- -------------------- ---- ------- -- -------------- --- ----- ---- - ---------------- ----- ------ - ----------------------- ---- -- - ------------------ - --------------- -------------------- ---------------- ----------- ------------- ------------ --- -------------- -- - ----------------- ---------------- ---------------- ----------- ------ --------------- -- ------ --- -------------------- -- ----- ----- ------ - --- ------------------------------------- -------------------------------------- ------- -- - ----- ------- - ----------------------- --------------------------------------- ---展开代码
在上面的示例中，服务端通过 setInterval 定时向客户端推送 "Hello world!" 消息，间隔为 1 秒。客户端代码使用 new EventSource 创建了一个 SSE 连接，并监听了 new_message 事件，一旦服务器端有新消息，就会触发这个事件并在控制台输出消息的内容。
指导意义
SSE 是一种非常实用的技术，它可以使 Web 应用程序实现更高效、更实时的事件通知。使用 SSE 可以减少客户端的轮询请求，降低服务器压力，同时提供更好的用户体验。
相比于 WebSocket，SSE 更适合一些简单通信场景（例如消息推送），并且相对来说更容易实现。在实际开发中，可以根据实际需求选择 SSE 或 WebSocket 来实现实时通信功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67b98b45306f20b3a67fc413
