什么是 SSE？
简单事件源（Server-Sent Events, SSE）是一种在浏览器和服务器之间建立单向连接的技术，允许服务器通过 HTTP 协议向客户端发送事件数据。SSE 可以被用于实现服务器推送技术，使得客户端可以接收实时的数据更新。
SSE 的优劣势
与传统的轮询机制相比，SSE 是一种实时数据传输的技术。它具有以下优势：
- 降低机器资源损耗：相比于轮询机制，SSE 无需反复开启、关闭连接，避免了占用大量机器资源的情况发生。
- 提高数据更新效率：SSE 只会在数据更新时向客户端发送数据，避免了大量无用数据占用网络带宽。
- 支持跨网络：SSE 基于 HTTP 协议，且只需要支持 HTTP 1.1 版本的浏览器即可，可跨网络环境使用。
但是，SSE 仍然存在着一些局限性和缺点：
- 长连接限制：SSE 的连接是一种长连接，与传统的请求-响应机制不同，需要客户端支持长连接技术。
- 通信协议限制：SSE 基于 HTTP 协议，无法实现跨域传输数据。
如何防止推送大量无用数据
在使用 SSE 技术时，由于数据是实时更新的，良好的前端代码逻辑可以避免大量无用数据的浪费，节省机器资源并提高数据更新效率。我们可以从以下几个方面考虑：
服务器端优化
服务器在向客户端发送数据时，应该减少不必要的推送，只向客户端发送真正的更新数据，避免浪费机器资源和网络带宽。下面是一段 PHP 代码示例：
-- -------------------- ---- -------
-----
--------------------- --------------------
---------------------- -----------
--------------- - --
----- ------ -
-------- - ------------
-- ---------------- - -- -
--------------- - -------
------- --------- -- -------- -
---- ------- ----------
---- ------ - - -------------------- - -------
-
- ---- -
-- ---------- --
---------
-
-- ----------------- ---- -------
-- ------- - --------------- - --- -
---- ------- --------
---- ------ ------
-
-----------
--------
-
-------- ----------- -
-- -------------
------ --------
-
--在上面的示例代码中，服务器会定时从数据库或缓存中获取更新数据，对比上一次更新的时间，如果有变动，则向客户端推送真正的更新数据。如果长时间没有更新，服务器会向客户端发送 ping 消息，保持连接。
客户端优化
客户端在接收到服务器发送的数据时，应该避免频繁地更新 DOM，只在必要的情况下更新。下面是一个简单的示例：
-- -------------------- ---- -------
--- ------ - --- -----------------------
--------------------------------- --------------- -
--- ---- - -----------------------
--- ----- - -----------------
-- ---------------------- -
-- ------------------
-------------------------
-
---
-------- ---------------- -
--- ----- - --------- - ---------
-- ------------- --- -- -
-- -------------
----- - ----------
----------- ------ - --------
------------------
-
------ ------
-在上面的示例代码中，客户端会接收服务器发送的 update 事件，在更新 DOM 前，先对比节点是否已经在页面中显示，如果已经在页面中显示，则只更新节点的内容。
通信协议优化
SSE 是基于 HTTP 协议的一种技术，无法实现跨域传输数据。如果需要在跨域环境中使用 SSE，可以通过设置 CORS（跨域资源共享）策略来支持。
下面是一个示例，在服务器端设置 CORS 策略：
<?php
header('Access-Control-Allow-Origin: http://example.com');
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
// 处理 SSE
?>在上面的示例代码中，设置 Access-Control-Allow-Origin 为 http://example.com，以允许该域名下的客户端访问服务器资源。
总结
良好的 SSE 程序设计可以有效地降低机器资源损耗和网络带宽占用，提高数据更新效率。在实际应用中，需要对服务器和客户端代码进行优化和调整，以获取更好的性能表现。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ca1ab35ad90b6d041992cc