介绍
随着 Web 应用程序的发展，越来越多的功能需要通过服务器推送消息来实现。使用传统的轮询方式获取新消息会让服务器的性能遭到严重浪费。目前，使用 SSE（Server-Sent Events）技术可以实现服务器推送消息，是一种能够轻松、高效地向 Web 应用程序推送事件和数据的方法。本文将介绍如何使用 Flask SSE 和 HTML5 SSE 技术实现异步服务器推送消息服务。
Flask SSE
Flask SSE 是 Flask 扩展，它提供了向客户端推送服务器事件消息的功能。它依赖于 Flask 和 Werkzeug 库。Flask SSE 核心是 EventStream 类，它是用于向客户端发送事件流的。
安装
安装 Flask SSE 非常简单，可以直接使用 pip 安装。
pip install Flask-SSE
使用
Flask SSE 可以在 Flask 应用程序中进行配置。我们首先需要导入 EventStream 类。
from flask_sse import EventStream
然后，我们需要创建一个 EventStream 类的实例。
stream = EventStream()
接下来，我们可以使用 app.route() 装饰器将一个 URL 映射到我们的 EventStream 实例。
from flask import Flask, Response
app = Flask(__name__)
@app.route('/stream')
def stream_route():
return Response(stream(),
mimetype="text/event-stream")在上面的代码中，我们将一个 URL 映射到 stream_route() 函数中。返回的对象是一个 Flask Response 对象，它是利用 EventStream 实例发送服务器事件消息的。
发送服务器事件消息的代码必须放在一个无限循环中，以便能够不断地向 Web 应用程序推送最新消息。当然，我们可以使用异步框架等技术来避免使用无限循环的方式。
import time
while True:
data = "New message"
stream.publish(data)
time.sleep(1)完整的 Flask SSE 例子
-- -------------------- ---- -------
---- ----- ------ ------ --------
---- --------- ------ -----------
------ ----
--- - ---------------
------ - -------------
---------------------
--- ---------------
------ ------------------
-----------------------------
--- --------------
----- -----
---- - ---- --------
--------------------
-------------
-- -------- -- -----------
-------------------
-------------HTML5 SSE
HTML5 SSE 是浏览器提供的一种用于从服务器推送事件的 API。与 WebSocket 不同，SSE 是单向的、基于 HTTP 的通信协议。 SSE 提供了一种能够轻松、高效地向 Web 应用程序推送事件和数据的方法。
使用
HTML5 SSE 可以使用 JavaScript 实现。我们需要创建 EventSource 对象来打开与服务器的 SSE 连接。
const sse = new EventSource('/stream');向开启 SSE 连接的服务器推送消息非常简单。我们只需要在服务器端使用 flask_sse 中的 publish 函数将消息推送给客户端。
from flask_sse import EventStream
@app.route('/stream')
def stream():
stream = EventStream()
data = "New message"
stream.publish(data)客户端收到 SSE 消息后，需要处理这些消息。我们可以通过 EventSource 对象设置 onmessage 函数来处理接收到的消息。
sse.onmessage = function(event) {
console.log('Message received: ' + event.data);
};完整的 HTML5 SSE 例子
-- -------------------- ---- -------
--------- -----
------
------
------------ -----------
-------
------
--------- --------
---- --------------------
------- -----------------------
----- --- - --- -----------------------
------------- - --------------- -
----- ------- - ----------------------------
----------------- - -----------
---------------------------------------------------------
--
---------
-------
-------总结
使用 Flask SSE 和 HTML5 SSE 技术可以实现异步服务器推送消息服务。SSE 提供了一种能够轻松、高效地向 Web 应用程序推送事件和数据的方法。通过 EventStream 类和 EventSource 对象，我们能够轻松地实现服务器推送消息服务。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/664eed66d3423812e4faa35a