在现代 Web 应用程序中，实时通讯已经成为了必须的功能之一。而 Server-Sent Events（SSE）是一种实现实时通讯的技术，它可以让服务器向客户端发送事件，而客户端则可以通过监听这些事件来实现实时更新。
什么是 Server-Sent Events
Server-Sent Events 是一种基于 HTTP 的实时通讯技术，它允许服务器向客户端发送事件。SSE 使用了单向的持久连接，也就是说一旦建立连接，服务器就可以不断地向客户端发送事件，而客户端则可以通过监听这些事件来实现实时更新。
SSE 的优点包括：
- 轻量级的协议，只需要使用普通的 HTTP 协议就可以实现。
- 支持跨域通讯，可以在不同的域之间进行通讯。
- 支持自定义事件类型和数据格式，可以根据需求自定义事件类型和数据格式。
如何使用 Server-Sent Events
服务端实现
在服务端实现 SSE，需要在 HTTP 响应头中添加 Content-Type: text/event-stream，并且在每个事件之间添加 \n\n 来分隔事件。下面是一个简单的 Node.js 示例代码：
-- -------------------- ---- -------
----- ---- - ----------------
----------------------- ---- -- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
-------------- -- -
----- ---- - -
----- --- ---------------------------
--
----------------- ---------
---------------- ------------------------------
-- ------
----------------在上面的代码中，我们使用了 setInterval 来每隔一秒钟向客户端发送一个事件。事件类型为 time，数据格式为一个包含当前时间的 JSON 字符串。
客户端实现
在客户端实现 SSE，需要使用 EventSource 对象来建立连接并监听事件。下面是一个简单的 HTML 示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------------ ------ ------------
-------
------
---- ----------------
--------
----- ----------- - --- -------------------------------------
------------------------------------ ------- -- -
----- ---- - -----------------------
----------------------------------------- - ----------
---
---------
-------
-------在上面的代码中，我们使用了 EventSource 对象来建立与服务器的连接，并监听事件类型为 time 的事件。当接收到该事件时，我们将事件数据插入到页面中。
总结
Server-Sent Events 是一种基于 HTTP 的实时通讯技术，它可以让服务器向客户端发送事件，而客户端则可以通过监听这些事件来实现实时更新。使用 SSE，我们可以轻松地实现实时通讯应用程序，并且支持跨域通讯和自定义事件类型和数据格式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/658c24ffeb4cecbf2d18587a