如何使用 Server-sent Events 实现实时通信应用

在 Web 应用中，实时通信是非常常见的需求。传统的方式是使用 WebSocket，但是实现 WebSocket 需要比较复杂的协议和客户端库。而 Server-sent Events（SSE）则提供了一个简单的方式来实现实时通信，它只需要使用纯文本的数据格式，而且大多数现代浏览器都支持 SSE。

SSE 简介

SSE 是一种基于 HTTP 的实时通信协议，它允许服务器向客户端发送事件流。SSE 的数据格式是纯文本，类似于 JSON，但是它使用了一些特殊的格式来表示事件和数据。下面是一个简单的 SSE 数据格式的示例：

event: message
data: Hello, world!

上面的数据表示一个名为 "message" 的事件，它的数据是 "Hello, world!"。在客户端接收到这个数据后，可以根据事件类型来进行相应的处理。

实现 SSE

在服务器端，实现 SSE 非常简单，只需要使用一个 HTTP 响应，并在响应头中添加 "Content-Type: text/event-stream" 和 "Cache-Control: no-cache"，然后使用一个无限循环来不断地向客户端发送数据即可。下面是一个使用 Node.js 实现 SSE 的示例：

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

http.createServer((req, res) => {
  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);
}).listen(3000);

上面的代码会每秒向客户端发送一个名为 "message" 的事件，并将当前时间作为数据。在客户端接收到这个数据后，可以根据事件类型来进行相应的处理。

在客户端，需要使用 JavaScript 来接收 SSE 数据。可以使用 EventSource 对象来接收 SSE 数据，并使用 addEventListener 方法来监听事件。下面是一个使用 JavaScript 实现 SSE 的示例：

const source = new EventSource('/sse');

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

上面的代码会向 "/sse" 发送一个 SSE 请求，并在接收到名为 "message" 的事件时打印事件数据。

应用场景

SSE 可以用于实现各种实时通信应用，比如聊天应用、实时数据监控、推送通知等。下面是一个使用 SSE 实现的简单聊天应用的示例：

// www.javascriptcn.com code example
// 服务器端
const http = require('http');
const qs = require('querystring');

const messages = [];

http.createServer((req, res) => {
  if (req.method === 'POST') {
    let body = '';

    req.on('data', (chunk) => {
      body += chunk;
    });

    req.on('end', () => {
      const message = qs.parse(body).message;

      messages.push(message);

      res.writeHead(302, {
        'Location': '/'
      });

      res.end();
    });
  } else {
    res.writeHead(200, {
      'Content-Type': 'text/html'
    });

    res.write(`
      <html>
        <head>
          <title>Chat</title>
        </head>
        <body>
          <ul>
            ${
              messages.map((message) => {
                return `<li>${message}</li>`;
              }).join('')
            }
          </ul>
          <form method="POST">
            <input type="text" name="message">
            <button type="submit">Send</button>
          </form>
          <script>
            const source = new EventSource('/sse');

            source.addEventListener('message', (event) => {
              const message = event.data;

              const li = document.createElement('li');
              li.textContent = message;

              const ul = document.querySelector('ul');
              ul.appendChild(li);
            });
          </script>
        </body>
      </html>
    `);

    res.end();
  }
}).listen(3000);

// 客户端
const source = new EventSource('/sse');

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

上面的代码实现了一个简单的聊天应用，当用户在表单中输入消息并点击发送按钮时，服务器会将消息存储到一个数组中，并重定向到首页。首页会显示所有的消息，并使用 SSE 向客户端推送新的消息。

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