Web 应用程序的实时性对于现代互联网应用程序的成功至关重要。用户不希望等待，而期望可以获得更快，更实时的体验。使用 WebSocket 技术可以在一定程度上满足这种需求，但它需要专门的服务器支持和协议，不适用于简单而且小范围内的应用。而 Server-Sent Events（简称 SSE）则提供了一种更简单的实现方法，相比 WebSocket 技术更容易上手。
SSE 概述
Server-Sent Events 是一种 Web 技术，可以让浏览器接收来自服务器的推送消息。与 WebSocket 不同，SSE 不需要建立持久化的连接，而是通过 HTTP 协议中的长连接来实现。因此，SSE 更适合实现简单的、单向的通信，例如实时更新展示信息、任务进度等。
SSE 的基本原理是客户端使用 JavaScript 发送一个 HTTP 请求，服务器根据请求的 URL 发送事件流（EventStream）。其中，每个事件流由多个单独的事件（Event）组成，每个事件由一个或多个字段组成，通常是一个 ID 字段、一个数据字段（data）和一个可选的类型（type）字段。客户端可以用 EventSource API 的 onmessage 事件监听服务器返回的所有事件数据，并处理它们。
SSE 的优势
相比基于轮询的技术，SSE 拥有以下优势：
- 更加实时：SSE 采用长连接技术，支持服务器端主动推送，实时性更高。
- 更加高效：SSE 使用基于文本的协议，比 AJAX 更加高效。
- 更加简单：SSE 不需要特殊的协议和支持，只需要一个 HTTP 服务器就可以实现。
- 更加健壮：SSE 可以在网络连接出现错误的情况下进行自我纠错，保证通信的稳定。
SSE 的服务器端实现
SSE 的服务器端实现非常简单，只需要使用普通的 HTTP 服务器即可。下面是 Node.js 中使用 SSE 的简单示例代码：
-- -------------------- ---- -------
----- ---- - ----------------
-- -- ---- ---
----- ------ - ----------------------- ---- -- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
-- ------- --- ------
-------------- -- -
----- ---- - ------ ----- ----------------------------------
----------------
-- ------
---
--------------------上述代码创建了一个 HTTP 服务器，当客户端请求 SSE 数据时，服务器将每秒钟发送一次当前时间到客户端。服务端的代码非常简单和直观，其中：
- 第 4 行设置了 HTTP 响应的头部，它指定了返回类型、禁用缓存、保持长连接。
- 第 7 - 12 行是用于发送数据的代码，我们每隔一段时间发送一条包含当前时间的数据到客户端。
SSE 的客户端实现
客户端的实现要更复杂一些，但也有一些基本的 API 根据它可以快速实现：
| API | 描述 |
|---|---|
| EventSource | SSE 的核心 API，用于连接 SSE 服务器，监听服务器返回的事件数据。 |
| onopen | 连接成功时触发的事件。 |
| onmessage | 接收到服务器返回的事件数据时触发的事件。 |
| onerror | 每次与服务器发生错误时触发的事件，例如断开连接等。 |
| close() | 关闭与服务器的连接。 |
下面我们看一个简单的使用 SSE 实现实时时间更新的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------- ---- ------ ---------------
-------
------
---------- ---- ------ ------------
---- --------------- ----- ----------------------------
--------
----- ----------- - --- -----------------------
----- -------- - -------------------------------------
--------------------- - ------- -- -
------------------ - -----------
--
---------
-------
-------这段代码会从指定的 URL（上述代码中是 /stream）监听来自服务器的事件。当服务器发送事件数据时，客户端会更新页面中的时间。
总结
Server-Sent Events 技术非常适合于 Web 应用程序的实时性需求，它不仅实现简单，而且有着良好的浏览器支持。此外，SSE 还可以和其他技术一起使用，例如 Web Workers、WebSocket 等，提供更丰富的实时体验。
然而，需要注意 SSE 不适用于所有场景。如果您需要双向通信或者大量数据交互，建议您选择 WebSocket 等技术。当然，在不同场景中选择恰当的技术能够更有效的解决问题。
以上就是本篇文章关于 Server-Sent Events 技术的详细介绍和实现指导，希望对初学者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647f269748841e9894ed66bd