在 Web 应用开发中，前端与后端通信是必不可少的环节。一般来说，前端通过向后端发送请求获取数据，然后更新页面。然而，随着互联网应用的发展，这种方式有时不能满足实时性更高的需求，因为短时间内发送多个请求会增加网络负担，从而影响网站的性能。为了解决这类问题，SSE 技术应运而生。
SSE 技术是什么？
SSE 技术（Server-Sent Events）是一种基于 HTTP/HTTPS 的协议。它允许服务器向浏览器主动推送数据，而不需要浏览器发起请求。这种通信方式基于长连接，当建立连接后，服务器会不断地向浏览器发送消息，直到连接关闭。
与 WebSocket 技术相比，SSE 技术更加轻量级和易于实现，在一些简单的场景中可以完全替代 WebSocket。
SSE 技术的优势
实时性更高：浏览器与服务器之间的连接始终处于打开状态，当服务器收到新的数据时，可以立即将它推送给浏览器。
协议简单：SSE 技术只需要使用 HTTP/HTTPS 协议，不需要进行复杂的协议升级。
兼容性好：SSE 技术可以在大多数现代浏览器中使用，不需要下载特定的插件或程序。
节省流量：相比于频繁的请求，SSE 通过长连接只需要少量的流量，避免了服务器和客户端数据交互频繁起伏的问题。
SSE 技术的实现
为了向 Web 页面发送 SSE 事件，我们需要使用 EventSource 对象。在 JavaScript 中创建一个 EventSource 对象，同时指定应该与之建立连接的服务器端点 URL。
const eventSource = new EventSource('/send_message');在服务器端，我们需要建立与客户端的连接，并通过 send() 方法向客户端发送事件。
-- -------------------- ---- -------
---- ----- ------ ------ --------
------ ----
--- - ---------------
---------------------------
--- ---------------
--- -----------
--- - -- ----------
----- ------- --- ------- ------- -- --------
-------------
------ -------------------- -----------------------------在上面的示例中，我们使用 Flask 框架来实现一个 SSE 的服务器。它极其简单，仅向客户端发送包含 0-9 的连续数字的消息，每隔 1 秒发送一次。
返回的 Response 类实例包含了一个 generate() 生成器对象，它会以分块的方式将 SSE 事件交付给客户端。每次 yield 语句发送一个事件，包括事件类型和事件数据。
在前端页面中，我们需要绑定事件监听器来处理相应的消息。
let eventSource = new EventSource('/send_message');
eventSource.onmessage = function(event) {
console.log(event.data);
};每当服务器发送新消息时，客户端会触发 onmessage 事件，事件参数 event.data 包含来自服务器的消息内容。
SSE 技术的指导意义
SSE 技术提供了一种新的通信方式，使得我们可以更加高效地构建实时性更高的 Web 应用程序。通过 SSE，我们可以订阅事件并实时获取更新，而不需要进行频繁的请求，同时减少了网络带宽的消耗。SSE 技术的优越性可以在诸如在线聊天室、即时通讯、实时推送等场景获得充分的应用。
然而，我们需要注意的是，SSE 是一种单向通信方式，只能由服务器向客户端发送消息，不能由客户端向服务器发送消息。此外，由于 SSE 技术仅依赖于 HTTP/HTTPS 协议，所以它对于较高频率的数据通信和较大数据量传输不是最优的选择，此时需要使用其他技术，如 WebSocket。
总结
本文说明了 SSE 技术的主要优势、原理和实现，同时提供了一个简单的 Python/Flask 的示例代码，用于演示如何建立 SSE 服务器及如何在 Web 页面中使用 SSE 技术来接收服务器推送的消息。SSE 技术是一种值得掌握的 Web 开发技术，并有助于实现更加高效且实时的数据传输方案。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64efe2e2f6b2d6eab39ce09c