前言
消息推送是现代网络应用中常见的一种技术，能够让服务器主动向客户端发送消息，而不需要客户端不断地轮询。这种技术对于实时性要求高的应用非常有用，比如聊天室、股票行情等。本文将介绍两种常用的消息推送技术：SSE 和 HTML5 Push API，并对它们的优劣进行分析。
SSE（Server-Sent Events）
SSE 是一种基于 HTTP 协议的服务器推送技术，它允许服务器向客户端发送单向的、实时的、异步的消息。SSE 的实现需要使用到 EventSource 对象，它能够建立一个到服务器的连接，并接收服务器发送的消息。
优点
1. 实时性高
SSE 的消息推送是单向的，服务器可以随时向客户端发送消息，客户端不需要发起请求。这样可以保证消息的实时性，而不需要客户端不停地轮询。
2. 简单易用
SSE 的实现比较简单，只需要使用 EventSource 对象建立连接，并监听 message 事件即可。而且 SSE 不需要额外的插件或框架支持，浏览器原生支持该技术。
3. 兼容性好
SSE 技术已经被所有现代浏览器（包括 IE11）所支持，而且不需要额外的插件或框架支持。
缺点
1. 兼容性问题
虽然 SSE 技术已经被所有现代浏览器所支持，但是在 IE11 之前的浏览器并不支持该技术。如果需要支持这些老旧浏览器，就需要使用其他技术，比如长轮询。
2. 连接不稳定
SSE 的连接是基于 HTTP 的，如果网络连接不稳定，可能会导致连接中断，从而无法接收到服务器发送的消息。
3. 无法进行双向通信
SSE 只支持服务器向客户端发送消息，不支持客户端向服务器发送消息。如果需要进行双向通信，需要使用其他技术，比如 WebSocket。
示例代码
下面是一个使用 SSE 技术进行消息推送的示例代码：
<script>
const source = new EventSource('/stream');
source.addEventListener('message', (event) => {
console.log(event.data);
});
</script>HTML5 Push API
HTML5 Push API 是一种浏览器端推送技术，它能够让服务器向客户端发送消息，即使客户端没有打开网页。HTML5 Push API 的实现需要使用到 Service Worker 和 Push API。
优点
1. 支持离线推送
HTML5 Push API 能够在客户端没有打开网页的情况下接收到推送消息，这样可以保证消息的可靠性。
2. 支持发送富媒体消息
HTML5 Push API 支持发送富媒体消息，比如图片、音频、视频等。
3. 支持双向通信
HTML5 Push API 支持客户端向服务器发送消息，这样可以实现双向通信。
缺点
1. 实现复杂
HTML5 Push API 的实现比较复杂，需要使用到 Service Worker 和 Push API。而且 Service Worker 的兼容性也不是很好，只有现代浏览器才支持该技术。
2. 兼容性问题
HTML5 Push API 技术只能在支持 Service Worker 的现代浏览器中使用，如果需要支持老旧浏览器，就需要使用其他技术。
3. 需要 HTTPS 协议支持
使用 HTML5 Push API 技术需要使用 HTTPS 协议，如果网站没有启用 HTTPS，就无法使用该技术。
示例代码
下面是一个使用 HTML5 Push API 进行消息推送的示例代码：
self.addEventListener('push', (event) => {
const title = 'Push Notification';
const options = {
body: event.data.text(),
};
event.waitUntil(self.registration.showNotification(title, options));
});总结
SSE 和 HTML5 Push API 都是常用的消息推送技术，它们各有优点和缺点。如果应用对实时性要求比较高，可以使用 SSE 技术；如果需要支持离线推送、富媒体消息和双向通信，可以使用 HTML5 Push API 技术。在选择技术时，需要根据应用的实际需求进行选择。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65791fe5d2f5e1655d319b40