用 Server-Sent Events 在服务器上 Push 消息-JavaScript中文网-JavaScript教程资源分享门户

介绍

在前端开发中，有时候需要从服务器实时获取数据并更新页面。传统的方式是使用轮询或者 WebSocket。但是，这些方法都有一些缺点，比如轮询会浪费带宽和服务器资源，而 WebSocket 需要双向通信，增加了复杂性。

而 Server-Sent Events（SSE）则是一种轻量级、简单易用的技术，可以在服务器上 Push 消息到客户端。SSE 只需要单向通信，可以减少服务器和客户端的负担，同时也可以减少网络流量。

SSE 的工作原理

SSE 的工作原理非常简单。客户端通过 HTTP 连接服务器，并发送一个特殊的请求头 Accept: text/event-stream。服务器收到请求后，会不断向客户端发送数据，每个数据包都有一个特殊的格式，如下所示：

event: message
data: Hello, world!

event: custom
data: {"name": "John", "age": 30}

每个数据包由两个部分组成：

event：事件类型，可以是任意字符串，用于标识不同的事件。
data：数据部分，可以是任意格式的数据，比如字符串、JSON 等。

客户端收到数据后，可以通过 JavaScript 代码进行处理，比如更新页面内容、播放音频等。

SSE 的优点

相比于传统的轮询和 WebSocket，SSE 有以下优点：

简单易用：SSE 只需要单向通信，不需要双向通信，减少了复杂性。
轻量级：SSE 只需要使用 HTTP 协议，不需要额外的握手和协议，可以减少网络流量。
实时性：SSE 可以实现实时更新数据，比轮询更及时，比 WebSocket 更简单。
兼容性：SSE 可以在所有现代浏览器中使用，不需要额外的库或插件。

示例代码

下面是一个使用 SSE 的示例代码。

服务器端代码

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

const server = http.createServer((req, res) => {
  if (req.url === '/events') {
    res.writeHead(200, {
      'Content-Type': 'text/event-stream',
      'Cache-Control': 'no-cache',
    });

    setInterval(() => {
      res.write('event: message\n');
      res.write(`data: ${new Date().toISOString()}\n\n`);
    }, 1000);
  } else {
    res.writeHead(200, { 'Content-Type': 'text/html' });
    res.end(`
      <html>
        <head>
          <title>Server-Sent Events Demo</title>
        </head>
        <body>
          <h1>Server-Sent Events Demo</h1>
          <p id="message"></p>
          <script>
            const eventSource = new EventSource('/events');
            eventSource.addEventListener('message', (event) => {
              document.getElementById('message').textContent = event.data;
            });
          </script>
        </body>
      </html>
    `);
  }
});

server.listen(3000, () => {
  console.log('Server started on http://localhost:3000');
});

以上代码演示了一个简单的 SSE 服务器，每秒钟向客户端发送当前时间。当客户端访问根路径时，会返回一个 HTML 页面，页面中通过 JavaScript 代码创建了一个 EventSource 对象，监听服务器发送的 message 事件，当事件触发时，更新页面上的消息内容。

客户端代码

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
  <head>
    <title>Server-Sent Events Demo</title>
  </head>
  <body>
    <h1>Server-Sent Events Demo</h1>
    <p id="message"></p>
    <script>
      const eventSource = new EventSource('/events');
      eventSource.addEventListener('message', (event) => {
        document.getElementById('message').textContent = event.data;
      });
    </script>
  </body>
</html>

以上代码演示了一个简单的 SSE 客户端，通过创建一个 EventSource 对象，监听服务器发送的 message 事件，当事件触发时，更新页面上的消息内容。

总结

本文介绍了 Server-Sent Events 技术，包括工作原理、优点和示例代码。SSE 是一种轻量级、简单易用的技术，可以在服务器上 Push 消息到客户端，实现实时更新数据，减少网络流量和服务器负担。SSE 可以在所有现代浏览器中使用，是一种值得掌握的前端技术。

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