Server-sent Events 实时反推实现原理与代码实现-JavaScript中文网-JavaScript教程资源分享门户

介绍

Server-sent Events（SSE）是一种服务器向客户端推送数据的技术，它能够实现实时反推，即服务器端数据变化后能够立即推送给客户端。SSE 是基于 HTTP 协议的一种技术，与 WebSocket 相比，它更加轻量级，适用于一些简单的场景。

本文将介绍 SSE 的实现原理以及代码实现，并提供示例代码，帮助读者更好地理解和使用 SSE。

实现原理

SSE 的实现原理可以简单描述为：客户端通过 HTTP 协议向服务器端发送一个请求，服务器端返回一个持续连接，然后服务器端通过这个连接向客户端推送数据，客户端接收到数据后进行处理。

具体来说，SSE 的实现需要以下几个步骤：

客户端向服务器端发送一个 HTTP 请求，请求头中需要包含 Accept: text/event-stream。
服务器端收到请求后，返回一个 HTTP 响应，响应头中需要包含 Content-Type: text/event-stream 和 Cache-Control: no-cache。
服务器端保持连接不断开，向客户端发送数据，数据格式为 data: message\n\n，其中 message 是要发送的数据。
客户端接收到数据后，通过 JavaScript 进行处理。

需要注意的是，SSE 的连接是单向的，只能由服务器端向客户端发送数据，客户端无法向服务器端发送数据。

代码实现

下面是一个简单的 SSE 示例，展示了如何使用 SSE 在客户端和服务器端之间进行实时反推。

服务器端代码

// javascriptcn.com 代码示例
const http = require('http');

http.createServer((req, res) => {
  res.writeHead(200, {
    'Content-Type': 'text/event-stream',
    'Cache-Control': 'no-cache',
    'Connection': 'keep-alive'
  });

  setInterval(() => {
    res.write('data: ' + new Date().toISOString() + '\n\n');
  }, 1000);
}).listen(8080);

这段代码创建了一个 HTTP 服务器，每隔 1 秒向客户端发送当前时间。响应头中包含了 SSE 所需的头信息。

客户端代码

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>SSE 示例</title>
</head>
<body>
  <div id="output"></div>

  <script>
    const output = document.getElementById('output');

    const evtSource = new EventSource('http://localhost:8080');

    evtSource.addEventListener('message', (event) => {
      output.innerHTML += event.data + '<br>';
    });
  </script>
</body>
</html>

这段代码创建了一个 HTML 页面，向服务器端发送 SSE 请求，并监听 message 事件，在事件回调函数中将数据显示在页面中。

总结

本文介绍了 SSE 的实现原理以及代码实现，并提供了示例代码。SSE 能够实现实时反推，适用于一些简单的场景。读者可以根据本文提供的示例代码进行实践，并在实践中深入理解 SSE 的原理和用法。

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