在大多数 Web 应用中，实时通信已经成为了必须的一部分。这种通信可以在不重新加载页面的情况下更新页面上的数据。如果你的应用程序需要与后端建立实时连接，你需要了解 Websocket 和 SSE。Websocket 是一种双向通信协议，而 SSE 是一种单向通信协议。本文将介绍如何使用 Websocket 和 SSE 实现高实时性应用节点间通信。
Websocket
Websocket 是一种在 Web 应用程序和服务器之间全双工通信的协议。它提供了一个长期的 TCP 连接，用于通过一个套接字进行通信。这种通信模型可以在客户端和服务器之间传输数据并保持连接打开状态。
Websocket 使用起来非常简单。以下是一个简单的例子：
----- ------ - --- -------------------------------------- ------------------------------- -------- ------- - ------------------ ---------- --- ---------------------------------- -------- ------- - ----- ------------ - ----------- -------------------------- ---
首先，我们创建一个新的 WebSocket 对象。这个对象需要传入一个 URL，这个 URL 包含了服务器的地址以及连接端点的路径。在这个例子中，我们使用 wss 协议来建立一个加密的连接。
一旦我们建立了一个连接，我们需要监听 open 事件来知道连接已经成功建立。在此之后，我们可以通过调用 send() 来向服务器发送数据。
当服务器想发送一条消息时，它会将这条消息推送到客户端，并触发 message 事件。我们可以监听这个事件来读取收到的消息。
以上只是一个简单的例子，实际上 Websocket 还提供了非常多的其他特性，比如二进制数据的传输、心跳包的管理、断线重连等。如果你想深入学习 Websocket 的使用，推荐你查看 MDN 的 Websocket 文档。
SSE
SSE（服务器发送事件）是另一种实现实时通信的协议。不同于 Websocket，SSE 是一种单向通信协议，只支持从服务器到客户端的通信。但是，它具有与 Websocket 相似的 API 和开发体验。SSE 是通过 HTTP 的长轮询或者即将推送来实现的。与传统的 Ajax 请求不同，SSE 允许服务器推送数据到客户端，这依赖于浏览器中的 EventSource API。
下面是一个使用 SSE 的简单示例：
----- ----------- - --- ------------------------ --------------------------------------- -------- ------- - ------------------------ ---
首先，我们创建了一个 EventSource 对象，并将它的 URL 设置为 /updates。在这个例子中，我们假设在服务器上，有一个长期运行的进程在生产数据，并将这些数据推送到 /updates 的通道上。
当服务器将数据推送到客户端时，浏览器会触发 message 事件，并传递数据作为事件的 data 属性。
需要注意的是，SSE 比 Websocket 更简单。因此，SSE 通常被用于持久化连接和较小的消息量。
组合使用
Websocket 和 SSE 都是可选的实时通信方案。但是，它们也可以一起使用，以便按需传输数据。具体来说，Websocket 可以用于传输大量的数据，而 SSE 可以用于传输较少的数据。
以下是一个使用 Websocket 和 SSE 的示例：
-- -- --------- ---------------- -------- --------- - --- ----- ------ - ---------------------------------- -- -- --- ---------- ----- ----------- - --- ------------------------ --------------------------------------- -------- ------- - ------------------------ --- -- --------------------- -------------------- ------ ---------- -- ------------ -------------------- -------- ------ - ------------------ ---
在这个例子中，我们首先使用 Socket.io 连接到服务器。它可以同时支持 Websocket 和 SSE，这样我们就可以根据需要选择使用哪一种通信协议。
我们还使用 SSE 来订阅 /updates 的事件。当我们收到来自服务器的消息时，我们可以将这些消息输出到控制台。
当我们连接到服务器时，我们可以使用 emit() 方法将一条消息发送给服务器。
最后，我们监听服务器发送的 message 事件，以便在客户端收到通知时进行处理。
结论
通过本文，你应该已经对 Websocket 和 SSE 的工作方式有了一个基础的了解。如果你要实现一个实时的 Web 应用程序，只使用其中一种协议可能并不足以满足你的需求。我们可以通过组合使用两种协议来获得更好的性能和可靠性。
其中，Websocket 是一个双向通信协议，支持传输大量的数据。相比之下，SSE 是一个单向通信协议，更适合传输较小的数据。因此，我们可以根据需要来选择使用它们。
最后，推荐你阅读 MDN 的 Websocket 和 SSE 文档，以便更加深入地了解这些协议。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6714a3b4ad1e889fe214c64c