使用 HTML5 SSE 向客户端推送消息-JavaScript中文网-JavaScript教程资源分享门户

什么是 HTML5 SSE？

HTML5 SSE（Server-Sent Events）是一种从服务器向客户端推送事件的技术，允许客户端实时接收服务器端的数据。与传统的轮询和长轮询技术相比，HTML5 SSE 更加高效和可靠，因为它使用了一种基于 HTTP 的持久连接，不需要不断地建立和断开连接。

如何使用 HTML5 SSE？

使用 HTML5 SSE 需要在客户端和服务器端分别进行设置。客户端需要创建一个 EventSource 对象，服务器端需要发送事件流。

客户端

客户端可以通过以下代码创建一个 EventSource 对象：

const eventSource = new EventSource('server-sent-events.php');

其中，'server-sent-events.php' 是服务器端发送事件流的地址。

接下来，可以通过添加事件监听器来处理服务器端发送的消息。例如：

eventSource.addEventListener('message', event => {
  console.log(event.data);
});

其中，'message' 是事件的名称，event.data 是服务器端发送的数据。

服务器端

服务器端需要发送事件流，可以通过以下代码实现：

header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');

echo "data: Hello, world!\n\n";

其中，'Content-Type' 和 'Cache-Control' 是必须的，'data' 是数据的前缀，'\n\n' 是必须的换行符。

可以通过循环发送事件流来实现持续的数据推送：

// javascriptcn.com 代码示例
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');

for ($i = 0; $i < 10; $i++) {
  echo "data: " . $i . "\n\n";
  ob_flush();
  flush();
  sleep(1);
}

其中，'ob_flush()' 和 'flush()' 是必须的，它们会立即发送缓冲区的数据，确保数据的实时性。

示例代码

以下是一个完整的示例代码：

客户端

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>HTML5 SSE Demo</title>
</head>
<body>
  <p id="message"></p>
  <script>
    const eventSource = new EventSource('server-sent-events.php');
    eventSource.addEventListener('message', event => {
      document.getElementById('message').innerHTML = event.data;
    });
  </script>
</body>
</html>

服务器端

// javascriptcn.com 代码示例
<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');

for ($i = 0; $i < 10; $i++) {
  echo "data: " . $i . "\n\n";
  ob_flush();
  flush();
  sleep(1);
}
?>

总结

HTML5 SSE 是一种非常有用的技术，可以实现实时数据推送，提高用户体验。它比传统的轮询和长轮询技术更加高效和可靠，因为它使用了一种基于 HTTP 的持久连接。使用 HTML5 SSE 需要在客户端和服务器端分别进行设置，客户端需要创建 EventSource 对象，服务器端需要发送事件流。示例代码可以帮助读者更好地理解和使用 HTML5 SSE。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/653cc5687d4982a6eb6c5bfa