在Web开发中，常常需要通过网络来实现服务器和客户端的实时通信。两种常用的方式是Server-Sent Events（SSE）和WebSocket。本文将比较这两种技术，阐述它们的优缺点和使用场景。
SSE
SSE 是 Web 应用程序与服务器之间的一种通信协议，它允许服务器实时向客户端推送事件。与 Ajax 不同，SSE 是一种单向通信：服务器向客户端发送数据，但客户端无法向服务器发送数据。SSE 在同一个 HTTP 连接上持续打开一个长连接，直到连接中断或服务器关闭连接。
优点
- SSE 基于 HTTP，无需额外的协议或端口。其可以通过普通的 HTTP 服务器启用而无需任何后端代码。
- SSE 的服务器推送具有自描述性，即每个数据片段都含有可读的元数据，不需要自己编写解析成文本、XML 或 JSON 等。
- SSE 可以平滑处理服务器发送给客户端数据的大小，这使得它适合于大量数据的流式传输。
缺点
- SSE 没有提供像 WebSocket 那样的双向通信，无法从客户端向服务器发送数据。
- SSE 许多空闲连接可能会导致连接数超过服务器的最大同时连接数。
代码示例
下面的代码示例演示了如何使用 SSE 从服务器发送时间戳数据。
服务器端代码：
-- -------------------- ---- ------- ----- ---- - ---------------- ----------------------- ---- -- - ------------------ - --------------- -------------------- ---------------- ----------- ------------- ------------- --- -------------- -- - ---------------- -------------------- -- ------ --展开代码
客户端代码：
const eventSource = new EventSource("/time"); eventSource.onmessage = (event) => { console.log(event.data); };
WebSocket
WebSocket 是一种双向通信协议，允许客户端和服务器之间进行实时数据交换。WebSocket 创建一个持久连接，一旦建立连接，客户端和服务器之间就可以随意传输数据，无需重新连接。
优点
- WebSocket 是真正的双向通信，可以从客户端和服务器之间进行双向数据交换。
- WebSocket 建立一个持久的连接，可以在客户端和服务器之间传递完整的消息，无需拆分数据包。
- 进行较小的数据传输时，WebSocket 的效率比长轮询高得多。
缺点
- WebSocket 基于异步事件驱动，需要适当的异步编程技能，某些情况下可能会增加了服务器开销和复杂性。
代码示例
下面的代码示例演示了如何通过 WebSocket 从服务器发送时间戳数据。
服务器端代码：
-- -------------------- ---- ------- ----- --------- - -------------- ----- ------ - --- ------------------ ----- ---- --- ----------------------- -------- -- - -------------- -- - ----------------------------------- -- ------ ---展开代码
客户端代码：
const socket = new WebSocket('ws://localhost:8080'); socket.onmessage = (event) => { console.log(event.data); };
选择 SSE 还是 WebSocket？
一般来说，如果你需要建立一个实时的消息推送系统，并且需要客户端与服务器之间的双向通信，那么 WebSocket 是更好的选择。如果你只需要从服务器向客户端单向传输数据，则可以使用 SSE。
SSE 最好与的应用场景包括新闻更新、股票报价、天气预报等，而 WebSocket 更适用于在线游戏、聊天应用、实时共享编辑器等需要双向通信的应用。
不管选择 SSE 还是 WebSocket，在开发自己的实时应用时都需要考虑网络稳定性和性能问题。如果你需要构建真正实时的应用，又或者数据的交互量比较大和复杂，那么 WebSocket 可能是更好的选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c15d67314edc268496073f
