SSE：在浏览器中实现服务器端事件推送
在现代的 Web 应用程序中，服务器端事件推送已成为一种常见的实时通信方式。SSE（Server-Sent Events，服务器端事件）是一种轻量级的通信协议，它允许服务器向浏览器客户端发送实时事件，并且不需要客户端发起请求。SSE 基于 HTTP 协议，可以在现代浏览器中轻松实现实时通信。
SSE 原理
SSE 的原理非常简单。浏览器通过向服务器发送 HTTP 请求，请求的资源以 MIME 类型 text/event-stream 返回，这个文本流中包含了服务器端发送的事件信息。服务器可以随时向浏览器发送事件，浏览器收到事件后可以根据事件类型进行相应的处理。
SSE 与 WebSocket 的区别
SSE 与 WebSocket 有一些相似之处，但也有很大的区别。WebSocket 是一种全双工通信协议，可以双向通信，而 SSE 只能从服务器向客户端单向发送事件。另外，WebSocket 连接需要经过握手过程，而 SSE 连接不需要握手。
SSE 的优点
SSE 有很多优点，其中最重要的是它的轻量级和易于使用。SSE 可以轻松地与现有的 Web 应用程序集成，不需要任何额外的软件或硬件。此外，SSE 与 HTTP 协议兼容，可以通过标准的 Web 服务器进行部署。
SSE 的示例代码
下面是一个简单的 SSE 示例代码，演示了如何在浏览器中实现服务器端事件推送：
HTML 代码：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- ---------- ------------ ------- ------ ------- --------- ---- -------------------- ------- ---------------------- ------- -------
JavaScript 代码：
-- -------------------- ---- ------- -- -- --- -- --- ------ - --- -------------------- -- ---------- ---------------- - --------------- - --- ------- - ----------------------- --- ----------- - ------------------------------------ --------------------- -- ----- - ------------ - ------- --
Node.js 代码：
-- -------------------- ---- -------
--- ---- - ----------------
-- -- ---- ---
--- ------ - ------------------------------- ---- -
-- -----
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
-- ----
---------------------- -
--- ------- - -
----- ------- -------
--
---------------- - - ----------------------- - --------
-- ------
---
-- -----
--------------------在上面的示例中，我们创建了一个 SSE 连接，并监听服务器发送的事件。每当服务器发送一个事件时，我们将事件的文本内容添加到页面中的消息列表中。在服务器端，我们创建了一个 HTTP 服务器，并使用 setInterval 函数定期发送事件。
总结
SSE 是一种轻量级的通信协议，可以在现代浏览器中实现服务器端事件推送。SSE 与 WebSocket 相似，但也有很大的区别。SSE 的优点是轻量级和易于使用，可以与现有的 Web 应用程序集成。在实现 SSE 时，我们需要创建 SSE 连接，并在服务器端发送事件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65c4a3adadd4f0e0fff32999