实时数据在现代 Web 应用程序中变得越来越重要，因为它们使用户能够快速了解数据的最新变化。在这方面，Server-sent Events(SSE) 是一种非常有用的技术，它允许服务器向浏览器推送实时数据，而不需要浏览器发起请求。在本文中，我们将介绍如何使用 SSE 将实时数据发送到浏览器。
Server-sent Events(SSE) 是什么？
Server-sent Events(SSE) 是一种基于 HTTP 的协议，它允许服务器向浏览器发送实时数据。与 WebSockets 不同，SSE 只允许服务器向浏览器发送数据，而不允许浏览器向服务器发送数据。这使得 SSE 更适合用于从服务器向浏览器推送实时数据。
SSE 是一种轻量级的协议，它不需要任何额外的库或框架，只需要使用浏览器内置的 EventSource 对象即可。
如何使用 SSE？
要使用 SSE，您需要在服务器端设置一个特殊的 HTTP 响应头，该响应头指定 SSE 的 MIME 类型。在 PHP 中，您可以使用以下代码设置 SSE 响应头：
header('Content-Type: text/event-stream');在 Node.js 中，您可以使用以下代码设置 SSE 响应头：
res.writeHead(200, {
'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache',
'Connection': 'keep-alive'
});接下来，您需要将实时数据发送到浏览器。为此，您可以将数据格式化为 SSE 事件，并将其发送到浏览器。SSE 事件由一个事件名称和一个事件数据组成，格式如下：
event: event-name data: event-data
其中，event-name 是事件的名称，event-data 是事件的数据。在 PHP 中，您可以使用以下代码将数据格式化为 SSE 事件：
echo "event: event-name\n"; echo "data: event-data\n\n";
在 Node.js 中，您可以使用以下代码将数据格式化为 SSE 事件：
res.write('event: event-name\n');
res.write('data: event-data\n\n');最后，您需要在浏览器中使用 EventSource 对象来接收 SSE 事件。以下是使用 EventSource 对象的示例代码：
const eventSource = new EventSource('/sse');
eventSource.addEventListener('event-name', event => {
console.log(event.data);
});此代码创建一个 EventSource 对象，该对象连接到 /sse 路径，并在接收到名为 event-name 的事件时将事件数据记录到控制台。
SSE 的指导意义
使用 SSE 可以为 Web 应用程序带来许多好处。首先，它可以使您的应用程序更加实时，因为它允许服务器向浏览器推送实时数据。其次，它可以减少网络流量，因为它不需要浏览器发起请求来获取数据。最后，它可以提高应用程序的性能，因为它可以减少请求和响应之间的延迟。
总结
在本文中，我们介绍了如何使用 SSE 将实时数据发送到浏览器。我们了解了 SSE 的工作原理，并提供了示例代码来说明如何在 PHP 和 Node.js 中使用 SSE。使用 SSE 可以为 Web 应用程序带来许多好处，包括更实时的数据、更少的网络流量和更好的性能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65dfdb931886fbafa4d0b0df