在 Web 开发中，经常需要实时推送消息给客户端，例如实时聊天、实时更新等。传统的 HTTP 请求-响应模式无法满足这些需求，因此出现了 SSE（Server-Sent Events）和服务器推送技术。
SSE
SSE 是一种基于 HTTP 的服务器推送技术，它使用了一种称为“事件流”的方式，将服务器的数据实时推送到客户端。客户端通过创建一个 EventSource 对象，向服务器发送 HTTP 请求，服务器将数据通过“事件流”的形式返回给客户端。客户端通过监听“事件流”中的消息，实现实时更新。
优点
- 简单易用，无需额外的插件或库。
- 支持自定义事件类型和数据格式。
- 可以在客户端和服务器之间建立持久连接，降低网络开销。
- 支持断线重连，保证数据的可靠性。
缺点
- SSE 只能从服务器向客户端推送数据，无法实现双向通信。
- SSE 的兼容性不够好，不支持 IE 和 Edge 浏览器。
- SSE 的消息传输格式只支持纯文本，无法传输二进制数据。
示例代码
const eventSource = new EventSource('/sse');
eventSource.addEventListener('message', event => {
console.log(event.data);
});服务器推送技术
服务器推送技术包括 WebSocket 和长轮询（Long Polling）两种方式。
WebSocket
WebSocket 是一种基于 TCP 协议的双向通信技术，它通过建立一个持久连接，实现服务器和客户端之间的实时通信。客户端和服务器可以随时发送消息，实现实时更新和实时交互。
优点
- 支持双向通信，客户端和服务器可以随时发送消息。
- 数据传输格式支持文本和二进制。
- 可以在客户端和服务器之间建立持久连接，降低网络开销。
- 支持断线重连，保证数据的可靠性。
缺点
- WebSocket 的兼容性不够好，不支持 IE 10 及以下版本。
- WebSocket 的协议较为复杂，需要额外的握手和心跳机制。
- WebSocket 的性能较差，需要额外的服务器资源支持。
示例代码
const socket = new WebSocket('ws://localhost:8080');
socket.onmessage = event => {
console.log(event.data);
};长轮询
长轮询是一种轮询的变种，客户端向服务器发送一个 HTTP 请求，服务器在有数据更新时才返回响应。客户端在收到响应后再次发送请求，实现实时更新。
优点
- 兼容性较好，支持所有现代浏览器。
- 实现简单，无需额外的插件或库。
- 可以在客户端和服务器之间建立持久连接，降低网络开销。
缺点
- 需要频繁的 HTTP 请求和响应，网络开销较大。
- 无法实现双向通信。
- 长轮询的实现较为复杂，需要考虑超时和错误处理等问题。
示例代码
// javascriptcn.com 代码示例
function longPolling() {
fetch('/long-polling')
.then(response => response.json())
.then(data => {
console.log(data);
longPolling();
})
.catch(error => {
console.error(error);
setTimeout(longPolling, 1000);
});
}
longPolling();总结
SSE 和服务器推送技术各有优缺点，选择合适的技术取决于具体的业务需求和技术栈。在选择技术时，需要考虑兼容性、性能、易用性等因素，同时要注意错误处理和安全性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65604284d2f5e1655da70415