随着 web 应用的日益广泛，实时推送已经成为了很多应用必不可少的功能。而 SSE（Server-Sent Events）作为一种常见的实时推送技术，已经被越来越多地应用于前端开发。本文将介绍如何使用 Flask 和 SSE 技术来实现实时 web 推送。
环境准备
首先需要安装 Flask，可以在终端中使用以下命令进行安装：
--- ------- -----
在准备好 Flask 环境后，我们需要了解一下如何使用 SSE 技术。
SSE 技术
SSE 技术允许服务器主动向客户端推送数据。这种推送方式基于原生的浏览器事件，通过特定的 API 发送事件和数据到客户端。它与 WebSockets 相比，虽然没有持久连接的优势，但是不需要建立握手，所以也可以使用在低成本的基础设施上。
Flask 实现 SSE
在 SSE 中，服务器将事件和数据发送到客户端，所以我们需要设计一个 Flask API，用于处理这些请求。我们只需要在 Flask 中创建一个路由，用于接收 SSE 请求，同时设置响应头以声明它是 SSE：
---- ----- ------ ------ --------
--- - ---------------
---------------------
--- ---------
--- -----------
----- ------ ---------
----- ------ ----------
------ -------------------- -----------------------------这个路由将生成一个 SSE 响应，每次调用时都会发送两条消息，分别对应上面的 yield 语句。其中 data: 就是标准的 SSE 格式。我们也可以通过添加其它字段来进行定制，例如：
----- ----------- --------- ------- ----------- ----------
由于使用 SSE 的时候，浏览器会保持连接状态，所以服务器需要不停地发送消息。另外，在使用 SSE 的时候，由于长轮询需要较长的等待时间以确保连接存活，所以我们需要使用另一个线程来定期发送 SSE 消息。
Flask 客户端
一旦我们完成了 SSE 服务，我们就可以处理客户端的请求。在客户端，我们需要使用 JavaScript 来接收消息并更新页面，代码如下：
--- ------ - --- -----------------------
---------------------------------- --------------- -
--- ---- - -----------------------
--- ------- - ------------------------------
----------------- - -------------
----------------- - ----------
---------------------------------------------------------
-- -------在上面的代码中，source.addEventListener() 方法会监听 SSE 事件，并在接收到新消息时更新页面。在这里我们使用了 JSON 来解析消息，然后使用 DOM 操作将其添加到页面上。
总结
使用 Flask 和 SSE 技术，实现了实时 web 推送功能，需要在服务器端定期发送 SSE 响应，并使用 JavaScript 在客户端接收和处理 SSE 消息。这种推送方式适用于需要简单的实时同步，且不需要建立持久连接的 web 应用场景。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/664b37fcd3423812e4a2419e