在现代 Web 应用中，实时通信已成为必不可少的功能。Server-sent Events 和 WebSockets 是两种常见的实现方式。本文将介绍它们的区别和如何选择合适的方法。
Server-sent Events
Server-sent Events（SSE）是一种基于 HTTP 的实时通信方式。它使用单向连接，即客户端向服务器发送一次请求，服务器在连接保持打开的情况下，发送事件流给客户端。
优点
- SSE 使用标准的 HTTP 协议，可以穿透防火墙和代理服务器，不需要额外的配置。
- SSE 只使用一个 TCP 连接，相比 WebSockets 节省了资源。
- SSE 支持自定义事件类型和数据，可以更灵活地实现业务需求。
缺点
- SSE 只支持文本数据，不能发送二进制数据。
- SSE 只支持单向通信，即服务器向客户端发送数据，不能反向通信。
示例代码
客户端代码：
const eventSource = new EventSource('/sse');
eventSource.addEventListener('message', (event) => {
console.log(event.data);
});服务端代码（Node.js）：
-- -------------------- ---- -------
----- ---- - ----------------
----------------------- ---- -- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
-------------- -- -
---------------- ----- ----------------------------
-- ------
----------------WebSockets
WebSockets 是一种基于 TCP 的双向通信方式。它使用 WebSocket 协议，在客户端和服务器之间建立双向连接，可以实现实时通信。
优点
- WebSockets 支持双向通信，可以实现客户端和服务器之间的实时交互。
- WebSockets 支持二进制数据，可以发送任意类型的数据。
- WebSockets 可以在客户端和服务器之间进行心跳检测，保持连接的活性。
缺点
- WebSockets 需要额外的协议支持，不能穿透防火墙和代理服务器，需要额外的配置。
- WebSockets 使用的是 TCP 连接，相比 SSE 消耗更多的资源。
示例代码
客户端代码：
-- -------------------- ---- ------- ----- ------ - --- --------------------------------- ------------------------------- -- -- - ------------------------- --- ---------------------------------- ------- -- - ------------------------ --- -------------------------------- -- -- - ---------------------------- ---
服务端代码（Node.js）：
-- -------------------- ---- -------
----- --------- - --------------
----- ------ - --- ------------------ ----- ---- ---
----------------------- -------- -- -
-------------- -- -
--------------- ----------------------
-- ------
---如何选择合适的方法
在选择实时通信方式时，需要考虑以下因素：
- 通信的方向：如果只需要服务器向客户端发送数据，可以选择 SSE。如果需要客户端和服务器之间进行实时交互，需要选择 WebSockets。
- 数据类型：如果需要发送二进制数据，需要选择 WebSockets。如果只需要发送文本数据，可以选择 SSE。
- 网络环境：如果需要穿透防火墙和代理服务器，需要选择 SSE。如果可以进行额外的配置，可以选择 WebSockets。
- 资源消耗：如果需要节省资源，可以选择 SSE。如果需要更高的实时性和交互性，需要选择 WebSockets。
综上所述，选择合适的实时通信方式需要根据具体的需求进行判断。如果只需要服务器向客户端发送数据，且可以穿透防火墙和代理服务器，可以选择 SSE。如果需要客户端和服务器之间进行实时交互，需要发送二进制数据，或者需要更高的实时性和交互性，需要选择 WebSockets。
总结
本文介绍了 Server-sent Events 和 WebSockets 两种实时通信方式的优缺点和适用场景，并提供了示例代码。在选择实时通信方式时，需要考虑通信的方向、数据类型、网络环境和资源消耗等因素，进行判断和选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6516357f95b1f8cacde89181