使用 Server-sent Events 实现 WebSocket 协议兼容
随着 Web 技术的发展，WebSocket 协议已经被广泛应用于前后端实时通讯，但是有些环境下，比如浏览器不支持 WebSocket 协议或者防火墙对 WebSocket 的支持存在问题，这时我们可以使用 Server-sent Events 技术来实现 WebSocket 协议的兼容。
Server-sent Events 是 HTML5 规范中新增的一种实时通讯技术，它可以让服务器推送事件到客户端，而客户端通过 EventSource API 来监听这些事件。相对于 WebSocket，Server-sent Events 更加轻量级，且兼容性更好。
下面，我们通过一个示例介绍如何使用 Server-sent Events 实现 WebSocket 协议的兼容。
- 服务端实现
我们使用 Node.js 来作为服务端，使用 Express 框架来搭建一个简单的 Web 服务。代码如下：
-- -------------------- ---- -------
----- ------- - -------------------
----- --- - ----------
----------------------------------
--------------- ------------- ---- -
----------------------------- ---------------------
------------------------------ ------------
--------------------------- --------------
-------------- -- -
----- ---- - -
-------- ------------ ----- --------
--
---------------- ------------------------------
-- ------
---在上述代码中，我们使用 Express 框架来创建一个 Web 服务。我们的服务将会提供一个 /sse 的路由用于提供 Server-sent Events。在 /sse 路由下，我们设置头部信息以确保能够接收到正确的数据，然后使用 setInterval 来定时向客户端推送事件。
- 客户端实现
我们还是通过 JavaScript 来实现客户端代码。我们可以通过 EventSource API 来监听 Server-sent Events。代码如下：
const source = new EventSource('/sse');
source.onmessage = function(event) {
const data = JSON.parse(event.data);
console.log(data);
};在上述代码中，我们通过 EventSource API 来监听 /sse 路由的 Server-sent Events。每次收到事件时，我们使用 JSON.parse 来解析事件的数据。
- 效果演示
在上述服务端和客户端代码都完成后，我们可以通过浏览器来访问我们搭建的 Web 服务。在控制台中，我们可以看到每秒钟会输出一条 Server-sent Event message。
- 结论
通过上述示例，我们可以了解到使用 Server-sent Events 可以实现 WebSocket 协议的兼容。在对 WebSocket 无法使用的环境下，比如浏览器不支持 WebSocket 或者防火墙阻断了 WebSocket，我们可以使用 Server-sent Events 来进行通讯，以达到实时通讯的目的。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67480f6a5883fc5ebff3044a