随着 Web 应用程序的越来越多的交互和 WebAPI 的普及，服务端推送技术已成为 Web 开发中一个非常重要的话题。这篇文章将比较两种服务端推送技术（SSE 和 WebSocket），并探讨它们在不同场景下的应用。
SSE（服务器发送事件）
SSE 全称为 Server-Sent Events，是一种 HTTP2.0 技术，它使得服务器可以在响应客户端请求后，主动向客户端发送数据。由于 SSE 是基于 HTTP2.0 的，所以它可以利用 HTTP2.0 的 PING 功能，优雅且不易出错地实现心跳检测机制。
SSE 代码示例：
<!-- HTML5 中仅需在页面上加上如下的 script-->
<script>
const eventSource = new EventSource('/stream');
eventSource.addEventListener('message', e => {
console.log(e.data);
});
</script>-- -------------------- ---- -------
-- --- ------- -----
----- ---- - ----------------
----------------------- ---- -- -
----- ------ - ------------------- -
--------------- --------------------
---------------- -----------
------------- ------------
---
------------------- ----- ------------
----------------WebSocket
WebSocket 是一种双向通信协议，它使用 HTTP/TCP 的握手来建立连接，并在建立连接后始终保持开放状态，客户端和服务器可以随时相互发送数据。WebSocket 协议的另一大特点是可以压缩数据，这让它在大量数据交换的场景下表现更优秀。
WebSocket 代码示例：
<!-- HTML5 中使用如下的 JavaScript API-->
<script>
const socket = new WebSocket('ws://localhost:8080');
socket.addEventListener('message', e => {
console.log(e.data);
});
</script>// WebSocket 服务端代码示例：
const WebSocket = require('ws');
const server = new WebSocket.Server({
port: 8080
});
server.on('connection', socket => {
socket.send('hello world');
});⚡ SSE 与 WebSocket 的比较
SSE 特点
- 只适合服务器向客户端单向传输数据。
- SSE 的缺点是只支持文本传输，无法传输二进制数据。
- SSE 可以根据 HTTP2.0 的标准实现并优雅地实现心跳检测（Ping），不易出现断连之类的问题。
WebSocket 特点
- 适合双向通信场景。
- WebSocket 可以传输二进制数据。
- WebSocket 可以压缩数据，适合大量数据交换的场景。
💻 应用场景选择
在实际应用中，我们需要根据实际需求选择合适的服务端推送技术。
SSE 应用场景
SSE 适用于处理单向通信的场景，比如实时通知、在线聊天室、股市行情等。
WebSocket 应用场景
- 适用于需要双向通信的场景。
- 需要流式传输大量数据的场景，比如多人游戏、直播等。
- 需要对通信数据的时效性有严格要求的场景，比如远程控制、在线投票等。
📚 总结
本文主要介绍了 SSE 和 WebSocket 两种服务端推送技术，并比较了它们在不同场景下的应用。我们需要根据实际需求来选择合适的服务端推送技术，使得我们的 Web 应用程序能够高效、快速、可靠地完成需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a125a148841e9894d6b7e6