随着 Web 技术的不断发展，实时通信已经成为了现代 Web 应用的一个基本需求。在传统的 Web 应用中，客户端与服务器之间的通信往往是基于 HTTP 请求-响应模式实现的，这种方式的缺点是无法实现实时通信，而且频繁请求会给服务器带来很大的负担。Server-sent Events (SSE) 就是一种解决这个问题的技术，它可以实现服务器向客户端推送数据，从而实现实时通信。
SSE 基础知识
SSE 是一种基于 HTTP 的协议，它允许服务器向客户端发送事件流，客户端通过监听这些事件流来实现实时通信。SSE 的优点在于，它的实现非常简单，而且不需要使用额外的插件或库，只需要使用原生的 JavaScript 就可以实现。SSE 的工作原理如下：
- 客户端向服务器发送一个 HTTP 请求，请求头中包含了一个特殊的头部字段
Accept: text/event-stream表示该请求需要接收事件流。 - 服务器向客户端发送一个 HTTP 响应，响应头中包含了一个特殊的头部字段
Content-Type: text/event-stream表示该响应包含了一个事件流。 - 服务器会持续向客户端发送事件流，每个事件由一个或多个字段组成，每个字段之间使用
\n分隔，字段的格式如下：
------ ------------ ----- ------------ --- ---------- ------ ------------
其中，event 表示事件名称，data 表示事件数据，id 表示事件 ID，retry 表示重连时间。
- 客户端通过 JavaScript 监听服务器发送的事件流，当有新的事件到达时，就会触发一个
message事件。客户端可以通过event.data获取事件数据，通过event.lastEventId获取事件 ID。
SSE 实现实时通信
使用 SSE 可以非常方便地实现实时通信，下面是一个简单的示例代码：
--------- -----
------
------
----- --------------- --
---------- ------------
-------
------
------- ---------
---- --------------------
--------
----- -------- - ------------------------------------
-- ---- ----------- ---------- ---
----- ------ - --- --------------------
-- -- ------- -------------
---------------------------------- ------- -- -
----- ---- - -----------------------
------------------ -- --------------------- ---------------------
---
---------
-------
-------在这个示例中，我们创建了一个 EventSource 对象，指定了服务器端的 URL，然后监听了 message 事件，在事件处理函数中将服务器发送的消息显示在页面上。
SSE 实现服务器推送
除了实时通信之外，SSE 还可以用于服务器推送，即服务器向客户端主动发送数据。下面是一个简单的示例代码：
----- ---- - ----------------
-- ---- ---- ---
----- ------ - ----------------------- ---- -- -
-- -------- --- ------- -
-- -----
------------------ -
--------------- --------------------
---------------- -----------
------------- -------------
---
-- ----
-------------- -- -
----- ---- - -
--------- ---------
-------- ------- ---------
--
---------------- ------------------------------
-- ------
- ---- -
--------------- ---------
-
---
-- ----
------------------- -- -- -
------------------- ------- -- ------------------------
---在这个示例中，我们创建了一个 HTTP 服务器，当客户端请求 /sse 路径时，服务器会返回一个 SSE 事件流。然后我们使用 setInterval 定时向客户端发送数据，客户端就可以实时接收到服务器发送的数据了。
总结
SSE 是一种非常简单、易用的实时通信技术，它可以实现服务器向客户端推送数据，从而实现实时通信和服务器推送。使用 SSE 可以避免使用 WebSocket 等复杂的技术，同时也可以减轻服务器的负担。在实际开发中，我们可以使用 SSE 来实现直播、聊天室等实时应用。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6608b961d10417a22273f385