使用 Server-sent Events 做长连接心跳检测-JavaScript中文网-JavaScript教程资源分享门户

前言

在现代 Web 应用中，往往需要实现长连接心跳检测的功能，以保障数据的实时性和稳定性。而传统的实现方式通常是使用 WebSocket 或者轮询机制，但它们都有各自的缺点。WebSocket 有一定的复杂度，又需要服务器端和客户端都支持，而轮询机制的实时性和性能也受到一定的限制。

这时候，Server-sent Events (SSE) 可以成为一种非常好的解决方案。它提供了一种基于 HTTP 长连接的单向通信机制，能够实现服务器向客户端的实时推送，同时心跳检测也可以很方便地实现。

本文将介绍如何使用 SSE 实现长连接心跳检测，并提供详细的示例代码和指导意义。

Server-sent Events 简介

SSE 是一种基于 HTTP 的长连接技术，它通过一个简单标准的 HTTP 请求，保持着服务器与客户端之间的持久连接。与 WebSocket 不同的是，SSE 是单向的，只支持服务器向客户端的实时推送。

SSE 是通过一个特殊的 MIME 类型 text/event-stream 来传递数据的。服务器不断地向客户端发送带有该 MIME 类型的数据，客户端通过 EventSource API 接口来监听服务器的推送，并触发相应的事件处理程序。

SSE 实现长连接心跳检测的步骤

下面是使用 SSE 实现长连接心跳检测的大致流程：

客户端向服务器发起 SSE 请求，建立长连接。
服务器向客户端发送一个心跳检测消息。
客户端收到消息后，发送一个确认消息回到服务器，表示客户端还存活着。
服务器再次向客户端发送下一个心跳检测消息。

SSE 实现长连接心跳检测的示例代码

服务器端代码

// www.javascriptcn.com code example
const http = require('http');

http.createServer((req, res) => {
  if (req.url === '/sse') {
    res.writeHead(200, {
      'Content-Type': 'text/event-stream', // 设置返回头的 Content-Type
      'Cache-Control': 'no-cache',
      'Connection': 'keep-alive'
    });

    res.write('\n');

    const timer = setInterval(() => {
      res.write('data: ' + Date.now() + '\n\n'); // 向客户端发送心跳检测消息
    }, 5000);

    // 添加关闭连接的处理函数
    req.on('close', () => {
      clearInterval(timer);
    });
  }
}).listen(3000);

服务器端使用 Node.js 的 http 模块监听请求，如果客户端发起的是 SSE 请求，则将其响应头的 Content-Type 设置为 text/event-stream，并添加 Cache-Control 和 Connection，最后将数据写入响应体中。

客户端代码

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>使用 SSE 做长连接心跳检测</title>
</head>

<body>
  <p id="message"></p>

  <script>
    const message = document.getElementById('message');
    const es = new EventSource('/sse');

    es.onmessage = (event) => {
      message.innerText = '收到心跳检测消息：' + event.data;

      // 向服务器发送确认消息
      fetch('/sse/confirm', { method: 'POST' })
        .then((res) => {
          console.log('确认消息已发送！')
        })
        .catch(console.error);
    };
  </script>
</body>

</html>

客户端使用 EventSource API 发起 SSE 请求，监听服务器端发送的消息。当收到心跳检测消息后，向服务器发送确认消息，表示客户端还存活着。

指导意义

使用 SSE 实现长连接心跳检测，不仅能够提供实时数据的推送和保障数据的稳定性，而且还能够减少网络流量和服务器负载，提高应用的性能和稳定性。

另外，在实现 SSE 过程中，为了避免客户端和服务器之间的轮询行为，可以设置一个适当的心跳检测时间，避免对系统资源的浪费。

最后，需要注意的一点是，不是所有的浏览器都支持 SSE 技术，所以在使用时需要做好兼容性处理。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d61be1a941bf7134bbcf68

使用 Server-sent Events 做长连接心跳检测

前言