在现代 Web 开发中，常常需要实现实时推送数据和实时传输数据的功能。而 SSE（Server-Sent Events）和 WebSocket 是实现这两种功能的两个重要技术。本文将介绍如何使用 SSE 与 WebSocket 组合实现数据推送和数据传输的功能，并提供相应的示例代码。
什么是 SSE
SSE 是一种基于 HTTP 协议的服务器推送技术。它允许服务器向客户端实时推送数据，客户端也可以通过 SSE 接收服务器推送的数据。SSE 的优点是实现简单、轻量级，不需要任何额外的协议或库的支持。
在使用 SSE 时，客户端通过 EventSource API 和服务器建立连接，服务器向客户端发送一系列事件，每个事件包含一个特定的消息。客户端通过监听事件，处理服务器推送的消息。
什么是 WebSocket
WebSocket 是一种双向通信协议，可以在客户端和服务器之间建立持久连接，实现实时数据传输。WebSocket 的优点是实时性好、传输效率高，支持双向通信和二进制数据传输。
在使用 WebSocket 时，客户端和服务器握手建立连接后，可以通过 send() 和 onmessage() 方法实现双向通信。客户端可以向服务器发送数据，并处理服务器返回的数据。
如何组合使用 SSE 和 WebSocket
SSE 和 WebSocket 本身不冲突，可以一同使用。我们可以使用 SSE 实现数据推送的功能，使用 WebSocket 实现数据传输的功能。
具体操作如下：
- 使用 SSE 向客户端推送数据
- 客户端接收 SSE 推送的数据，并将数据发送给服务器
- 服务器接收到客户端发送的数据，将数据广播给所有客户端
- 所有客户端接收服务器广播的数据
下面是具体的实现方法。
服务器端代码（Node.js 实现）
-- -------------------- ---- -------
----- ---- - ----------------
----- --------- - --------------
----- ---------------- - ---
-- --- ----
----------------------- ---- -- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
----- -------- - -----------
-------------------------- - ----
-- --------------
--------------- -- -- -
------ ---------------------------
---
----------------
-- --------- ----
----- -------- - --- ------------------ ----- ---- ---
------------------------- ---- -- -
---------------- --------- -- -
-- ----------
--------------------------------- -- -
-- ------------------ --- --------------- -
---------------------
-
---
---
---
-- - --- -------- ---------
--------------------------------------- ------- -
------ --------- -- -
------------------------------------------------ -- -
--------------------------------------- -----------------
---
-
---以上代码实现了一个 HTTP 服务器和一个 WebSocket 服务器。HTTP 服务器使用 SSE 向客户端推送数据，WebSocket 服务器接收客户端的数据，并广播数据给所有客户端。send() 方法将 SSE 推送的数据转发给 WebSocket。
客户端代码
SSE 接收数据并发送给 WebSocket
const sse = new EventSource('http://localhost:3000');
const ws = new WebSocket('ws://localhost:8080');
sse.addEventListener('message', (event) => {
ws.send(event.data); // 发送 SSE 推送的数据给 WebSocket
});以上代码实现了一个 SSE 客户端和一个 WebSocket 客户端。SSE 客户端接收服务器推送的数据，并将数据发送给 WebSocket。
WebSocket 接收数据
const ws = new WebSocket('ws://localhost:8080');
ws.addEventListener('message', (event) => {
const data = JSON.parse(event.data); // 假设数据为 JSON 格式
console.log(data); // 处理接收到的数据
});以上代码实现了一个 WebSocket 客户端，接收服务器广播的数据，并处理数据。
总结
本文介绍了如何使用 SSE 与 WebSocket 组合实现数据推送和数据传输的功能，并提供了相应的示例代码。实际应用中，可以根据具体需求选择 SSE 和 WebSocket 的组合方式，来实现不同的实时功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a2290f48841e9894e709fe