WebSockets 是一种实时通信协议，可以在 Web 应用程序中实现双向通信。这种协议使用了一个持久连接，可以在客户端和服务器之间发送和接收数据。然而，WebSockets 并不是所有浏览器都支持，而且某些情况下可能会受到防火墙和代理服务器的限制。在这种情况下，Server-Sent Events（SSE） 可以作为一种替代方案。
SSE 是一种基于 HTTP 的协议，可以在服务器端向客户端推送数据。与 WebSockets 不同的是，SSE 只允许单向通信，也就是服务器向客户端发送数据。但是，SSE 在某些情况下比 WebSockets 更加适合，例如在需要向客户端推送实时数据的情况下。
在本文中，我们将使用 Flask 和 SSE 来构建一个简单的实时聊天应用程序。
准备工作
在开始之前，您需要安装 Flask 和 Flask-SSE 扩展。可以使用以下命令进行安装：
--- ------- ----- ---------
实现 SSE 服务器
首先，我们需要实现一个 SSE 服务器，用于向客户端推送消息。以下是一个简单的 Flask 应用程序，它实现了 SSE 服务器：
---- ----- ------ ------ --------
---- --------- ------ ---
------ ----
--- - ---------------
----------------------- - -------------------
--------------------------- ---------------------
---------------
--- --------
------ ---
--------- -----
------
------
---------- ------------
------- ------------------------------
-------
------
------- ---------
---- ----------------
------
------ ------------ ----------- ----------------- ---- ------- ------
------- ---------------------------
-------
--------
--- ---- - --------------------------------
--- ------ - --- -----------------------
---------------- - --------------- -
--- ------- - ------------------------------
------------------- - -----------
--------------------------
--
--- ---- - -------------------------------
--- ------------ - -----------------------------------
------------------------------- --------------- -
-----------------------
--- --- - --- -----------------
---------------- ----------- ------
------------------------------------ --------------------
------------------------- -------- ------------------ ----
------------------ - ---
---
---------
-------
-------
---
---------------------- -----------------
--- ---------------
------- - -----------------------
-------------------- --------- ---------------
------ --------------------
-- -------- -- -----------
-------------------上述代码中，我们首先导入 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 客户端：
--- ------ - --- -----------------------
---------------- - --------------- -
--- ------- - ------------------------------
------------------- - -----------
-----------------------------------
--上述代码中，我们首先创建了一个 EventSource 对象，并向 SSE 服务器发起了连接请求。当有新消息到达时，我们使用 JavaScript 将其添加到页面中。
运行应用程序
现在，我们已经实现了 SSE 服务器和 SSE 客户端，可以运行应用程序了。在命令行中输入以下命令：
------ ------
然后，在浏览器中打开 http://localhost:5000，即可看到聊天应用程序。在输入框中输入新消息并点击 Send 按钮，即可向所有连接的客户端发送新消息。
总结
在本文中，我们使用 Flask 和 SSE 实现了一个简单的实时聊天应用程序。虽然 SSE 只允许单向通信，但是在某些情况下比 WebSockets 更加适合。SSE 可以在不支持 WebSockets 的浏览器和网络环境下实现实时通信，而且使用 SSE 的应用程序可以更加简单和高效。希望本文对您有所帮助，可以尝试使用 SSE 来构建您自己的实时应用程序。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/656615d0d2f5e1655df3b0b2