WebSocket 是一种全双工通信协议，支持浏览器和服务器之间的实时通信。然而，并非所有浏览器都支持 WebSocket。在这种情况下，我们可以使用 Server-Sent Events（SSE）来实现即时通讯。SSE 是一种浏览器与服务器之间单向通信的技术，它允许服务器向客户端推送数据。在本文中，我们将学习如何使用 SSE 来实现即时通讯。
SSE 的基本概念
SSE 是服务器向客户端推送事件流的一种技术。当服务器有新数据时，它会将数据打包成一个事件，并通过 SSE 发送给客户端。客户端可以通过 JavaScript 监听这些事件，并在事件发生时执行相应的操作。SSE 的数据格式为纯文本，因此它比 WebSocket 更轻量级。
SSE 的使用步骤
步骤一：创建 SSE 连接
在客户端，我们可以使用 EventSource 对象来创建 SSE 连接。 EventSource 是一个 JavaScript API，它允许我们与 SSE 服务器建立连接，并监听事件流。下面是一个创建 SSE 连接的示例代码：
const source = new EventSource('/sse');
这里，我们创建了一个 EventSource 对象，并将其连接到 /sse 路径。服务器将在这个路径上发送 SSE 事件流。
步骤二：监听 SSE 事件
一旦 SSE 连接建立，我们就可以通过 EventSource 对象监听事件流。我们可以使用 onmessage、onopen 和 onerror 等事件监听器来处理 SSE 事件。下面是一个监听 SSE 事件的示例代码：
-- -------------------- ---- ------- ---------------- - ------- -- - ------------------------ -- -------------- - ------- -- - ------------------ -------- ------- -- ------------- - ------- -- - ---------------- ---------- --------- --展开代码
这里，我们使用 onmessage 事件监听器来处理 SSE 事件。当服务器发送事件流时，onmessage 事件将被触发，并将事件数据作为 event.data 属性传递给回调函数。
步骤三：服务器发送 SSE 事件
在服务器端，我们可以使用 Server-Sent Events HTTP 响应头来发送 SSE 事件。下面是一个使用 Server-Sent Events 响应头发送 SSE 事件的示例代码：
const data = 'Hello, World!'; res.writeHead(200, { 'Content-Type': 'text/event-stream', 'Cache-Control': 'no-cache', 'Connection': 'keep-alive' }); res.write(`data: ${data}\n\n`);
这里，我们设置了 Content-Type 响应头为 text/event-stream，这告诉浏览器这是一个 SSE 事件流。我们还设置了 Cache-Control 响应头为 no-cache，这将禁用浏览器缓存 SSE 事件。最后，我们使用 write 方法将 SSE 事件数据发送到客户端。
SSE 的优缺点
优点
- SSE 是基于 HTTP 协议的，因此它可以穿透大多数防火墙和代理服务器。
- SSE 是基于文本的，因此它比 WebSocket 更轻量级。
- SSE 不需要像 WebSocket 一样建立双向通信，因此它更容易实现和维护。
缺点
- SSE 是单向通信的，因此它不能实现双向通信。
- SSE 不能发送二进制数据，因此它不能用于传输大型文件。
- SSE 的兼容性不如 WebSocket。
结论
在不支持 WebSocket 的浏览器中，我们可以使用 SSE 来实现即时通讯。使用 SSE 的步骤包括创建 SSE 连接、监听 SSE 事件和服务器发送 SSE 事件。虽然 SSE 不能实现双向通信和发送二进制数据，但它比 WebSocket 更轻量级，更容易实现和维护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67673e3898e3e1ab1a7694b2
