使用 Server-Sent Events 实现实时通讯应用程序-JavaScript中文网-JavaScript教程资源分享门户

在现代 Web 应用程序中，实时通讯已经成为了必须的功能之一。而 Server-Sent Events（SSE）是一种实现实时通讯的技术，它可以让服务器向客户端发送事件，而客户端则可以通过监听这些事件来实现实时更新。

什么是 Server-Sent Events

Server-Sent Events 是一种基于 HTTP 的实时通讯技术，它允许服务器向客户端发送事件。SSE 使用了单向的持久连接，也就是说一旦建立连接，服务器就可以不断地向客户端发送事件，而客户端则可以通过监听这些事件来实现实时更新。

SSE 的优点包括：

轻量级的协议，只需要使用普通的 HTTP 协议就可以实现。
支持跨域通讯，可以在不同的域之间进行通讯。
支持自定义事件类型和数据格式，可以根据需求自定义事件类型和数据格式。

如何使用 Server-Sent Events

服务端实现

在服务端实现 SSE，需要在 HTTP 响应头中添加 Content-Type: text/event-stream，并且在每个事件之间添加 \n\n 来分隔事件。下面是一个简单的 Node.js 示例代码：

const http = require('http');

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

  setInterval(() => {
    const data = {
      time: new Date().toLocaleTimeString()
    };

    res.write(`event: time\n`);
    res.write(`data: ${JSON.stringify(data)}\n\n`);
  }, 1000);
}).listen(3000);

在上面的代码中，我们使用了 setInterval 来每隔一秒钟向客户端发送一个事件。事件类型为 time，数据格式为一个包含当前时间的 JSON 字符串。

客户端实现

在客户端实现 SSE，需要使用 EventSource 对象来建立连接并监听事件。下面是一个简单的 HTML 示例代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Server-Sent Events Demo</title>
</head>
<body>
  <div id="time"></div>

  <script>
    const eventSource = new EventSource('http://localhost:3000');

    eventSource.addEventListener('time', (event) => {
      const data = JSON.parse(event.data);
      document.getElementById('time').innerHTML = data.time;
    });
  </script>
</body>
</html>

在上面的代码中，我们使用了 EventSource 对象来建立与服务器的连接，并监听事件类型为 time 的事件。当接收到该事件时，我们将事件数据插入到页面中。

总结

Server-Sent Events 是一种基于 HTTP 的实时通讯技术，它可以让服务器向客户端发送事件，而客户端则可以通过监听这些事件来实现实时更新。使用 SSE，我们可以轻松地实现实时通讯应用程序，并且支持跨域通讯和自定义事件类型和数据格式。

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