随着 Web 应用的不断发展，实时通信已经成为了一个核心需求。WebSockets 和 Server-Sent Events（SSE）已成为实现这一目标的两种流行技术。在本文中，我们将介绍这两种技术，并提供详细的指导和示例代码，帮助您了解如何在前端实现实时通信。
WebSocket
WebSocket 是一种双向通信协议，它可以在客户端和服务器之间建立一条持久连接。这意味着一旦连接建立，客户端和服务器之间可以随时相互发送消息。与 HTTP 不同，WebSocket 不会发送 HTTP header。WebSocket 通过“握手”过程建立连接，之后使用一种基于帧的机制来发送消息。
WebSocket 客户端
客户端通过实例化一个 WebSocket 对象来建立连接。在我们的示例中，我们将监听连接打开和消息事件。
-- -------------------- ---- ------- ----- ------ - --- -------------------------------------- -- -------- ------------------------------- ----- -- - ------------------------- --- -- ------ ---------------------------------- ----- -- - ---------------------- ---------------- --- -- ---- ------------------- ----------
注意，我们在调用 send 方法之前检查了连接是否已经打开。如果尝试在连接未建立之前发送消息，它将会失败。
WebSocket 服务器
在服务器端，我们需要提供一个 WebSocket 终端来监听连接。在 Node.js 中，我们可以使用 ws 模块。
-- -------------------- ---- -------
----- --------- - --------------
----- ------ - --- ------------------ ----- ---- ---
----------------------- ------ -- -
------------------- ------------
-- ----
------------------- ----------
-- ------
-------------------- ------- -- -
---------------------- -------------
---
---Server-Sent Events
Server-Sent Events（SSE）是一种只读通信协议，它允许服务器向客户端发送消息。与 WebSocket 不同，SSE 是基于 HTTP 的，它使用一个长轮询（long-polling）的机制，允许客户端保持连接并接收来自服务器的不间断数据流。
SSE 客户端
客户端通过实例化一个 EventSource 对象来监听来自服务器的消息。在我们的示例中，我们将监听连接打开和消息事件。使用 SSE，我们可以通过将数据作为多行文本发送来发送消息，每行文本以“\n”为分隔符。
-- -------------------- ---- ------- ----- ------ - --- ------------------------------------------ -- -------- ------------------------------- ----- -- - ------------------------- --- -- ------ ---------------------------------- ----- -- - ---------------------- ---------------- ---
SSE 服务器
在服务器端，我们需要提供一个 SSE 终端来发送数据流。在 Node.js 中，我们可以使用 sse-express 模块。
-- -------------------- ---- -------
----- ------- - -------------------
----- ---------- - -----------------------
----- --- - ----------
-- --- --
------------------ ------------- ----- ---- -- -
-- -----
-------------- ------ --------------
-- ------
----- ---------- - -------------- -- -
-------------- --------------------
-- ------
-- ---------
--------------- -- -- -
--------------------------
---
---
---------------- -- -- -
------------------- ----------
---注意，我们在 SSE 路由上使用了 sseExpress 中间件函数，这样就可以向客户端发送数据流。我们还使用了 req.on('close') 事件监听器来检查客户端是否关闭连接，以便在这种情况下停止发送消息。
WebSocket vs. Server-Sent Events
WebSocket 和 Server-Sent Events 都可以用于实现实时通信，但它们适用于不同的用例。WebSocket 适用于双向通信，例如在线游戏或聊天应用。Server-Sent Events 则适用于只读通信，例如监视数据源或传送事件通知。
结论
本文介绍了 WebSocket 和 Server-Sent Events，提供了详细的指导和示例代码，帮助您了解如何在前端实现实时通信。使用这些技术，您可以轻松地实现实时应用程序并提高用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66faf1fe4471362601536827