WebSockets 是一种实时通信协议，可以在 Web 应用程序中实现双向通信。这种协议使用了一个持久连接，可以在客户端和服务器之间发送和接收数据。然而，WebSockets 并不是所有浏览器都支持，而且某些情况下可能会受到防火墙和代理服务器的限制。在这种情况下，Server-Sent Events（SSE） 可以作为一种替代方案。
SSE 是一种基于 HTTP 的协议，可以在服务器端向客户端推送数据。与 WebSockets 不同的是，SSE 只允许单向通信，也就是服务器向客户端发送数据。但是，SSE 在某些情况下比 WebSockets 更加适合，例如在需要向客户端推送实时数据的情况下。
在本文中，我们将使用 Flask 和 SSE 来构建一个简单的实时聊天应用程序。
准备工作
在开始之前，您需要安装 Flask 和 Flask-SSE 扩展。可以使用以下命令进行安装：
pip install Flask Flask-SSE
实现 SSE 服务器
首先，我们需要实现一个 SSE 服务器，用于向客户端推送消息。以下是一个简单的 Flask 应用程序，它实现了 SSE 服务器：
// javascriptcn.com 代码示例
from flask import Flask, Response
from flask_sse import sse
import time
app = Flask(__name__)
app.config["REDIS_URL"] = "redis://localhost"
app.register_blueprint(sse, url_prefix="/stream")
@app.route("/")
def index():
return """
<!doctype html>
<html>
<head>
<title>SSE Chat</title>
<script src="/static/sse.js"></script>
</head>
<body>
<h1>SSE Chat</h1>
<div id="chat"></div>
<form>
<input id="message" type="text" placeholder="Type your message here">
<button type="submit">Send</button>
</form>
<script>
var chat = document.getElementById("chat");
var source = new EventSource("/stream");
source.onmessage = function(event) {
var message = document.createElement("div");
message.textContent = event.data;
chat.appendChild(message);
};
var form = document.querySelector("form");
var messageInput = document.getElementById("message");
form.addEventListener("submit", function(event) {
event.preventDefault();
var xhr = new XMLHttpRequest();
xhr.open("POST", "/message", true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.send(JSON.stringify({ message: messageInput.value }));
messageInput.value = "";
});
</script>
</body>
</html>
"""
@app.route("/message", methods=["POST"])
def post_message():
message = request.json["message"]
sse.publish({"data": message}, type="message")
return Response(status=204)
if __name__ == "__main__":
app.run(debug=True)上述代码中，我们首先导入 Flask、Response 和 Flask-SSE 扩展。然后，我们创建了一个 Flask 应用程序，并且将 Flask-SSE 扩展注册为蓝图。这个蓝图将会处理 SSE 请求。我们还设置了 REDIS_URL，这是我们将用来存储 SSE 连接的 Redis 数据库的地址。
接下来，我们定义了一个 index 路由，用于渲染聊天应用程序的首页。在这个页面中，我们包含了一个用于显示聊天消息的 div 元素，一个表单用于输入新消息，以及一个用于向客户端推送消息的 EventSource 对象。当有新消息到达时，我们使用 JavaScript 将其添加到聊天消息列表中。
我们还定义了一个 post_message 路由，用于处理客户端发送的新消息。在这个路由中，我们使用 sse.publish() 方法向所有连接的客户端发送新消息。
最后，我们在 if name == "main" 中启动了 Flask 应用程序。
实现 SSE 客户端
现在，我们需要实现 SSE 客户端，用于向 SSE 服务器订阅实时消息。以下是一个简单的 JavaScript 文件，它实现了 SSE 客户端：
var source = new EventSource("/stream");
source.onmessage = function(event) {
var message = document.createElement("div");
message.textContent = event.data;
document.body.appendChild(message);
};上述代码中，我们首先创建了一个 EventSource 对象，并向 SSE 服务器发起了连接请求。当有新消息到达时，我们使用 JavaScript 将其添加到页面中。
运行应用程序
现在，我们已经实现了 SSE 服务器和 SSE 客户端，可以运行应用程序了。在命令行中输入以下命令：
python app.py
然后，在浏览器中打开 http://localhost:5000，即可看到聊天应用程序。在输入框中输入新消息并点击 Send 按钮，即可向所有连接的客户端发送新消息。
总结
在本文中，我们使用 Flask 和 SSE 实现了一个简单的实时聊天应用程序。虽然 SSE 只允许单向通信，但是在某些情况下比 WebSockets 更加适合。SSE 可以在不支持 WebSockets 的浏览器和网络环境下实现实时通信，而且使用 SSE 的应用程序可以更加简单和高效。希望本文对您有所帮助，可以尝试使用 SSE 来构建您自己的实时应用程序。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/656615d0d2f5e1655df3b0b2