前端技术的发展让我们可以用越来越高效的方式传递消息。SSE 和 Push Notification 技术就是两种常用的前端消息传递技术，它们都可以实时地将消息推送给客户端。但是，它们的实现和使用方式有所不同。
SSE
服务器发送事件（Server-Sent Events，简称 SSE）是一种跨浏览器的、基于 HTTP 的实时通信技术。使用 SSE，服务器可以单向地向客户端推送消息。客户端通过监听服务器的 SSE 流，可以实现实时更新数据、显示通知等功能。
实现方式
SSE 使用 HTML5 规范中的 EventSource 对象实现。使用 SSE 的主要步骤如下：
- 服务器使用
Content-Type: text/event-stream指定 MIME 类型，告诉客户端该响应是 SSE 流。 - 服务器向客户端发送多个消息，这些消息使用特定的格式发送。
- 客户端使用 EventSource 对象监听服务器的 SSE 流，当事件发生时，浏览器将自动接收和处理通知。
示例代码
服务端代码：
-- -------------------- ---- -------
--- ---- - ----------------
------------------------------- ---- -
----------------------------- ---------------------
------------------------------ ------------
-- ---- - ------- ----- - -------
---------------------- -
---------------- - - ---------- - --------
-- ------
----------------客户端代码：
var eventSource = new EventSource('/sse');
eventSource.onmessage = function(event) {
console.log('Received message: ' + event.data);
};学习和指导意义
使用 SSE 可以实现比 Ajax 更高效、更实时的数据传递。SSE 的数据传输是单向的，这也就意味着 SSE 不适用于需要客户端与服务器之间进行实时交互的应用。SSE 的实现相对简单，可以自己搭建一套 SSE 服务器和客户端代码。SSE 的缺点是不支持跨域访问，所以服务器必须和客户端在同一个域名下。
Push Notification
Push Notification 技术是一种通过推送消息来将实时信息通知到客户端的技术。使用 Push Notification，开发者可以向客户端发送通知，即使页面没有被打开也可以在后台推送消息。
实现方式
浏览器通过使用 Web Push API 注册一个 Service Worker，然后网站服务器将消息发送给浏览器推送服务。如果客户端的浏览器支持推送服务，那么当服务器有新消息时，推送服务就会向客户端发送通知并显示通知栏。
示例代码
服务端代码：
-- -------------------- ---- -------
--- ------- - --------------------
--- ---------------- - -
--------- ------------------------------------------------------
----- -
------- ------- --
----- --------- -
-
--
------------------------
--------------------------
------------
------------
--
--- ------- - ----- -- - ----------
------------------------------------------ --------
---------------- -
----------------- ------------ --------
---学习和指导意义
Web Push 技术可以让开发者在用户不打开网站的情况下向他们发送消息。这种方式可以减少用户在第一时间打开网站的需求，提高用户体验。Web Push 的实现需要较高的技术水平，所以对于初级开发者，可以使用像 Pusher 这样的第三方服务。
对比与结论
SSE 和 Push Notification 技术都可以实现实时消息通知功能，但它们在实现方式和适用场景上有所不同。
SSE 适用于不需要服务器交互的实时通讯场景，它的实现简单但功能有限。
Push Notification 技术适用于在浏览器关闭的情况下向用户发送通知，它的实现需要较高的技术水平。
因此，在实现实时通讯功能时，可以根据应用场景的不同，选择 SSE 或 Push Notification 技术。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674d06d7a336082f2547bbcd