本文介绍如何使用 Server-sent Events 和 Flask 实现一个状态监控的 demo。在该 demo 中，我们可以实时查看某个接口请求的响应状态及时间等信息。
Server-sent Events
Server-sent Events (简称 SSE) 是一种 HTML5 技术，它允许服务器向浏览器单向推送数据。这些数据会被浏览器自动以文本流的形式接收，并可以通过 JavaScript 的事件处理函数进行处理。SSE 不同于 WebSocket，WebSocket 是一种双向通信的协议，而 SSE 只支持单向通信。
使用 SSE 的好处是它非常简单易用，只需要简单的监听一个事件即可获取所需要的数据。并且 SSE 也非常适合服务器向浏览器推送数据量不大且需要时时更新的信息。
在浏览器端，我们可以使用 EventSource 对象来完成 SSE 的监听和接收。
Flask
Flask 是一个微型的 Python Web 框架，它提供了一些简单易用的工具来帮助我们开发和部署 Web 应用程序。Flask 提供的 Werkzeug 和 Jinja2 工具分别用于处理 HTTP 协议相关的问题和 HTML 模板问题。
Flask 可以轻松的与多种 Web 服务器进行整合，效率也很高，对于小型 Web 应用程序来说是个不错的选择。
状态监控 Demo
我们使用 Flask 和 SSE 技术实现一个状态监控 demo。在该 demo 中，我们通过 Flask 向浏览器推送当前服务器上某个接口请求的响应状态和请求时间等信息。在浏览器端，我们通过 JavaScript 处理 SSE 推送的数据，并在页面中实时地显示出来。
服务端代码
首先，我们需要使用 Flask 框架搭建一个 Web 服务器，并使用 Flask-SSE 扩展来实现 SSE 技术。
-- -------------------- ---- -------
---- ----- ------ ------ ---------------
---- --------- ------ ---
--- - ---------------
----------------------- - -------------------
--------------------------- ---------------------
---------------
--- --------
------ -----------------------------
-----------------------------
--- -----------------
- -----------------
--------------- - ---------
------------- - ---
---------------------- ---------------- ------- --------------- -----------------------
------ ----
-- -------- -- -----------
-------------------首先我们 import 导入了 Flask 和 render_template 方法，用于渲染 HTML 页面。然后使用 Flask-SSE 扩展创建 sse 对象并注册到 app 中。然后我们定义了 index 和 request_status 两个路由。index 路由用于返回网站首页，request_status 路由用于处理某个接口的请求状态。
在 request_status 路由中，我们可以根据实际情况获取该接口的状态信息，并将其封装成一个字典对象形如 {"status": response_status, "time": response_time}。然后我们使用 sse.publish() 方法来向浏览器推送数据，并指定其 type 为 response_status，以便在浏览器端进行正确的处理。
客户端代码
客户端代码也非常简单，我们可以在 HTML 页面中添加如下代码：
<div id="status"></div>
<script>
var source = new EventSource("/stream");
source.addEventListener('response_status', function(e) {
var status = JSON.parse(e.data);
document.getElementById("status").innerHTML = "Response status: " + status.status + ", Time: " + status.time + "s";
}, false);
</script>在 HTML 页面中，我们首先定义一个 div 元素用于显示接口请求的状态信息。然后我们使用 JavaScript 的 EventSource 对象监听 /stream 的事件，即 SSE 服务端向浏览器推送的事件。在该事件的回调函数中，我们使用 JSON.parse() 方法将推送的数据转换为 JavaScript 对象，然后更新页面中的状态信息。
至此，一个简单的状态监控 demo 就完成了。
总结
本文介绍了如何使用 Server-sent Events 和 Flask 实现一个状态监控的 demo。通过该 demo，我们了解了 SSE 技术的基本原理和用法，以及如何使用 Flask 搭建 Web 服务器。希望这篇文章对于初学者能够提供一些参考和指导。完整的 demo 代码可参考这里。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f41da3f6b2d6eab3d41a1f