如何使用 SSE 实现 WebSocket 的替代方案-JavaScript中文网-JavaScript教程资源分享门户

WebSocket 是一种在客户端和服务器之间建立持久性连接的通信协议。它允许双向通信，支持实时数据传输和大量的并发连接。但是，WebSocket 并不是所有浏览器都支持，而且在某些情况下，它可能会被防火墙屏蔽。为了解决这些问题，我们可以使用 SSE（Server-Sent Events）作为 WebSocket 的替代方案。

SSE 的概述

SSE 是一种基于 HTTP 的协议，用于在服务器和客户端之间实现服务器推送。使用 SSE，服务器可以向客户端发送实时数据，而客户端只需要通过一个 HTTP 连接来接收这些数据。与 WebSocket 不同的是，SSE 是单向通信，只能从服务器向客户端发送数据。

SSE 的优点包括：

SSE 可以通过标准的 HTTP 连接进行通信，不需要特殊的协议或端口。
SSE 可以在支持 HTTP 的所有浏览器中使用，包括移动设备。
SSE 支持自动重连，当连接中断时，客户端会自动尝试重新连接。

使用 SSE 实现服务器推送

要使用 SSE，我们需要在服务器端实现一个 SSE 端点，用于向客户端发送数据。下面是一个使用 Node.js 和 Express 实现 SSE 的示例代码：

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

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

  const data = 'Hello, world!';
  res.write(`data: ${data}\n\n`);

  setInterval(() => {
    const now = new Date();
    res.write(`data: ${now.toISOString()}\n\n`);
  }, 1000);
});

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

在上面的代码中，我们通过设置响应头来指定 SSE 的格式。然后，我们向客户端发送一条初始数据，并使用 setInterval 定时向客户端发送当前时间。注意，每条数据都需要以“data:”开头，并在最后加上两个换行符，表示数据的结束。

使用 SSE 接收服务器推送

在客户端，我们可以使用 EventSource 对象来接收 SSE 数据。下面是一个使用 JavaScript 实现 SSE 的示例代码：

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

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

在上面的代码中，我们创建了一个 EventSource 对象，并指定 SSE 的端点。然后，我们使用 addEventListener 监听 message 事件，并在事件处理程序中打印出接收到的数据。

总结

使用 SSE 可以方便地实现服务器推送，从而实现实时数据传输。虽然它不能像 WebSocket 那样支持双向通信，但它具有更广泛的浏览器支持和更简单的实现方式。在实际开发中，我们可以根据项目的需求选择合适的通信方式。

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