前端开发中我们常常需要向用户推送更新，以便及时通知用户网页中的资源发生了变化。Server-sent Events（SSE）技术可以帮助我们实现这一目标。本文将介绍 SSE 的基本原理，并给出一个简单、易懂的示例代码，帮助你快速地使用这一技术。
SSE 原理
SSE 通过 HTTP 协议向客户端推送服务端最新的资源更新。在 SSE 中，服务端发送一条特殊的 HTTP 请求，客户端在收到该请求后建立一个持久的连接并等待服务端的更新推送。这个持久连接会通过 HTTP 的长轮询或者流传输方式实现。
服务端推送数据的格式类似于以下的 HTTP 响应报文：
-- -------------------- ---- ------- -------- --- -- ------------- ----------------- -------------- -------- ------ -------- ----- ----------- ------- -------- ------ ------------- ----- -------- ------- ------ ---
在这个响应报文中，text/event-stream 表示该响应是 SSE 格式，no-cache 则为了保证服务端推送的实时性，忽略客户端的缓存机制。event 表示服务端推送的事件类型，对客户端具有提示性；data 则是需要推送给客户端的数据内容。
客户端收到 SSE 数据后，需要解析它并进行相应的操作。在 JavaScript 中，我们可以通过新建 EventSource 对象，指定服务端推送的事件类型和数据接收函数来处理 SSE 数据。具体示例将在后面给出。
SSE 示例代码
在下面的示例代码中，我们使用 Python Flask 框架作为服务端。该服务端每隔一秒钟向客户端推送一个包含随机数的 SSE 数据。客户端收到 SSE 数据后，将该数据展示在网页上。
服务端代码
-- -------------------- ---- -------
---- ----- ------ ------ --------
------ ------
------ ----
--- - ---------------
------------------
--- ------
--- -----------
----- -----
---- - ------ -------------------------------- ----
----- ----
-------------
------ -------------------- -----------------------------客户端代码
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------- ------------
-------
------
------- ---------
--- -----------------
--------
--- --------- - --- --------------------
------------------------------------- --------------- -
--- ---- - -----------
------------------ - - ------
--- -- - -----------------------------
----------------------------------------------
--------------------------------------------------
---
---------
-------
-------总结
本文介绍了如何使用 Server-sent Events 技术实现客户端推送服务端资源实时更新。通过一个简单的 Python Flask 服务端和 JavaScript 客户端示例，我们可以看到 SSE 技术的基本原理和使用方法。在实际应用中，我们可以将 SSE 技术应用于聊天室、股票行情等有实时更新需求的应用场景中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64eed3a0f6b2d6eab38c6279