在 Web 应用程序中，我们经常会需要实时通知用户有新数据或事件发生，以便其可以及时采取行动。通常情况下，我们通常使用传统的轮询或长轮询技术来实现推送通知，但这些技术往往需要大量的资源，也会导致网络延迟和性能下降。因此，使用 Server-sent Events（服务器发送事件）技术可以更有效地实现推送通知。
Server-sent Events 概览
Server-sent Events 是 HTML5 新增的一项技术，用于在客户端和服务器之间实现持久的单向通信。相比于其他传统的长轮询技术，Server-sent Events 具有以下几个优点：
- 无需通过脚本轮询服务器来获取更新，而是由服务器直接推送事件给客户端；
- 更高效、更可靠，减少不必要的网络流量和延迟；
- 可以在客户端打开一个长时间连接，一直保持开启状态，直到连接关闭为止。
实现 Server-sent Events
下面我们将详细介绍如何使用 Server-sent Events 技术来实现推送消息通知。在开始之前，需要确保浏览器支持 Server-sent Events。
服务端
首先，在服务器端我们需要使用以下代码来设置目标 URL，向客户端发送服务器发送事件：
//创建一个新的事件流对象
$stream = new \Symfony\Component\HttpFoundation\StreamedResponse();
// 设置 HTTP 头，告诉浏览器响应是 SSE
$stream->headers->set('Content-Type', 'text/event-stream');
// 发送 SSE 数据到客户端，用于推送消息
$stream->setCallback(function () {
echo "data: Hello, world!\n\n"; // 数据必须以一行空行结尾
flush(); // 强制发送缓冲区数据
});
return $stream;客户端
接下来，我们将使用 JavaScript 来实现客户端的 SSE。首先，我们需要创建一个新的 EventSource 对象，它将监听服务器发送的事件：
const source = new EventSource('/path-to-sse');当客户端接收到服务器的 SSE 事件时，将触发 source 对象的 message 事件：
source.addEventListener('message', event => {
console.log(event.data);
});当然，此代码示例仅用于特定用途。在实际应用中，你需要编写更复杂的 SSE 代码来处理不同的 SSE 事件，并相应地更新 UI。
指导意义
Server-sent Events 技术实现的推送消息通知是前端开发中一种很重要的技能，能够极大地提高网页应用程序的响应能力和交互性。在实际应用中，根据不同的场景，你可以自由扩展其功能，例如断线自动重连、实现多用户推送等。
总结
本文介绍了 Server-sent Events 技术的基本原理和实现方法，并提供了相关代码示例。如需深入学习，请自行查阅相关资料。
参考文献：
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65b3d759add4f0e0ffcd4919