在 JavaScript 中使用 Server-Sent Events 构建实时通信应用-JavaScript中文网-JavaScript教程资源分享门户

随着互联网的发展，实时通信已经成为了许多 Web 应用的必备功能。而在前端开发中，我们通常使用 WebSocket 或者 Ajax 长轮询等技术来实现实时通信。但是，这些技术都有各自的缺点，比如 WebSocket 需要建立长连接，而 Ajax 长轮询则会带来较大的服务器压力。那么，有没有一种更优秀的实时通信技术呢？答案是肯定的，那就是 Server-Sent Events（简称 SSE）。

Server-Sent Events 简介

Server-Sent Events 是一种基于 HTTP 协议的服务器推送技术，它允许服务器向客户端发送事件流（event stream），客户端通过监听这些事件流来实现实时通信。相比于 WebSocket 和 Ajax 长轮询，SSE 具有以下优点：

不需要建立长连接，只需要普通的 HTTP 连接即可。
服务器可以主动向客户端推送数据，减少了客户端请求的次数和服务器的压力。
SSE 支持自定义事件类型和数据格式，具有更高的灵活性。

SSE 的使用

在 JavaScript 中使用 SSE 构建实时通信应用，主要分为以下两个步骤：

1. 建立 SSE 连接

要建立 SSE 连接，我们需要使用 EventSource 对象。EventSource 对象是 HTML5 中新增的一个 API，它用于接收服务器推送的事件流。使用 EventSource 对象建立 SSE 连接的代码如下：

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

上面的代码中，我们将 EventSource 对象实例化，并将 SSE 的地址设置为 /sse。这里的地址可以是任意一个 HTTP 地址，只要服务器能够正确地处理 SSE 请求即可。

2. 监听事件流

建立 SSE 连接后，我们需要监听服务器推送的事件流。服务器推送的事件流包含一个或多个事件，每个事件都由一个事件类型和一个数据组成。我们可以通过 EventSource 对象的 onmessage 和 onerror 事件来监听事件流的到达和错误信息。代码如下：

eventSource.onmessage = (event) => {
  const data = JSON.parse(event.data);
  // 处理事件数据
};

eventSource.onerror = (event) => {
  // 处理错误信息
};

上面的代码中，我们通过 onmessage 事件监听事件流的到达，并使用 JSON.parse 方法将事件数据转换为 JavaScript 对象。在实际应用中，我们可以根据事件类型来处理不同的事件数据。

示例代码

下面是一个使用 SSE 实现实时消息推送的示例代码：

服务器端代码（使用 Node.js 和 Express 框架）

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

app.use(express.static('public'));

app.get('/sse', (req, res) => {
  res.set({
    'Content-Type': 'text/event-stream',
    'Cache-Control': 'no-cache',
    'Connection': 'keep-alive'
  });

  setInterval(() => {
    const data = {
      type: 'message',
      text: 'Hello, SSE!'
    };

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

app.listen(3000, () => {
  console.log('Server is running at http://localhost:3000');
});

客户端代码

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>SSE Demo</title>
</head>
<body>
  <ul id="messages"></ul>

  <script>
    const eventSource = new EventSource('/sse');

    eventSource.onmessage = (event) => {
      const data = JSON.parse(event.data);

      if (data.type === 'message') {
        const message = document.createElement('li');
        message.textContent = data.text;
        document.getElementById('messages').appendChild(message);
      }
    };

    eventSource.onerror = (event) => {
      console.error('SSE error:', event);
    };
  </script>
</body>
</html>

上面的代码中，我们使用 Express 框架搭建了一个 SSE 服务器，每隔一秒钟向客户端推送一条消息。客户端使用 EventSource 对象建立 SSE 连接，并监听服务器推送的消息，将消息显示在页面上。

总结

本文介绍了在 JavaScript 中使用 Server-Sent Events 构建实时通信应用的方法和示例代码。相比于 WebSocket 和 Ajax 长轮询，SSE 具有更优秀的性能和灵活性，可以满足大部分实时通信场景的需求。在实际应用中，我们可以根据具体的业务需求来选择合适的实时通信技术。

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