SSE 应用详解：从入门到实战-JavaScript中文网-JavaScript教程资源分享门户

什么是 SSE？

SSE（Server-Sent Events）是一种服务器向客户端推送数据的技术，它是 HTML5 中新增的一项 API，用于实现服务器推送事件通知。SSE 采用 HTTP 协议，而不是 WebSocket 协议，因此它的实现相对简单，且不需要建立双向通信通道。

SSE 的优点在于它可以实现服务器向客户端的实时数据推送，而不需要客户端主动向服务器请求数据。这对于需要实时更新数据的应用程序来说非常有用，例如在线聊天室、股票行情、天气预报等。

SSE 的基本原理

SSE 的基本原理是客户端通过一个 HTTP 连接向服务器发送请求，服务器会保持这个连接处于打开状态，直到有新的数据需要推送给客户端。当服务器有新的数据需要推送时，它会通过这个连接向客户端发送一个 HTTP 响应，客户端可以通过监听这个响应来获取服务器推送的数据。

SSE 的请求和响应都是纯文本格式，它们分别以“data:”和“event:”开头。客户端可以通过解析这些文本信息来获取服务器推送的数据。

如何使用 SSE？

服务器端

服务器端需要支持 SSE 的协议，一般来说，常见的 Web 服务器都已经支持 SSE 协议。下面是一个使用 Node.js 实现 SSE 的示例代码：

// www.javascriptcn.com code example
// SSE 服务器端示例代码
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(3000);

这段代码会创建一个 HTTP 服务器，它每隔一秒钟会向客户端发送当前时间戳。

客户端

客户端可以使用 JavaScript 来接收 SSE 的推送数据。下面是一个使用 JavaScript 实现 SSE 的示例代码：

// www.javascriptcn.com code example
<!-- SSE 客户端示例代码 -->
<!DOCTYPE html>
<html>
  <head>
    <title>SSE Demo</title>
  </head>
  <body>
    <div id="output"></div>

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

      source.onmessage = event => {
        output.innerHTML += event.data + '<br>';
      };
    </script>
  </body>
</html>

这段代码会创建一个 SSE 的连接，它会不断地从服务器接收数据，并将数据显示在页面上。

SSE 的高级应用

使用 SSE 实现长轮询

长轮询是一种实现实时通信的方式，它的原理是客户端发送一个请求给服务器，服务器会保持这个请求处于打开状态，直到有新的数据需要推送给客户端。当服务器有新的数据需要推送时，它会将数据作为响应发送给客户端，客户端收到响应后再发送一个新的请求，继续等待服务器的响应。

SSE 可以很方便地实现长轮询，只需要将服务器端的 SSE 连接保持打开状态即可。

使用 SSE 实现实时聊天室

SSE 可以很方便地实现实时聊天室，只需要在服务器端将用户的聊天信息作为 SSE 的数据发送给客户端即可。客户端收到数据后将数据显示在页面上即可。

下面是一个使用 SSE 实现实时聊天室的示例代码：

// www.javascriptcn.com code example
// SSE 服务器端示例代码
const http = require('http');
const fs = require('fs');
const path = require('path');

const server = http.createServer((req, res) => {
  if (req.url === '/') {
    fs.readFile(path.join(__dirname, 'index.html'), (err, data) => {
      if (err) {
        res.writeHead(500);
        res.end('Internal Server Error');
      } else {
        res.writeHead(200, {'Content-Type': 'text/html'});
        res.end(data);
      }
    });
  } else if (req.url === '/sse') {
    // 设置响应头
    res.writeHead(200, {
      'Content-Type': 'text/event-stream',
      'Cache-Control': 'no-cache',
      'Connection': 'keep-alive'
    });

    // 发送数据
    req.on('data', data => {
      server.clients.forEach(client => {
        client.res.write('data: ' + data + '\n\n');
      });
    });

    // 添加客户端
    const client = {
      req,
      res
    };
    server.clients.add(client);

    // 关闭连接时删除客户端
    req.on('close', () => {
      server.clients.delete(client);
    });
  } else {
    res.writeHead(404);
    res.end('Not Found');
  }
});

server.clients = new Set();

server.listen(3000);

这段代码会创建一个 HTTP 服务器，它支持 SSE 协议和长轮询，客户端可以通过 SSE 连接向服务器发送聊天信息。服务器会将聊天信息作为 SSE 的数据发送给所有客户端，客户端收到数据后将数据显示在页面上。

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

SSE 应用详解：从入门到实战