在 Web 应用程序中，与服务端进行实时通信是一项重要的功能。在传统的 Web 架构中，要实现实时通信需要使用 WebSocket，但是 WebSocket 要求服务端和客户端都具有较高的实时性和强大的实时通信能力。而另一种实现实时通信的方式是通过 Server-Sent Events（SSE），它不需要客户端具有高实时性和实时通信能力，同时也不需要服务端实现 WebSocket 的复杂逻辑，而是简单、易用、高效的方式。
本文将详细介绍如何在 Web 环境中实现 SSE 的同步与异步，包括 SSE 的基本概念、SSE 的使用流程、SSE 的事件类型、SSE 的同步方式和异步方式，以及 SSE 的常用场景和示例代码。
SSE 的基本概念
Server-Sent Events（SSE) 是一种 HTTP 事件的系统，它允许服务端向客户端推送 DOM 事件，而客户端通过 EventSource 对象来监听服务器发送的事件。SSE 协议是基于 HTTP 1.1，因此可以使用标准的 HTTP 服务器和客户端编程技术。
下面是 SSE 的基本模型：
SSE 的工作原理是客户端发送一个 HTTP GET 请求到服务端，服务端将该请求保持开放状态并发送多个事件（event）到客户端。当客户端接收到事件后，它会将该事件作为通知栏消息，以文本形式渲染到页面上。这样客户端就可以通过监听事件来进行消息的实时推送。
SSE 的使用流程
在使用 SSE 之前，需要通过如下步骤来建立通信连接：
- 在客户端向服务端发送 HTTP GET 请求，请求服务端建立 SSE 连接。
- 服务端收到请求后，将连接保持开放状态，不关闭连接，直到某个事件触发连接关闭，并返回多个事件到客户端。
在客户端接收到服务端发送的事件后，可以利用 jQuery 等工具对事件进行处理。下面是 SSE 的使用流程：
- 建立 SSE 连接：
----- ------ - --- ----------------------------
- 服务端发送事件：
----------------- ----------------- ---------------- ---------------------- ------ ----------------
- 客户端监听事件：
--------------------------------------- --------------- -
-----------------------
--SSE 的事件类型
SSE 协议定义了三种事件类型（event types）：消息事件（message events）、注释事件（comment events）和无名事件（named events）。
消息事件
消息事件是最常用的事件类型，使用 "data" 字段来表示消息数据。下面是一个消息事件的例子：
------ ------- ----- ---- -- - ------- -----
注释事件
注释事件用 "data" 字段来表示注释数据。注释数据对客户端通常没有任何意义，但可以用来维护连接状态。
------ ------- ----- ---- -- - ------- -----
无名事件
无名事件不使用 "data" 字段，可以指定任意自定义事件名称。无名事件用于发送与消息或注释不同的事件类型。
------ --------
SSE 的同步方式
SSE 通过在客户端与服务端之间建立一个持续的连接，从而实现了服务器端的自动推送。SSE 可以同步的方式发送数据到客户端。
下面是 SSE 的同步方式示例：
--- - - -
---------------------- -
---------------- ------------
-- -----客户端会每隔 1000 毫秒收到一条消息，从而实现了数据和服务端的高度同步。
SSE 的异步方式
SSE 也可以异步地向客户端推送数据。与同步方式相比，异步方式更加灵活，可以根据业务需求动态地控制推送的数据量。
下面是 SSE 的异步方式示例：
----- ------ - --- -------------
----- -------- ---------- -
----- ---- - ----- -----------
------------------- -----------------------------
-------------------- -----
-
----------
----------------在该示例中，我们通过 fetchData 方法异步地获取服务端的数据并写入到 stream。然后使用 setTimeout 定时器每隔 1000 毫秒重新调用 loadData 方法，从而异步地发送数据到客户端。
SSE 的常用场景
SSE 主要用于与服务端进行实时通信的场景，比如在线聊天、数据推送、实时信息展示等。SSE 的使用场景不仅局限于 Web 开发，它还可以被用于移动应用开发和桌面应用开发等多种领域。
示例代码
下面是 SSE 的最简示例代码：
服务端代码
----- ---- - ----------------
----------------------- ---- -- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
-------------- -- -
---------------- ---- -- ----------
-- ------
----------------客户端代码
----- ------ - --- -----------------
---------------- - ------- -- -
------------------------
-通过运行上述代码，即可在控制台中看到每隔 1s 打印一条 "This is SSE" 的消息。
总结
SSE 是一种非常简单、易用、高效的实现实时通信的方式，它不需要客户端具有高实时性和实时通信能力，同时也不需要服务端实现WebSocket的复杂逻辑。SSE 的基本概念、事件类型、同步和异步方式、常用场景和示例代码，本文进行了详细介绍，并希望能够对读者有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/648ac26d48841e98948e6806