在 Web 应用程序中，实时数据传输是非常重要的。我们需要一种能够实现服务端向客户端实时推送数据的技术。Server-sent Events（SSE）就是一种能够实现这一需求的技术。
什么是 Server-sent Events？
Server-sent Events 是一种基于 HTTP 的实时推送技术。它能够实现服务端向客户端实时推送数据，而客户端无需不断地向服务端发送请求。SSE 是一种纯粹的浏览器技术，无需任何插件或第三方库。
如何使用 Server-sent Events？
使用 SSE 的过程分为两个步骤：服务端发送事件和客户端接收事件。
服务端发送事件
服务端需要发送一些特殊的事件，以便客户端能够接收到这些事件。服务端发送事件的格式如下：
------ ------------ ----- ------------
其中，event-name 表示事件名称，event-data 表示事件数据。服务端需要通过 HTTP 响应头设置 Content-Type 为 text/event-stream，并且每个事件之间需要用空行隔开。
下面是一个简单的 Node.js 服务端发送 SSE 事件的示例代码：
----- ---- - ----------------
----------------------- ---- -- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
-------------- -- -
----------------- ---------
---------------- --------------------
-- ------
----------------上面的代码中，我们使用 Node.js 创建了一个 HTTP 服务器。在每隔一秒钟的时间间隔内，我们向客户端发送一个名为 ping 的事件，并且事件数据为当前时间戳。
客户端接收事件
客户端需要使用 JavaScript 代码来接收服务端发送的事件。我们可以使用 EventSource 对象来接收事件。EventSource 对象是浏览器内置的对象，无需任何插件或第三方库。
下面是一个简单的客户端接收 SSE 事件的示例代码：
----- ------ - --- -------------------- ------------------------------- ------- -- - ------------------------ ---
上面的代码中，我们创建了一个 EventSource 对象，并且指定了服务端 SSE 事件的 URL。当客户端接收到名为 ping 的事件时，我们将事件数据输出到控制台。
Server-sent Events 的优势和应用场景
相较于传统的轮询和长轮询技术，Server-sent Events 具有以下优势：
- 更少的网络流量：传统轮询和长轮询需要不断地向服务端发送请求，而 SSE 只需要一次请求即可实现服务端向客户端实时推送数据。
- 更少的服务器负载：传统轮询和长轮询需要不断地处理客户端的请求，而 SSE 只需要在服务端发送事件时处理相关逻辑。
- 更快的响应时间：SSE 能够更快地向客户端推送数据，从而实现更快的响应时间。
Server-sent Events 可以应用于以下场景：
- 实时通知：例如社交网络中的消息通知、在线游戏中的实时聊天等。
- 实时数据展示：例如股票行情、天气预报等实时数据的展示。
结论
Server-sent Events 是一种新型的服务端推送技术，能够实现服务端向客户端实时推送数据。相较于传统的轮询和长轮询技术，SSE 具有更少的网络流量、更少的服务器负载和更快的响应时间等优势。SSE 可以应用于实时通知、实时数据展示等场景。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/673adb0a39d6d08e88b02b36