什么是 SSE
SSE（Server-Sent Events）是 HTML5 中用于实现服务器向客户端推送数据的一种技术。它允许服务器向客户端发送任意数量的数据，而不需要客户端发起请求。
SSE 基于 HTTP 协议，使用了 HTTP 的长连接（keep-alive）机制，可以在一个连接上持续发送多个数据。当数据发送完毕后，连接不会立即关闭，而是保持打开状态，以便服务器可以随时向客户端发送新的数据。
SSE 的优点
相比于传统的轮询或长轮询技术，SSE 有以下优点：
- 减少了无用的网络请求，节省了带宽和服务器资源。
- 实时性更高，数据可以立即推送到客户端。
- 可以支持跨域请求。
SSE 的使用
服务器端
服务器端需要设置 HTTP 头信息，告诉浏览器返回的数据是 SSE 格式，同时也需要设置响应的数据格式。以下是一个简单的 Node.js 服务器端代码示例：
----- ---- - ----------------
----------------------- ---- -- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
-------------- -- -
----- ---- - ------ ----- ----------------------------------
----------------
-- ------
----------------客户端
客户端需要使用 JavaScript 创建一个 EventSource 对象，指定服务器端 URL，然后监听服务器端发送的数据。以下是一个简单的 HTML 页面示例：
--------- -----
------
------
----- ----------------
---------- ------------
-------
------
---- ------------------
--------
----- ----------- - --- --------------------
--------------------- - ------- -- -
------------------------------------------- -- ---------- - ---- ----
--
---------
-------
-------SSE 的数据流量优化
虽然 SSE 可以减少无用的网络请求，但是如果服务器频繁地向客户端发送数据，也会导致数据流量增加，影响网络性能。因此，优化 SSE 的数据流量也是非常重要的。
以下是一些 SSE 数据流量优化的技巧：
1. 使用 gzip 压缩
可以使用 gzip 压缩 SSE 数据，减少数据流量。在服务器端设置 HTTP 头信息，告诉浏览器返回的数据使用 gzip 压缩。以下是一个简单的 Node.js 服务器端代码示例：
----- ---- - ----------------
----- ---- - ----------------
----------------------- ---- -- -
------------------ -
--------------- --------------------
---------------- -----------
------------- -------------
------------------- ------
---
-------------- -- -
----- ---- - ------ ----- ----------------------------------
--------------- ----- ------- -- -
------------------
---
-- ------
----------------2. 使用 Last-Event-ID
Last-Event-ID 是 SSE 协议中的一个 HTTP 头信息，用于标识客户端最后一次接收到的事件 ID。服务器可以根据客户端发送的 Last-Event-ID，只发送新的事件，减少数据流量。
以下是一个简单的客户端代码示例：
--------- -----
------
------
----- ----------------
---------- ------------
-------
------
---- ------------------
--------
--- ----------- - -----
----- ----------- - --- --------------------
--------------------- - ------- -- -
------------------------------------------- -- ---------- - ---- ----
----------- - ------------------
--
------------------- - ------- -- -
-- ----------------- --- ------------------- -
----------------------- ---------
-
--
-------------- -- -
--------------------
----- -------------- - --- --------------------
-- ------------- -
-------------------------- - ------------
-
----------- - ---------------
-- -------
---------
-------
-------以上代码中，客户端每隔 60 秒会关闭当前的连接，并重新建立一个新的连接。如果客户端已经接收到了事件，会在请求新的连接时发送 Last-Event-ID 头信息，服务器只发送新的事件，减少数据流量。
总结
SSE 技术可以实现服务器向客户端实时推送数据的功能，相比传统的轮询和长轮询技术，SSE 有更高的实时性和更低的网络开销。但是，为了优化 SSE 的数据流量，我们需要使用 gzip 压缩和 Last-Event-ID 技术，减少无用的数据传输。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/663d6f4dd3423812e4b75a23