随着互联网的发展，前端技术日新月异，如何有效地监控页面变动成为了前端攻城狮不得不面对的问题，同时用户也期望在页面变动时得到友好的提示。Server-sent Events（SSE）正是为此而生的一种技术。
什么是 Server-sent Events？
Server-sent Events 是一种在客户端与服务器之间实现持久连接的技术，也称为事件源（EventSource）。它允许服务器向客户端推送数据，支持一种简单的统一事件模型，可以在客户端自动更新页面内容。
与传统的 HTTP 请求不同，SSE 是一种单向通信模式，客户端只接收服务器推送的数据，不需要主动发起请求。它使用纯文本格式传递数据，可以与各种服务器端编程语言、框架一起使用。
实现页面变动的监控和友好提示
SSE 可以实现页面变动的监控和友好提示，其基本原理如下：
- 客户端向服务器发起 SSE 请求，服务器建立 SSE 连接并保持连接不断开。
- 服务器根据业务需求向客户端推送相关的数据，客户端通过 onmessage 事件接收数据。
- 客户端根据接收到的数据更新页面内容或显示友好提示。
下面给出一个简单的示例，以实现对数据库变动的监控。
-- -------------------- ---- -------
--------- -----
------
------
---------- ------------
----- ----------------
-------
------
--------------
--------
--- ------ - --- --------------------------- -- -- --- --
---------------------------------- --------------- - -- -- --- --
--- ---- - -----------------------
-- ---------- --- --------------- - -- ---------
--- ----- - -----------
--------------------------------------- - -------- - ------
-----------------
-
-- -------
---------
-------
-------在服务器端，我们需要创建一个 SSE 接口 /db-monitor ，向客户端推送数据。下面以 Node.js 为例，给出示例代码：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------ - ----------------------- ---- -- -
-- -------- --- -------------- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
-------------- -- -
---------------- -------- --------------- -------- ----------- -- ----
-- ------
-------
-
---
------------------- -- -- -
---------------------- -- ---- -------
---在这个例子中，我们在服务器端做了以下事情：
- 创建一个 HTTP 服务器，并处理
/db-monitor接口的请求。 - 设置响应头，声明响应类型为 text/event-stream，并禁用缓存，保持长连接。
- 模拟每秒钟库存数据发生变动，通过响应流向客户端推送数据。
运行这个 Node.js 服务器，并访问 http://localhost:3000/ 即可看到页面正在被监控，并且在库存更新时弹出了友好提示。
总结
Server-sent Events 是一种非常实用的技术，可以在前端实现实时监控和友好提示等功能。开发者只需要一点点 JavaScript 代码和服务器端的 SSE 接口就可以轻松使用 SSE 技术。
SSE 技术并不适合所有场景，例如在需要双向通信、较频繁的数据交互、大规模数据处理等场景下，WebSocket 可能更为合适。开发者可以根据业务需求选择合适的前端技术。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6476a36d968c7c53b034c19c