使用 SSE 实现推送消息的配合方案
服务器向客户端推送数据是现代互联网应用中非常普遍的操作，特别是 Web 应用中。传统的轮询方式由于频繁地请求服务器，不仅效率低下，还容易造成服务器负载过大的问题。为此，HTML5 提供了一种新的解决方案：服务器发送事件（Server-Sent Events，SSE）。
SSE 是一项用于 Web 应用中推送实时数据的标准化技术，允许服务器向客户端发送事件，从而实现实时的单向消息传输。SSE 基于 HTTP/1.1，由于其轻量级、易于使用和部署的特点，已成为现代 Web 应用中实现实时消息推送的首选技术之一。
本篇文章将介绍如何使用 SSE 实现推送消息的配合方案，在此之前需要您已经掌握 HTML5 及 JavaScript 基础知识。
一、SSE 原理
SSE 基本上是一种服务器推送技术，由客户端通过 HTTP 协议向服务器发送一个请求，并将该请求保持打开状态，服务器端随后可以向客户端发送自定义事件消息，以提供实时更新数据。简单来说，SSE 是通过 HTTP 连接将服务器端的消息实时传送到客户端，而不需要客户端不断地将请求发送给服务器。
二、SSE 简单示例
下面是一个 SSE 实现的简单示例。
首先，我们需要一个 SSE 服务端和一个 SSE 客户端。在服务端上，我们需要根据客户端的请求信息来返回数据。
服务端代码：
-- -------------------- ---- -------
--- ---- - ----------------
-------------------------- ----- ---- -
----------------------------- ------------------- ----------------
------------------------------ ------------
-------------------- -- -
---------------- - - --- --------------------------- - --------
-- ------
----------------在客户端上，我们需要创建一个 SSE 对象，并为其添加事件监听器，以监听数据的到达。
客户端代码：
var source = new EventSource('http://localhost:8888/');
source.addEventListener('message', function (e) {
console.log(e.data);
});通过运行上述代码，客户端会每秒钟接收到服务器端发送的当前时间。
三、SSE 配合方案
在具体的应用场景中，需要考虑各种细节和实际情况。下面将介绍如何与其他前端技术结合使用 SSE。
- SSE + AJAX
如果需要在客户端向服务器发送数据，比如用户在页面上进行了某个操作，需要将结果通知给服务器。这时可以使用 Ajax 技术来向服务器发送 POST 请求，服务器将结果保存后，使用 SSE 将结果通知客户端。
客户端代码：
-- -------------------- ---- -------
--- --- - --- -----------------
---------------- -------- ------
------------------------------------ ----------------------------------
---------------------- - -------- -- -
-- --------------- --- - -- ---------- --- ---- -
----------------- ----- ----------------
-
--
------------------------------ ------ ------ --- ------------服务端代码：
-- -------------------- ---- -------
--- ---- - ----------------
-------------------------- ----- ---- -
--- ---- - ---
------------------------
-------------- -------- ------- -
---- -- ------
---
------------- -------- -- -
------------------ ---------------- ------------ -----------------
------------- ----- ----------------
-- ------ ------- ----- ---
---------------- - - --------------------- ------ ------ --- ----------- - --------
---
----------------可以看到，服务端使用 SSE 将结果发送给客户端时，需要先发送一个空白行，以便让客户端知道 SSE 数据的起始点。
- SSE + WebSockets
另外一个常见的应用场景是将 SSE 与 WebSocket 结合使用，以实现双向消息传输。
WebSocket 是一种双向通信协议，客户端和服务器端可以随时发送消息。WebSocket 具有较快的速度、较低的延迟和较高的可靠性，适用于双向实时消息传输。但是，WebSocket 目前并不是所有浏览器都支持，比如 IE9 及以下版本和某些移动设备上，需要考虑兼容性。
这时候可以使用 SSE 先在客户端和服务器端建立一条 HTTP 连接，然后使用 WebSocket 在该连接上进行双向通信。
客户端代码：
-- -------------------- ---- -------
--- ------ - --- -----------------------------------------
---------------------------------- -------- --- -
--------------------- --- -------- - - --------
---
--- ------ - --- -------------------------------------------
------------------------------- -------- ------- -
---------------------- ---------- ---------------
---
---------------------------------- -------- ------- -
--------------------- --------- -------- - - ------------
---服务端代码：
-- -------------------- ---- -------
--- ---- - ----------------
--- --------------- - ----------------------------
--- --- - ---------------
--- ------ - -------------------------- ----- ---- -
--- --------- - -------------------
-- ------------------- --- ------- -
-- --- -------
- ---- -- ------------------- --- ------------- -
-- --------- -------
-
---
--- -------- - --- -----------------
----------- -------
---------------------- -----
---
---------------------- -------- --------- -
--- ---------- - -----------------
------------------------ -------- --------- -
-- ------------- --- ------- -
-- ------ --------- -------
-
---
---------------------- -------- ------------ ------------ -
-- ------ --------- -----
---
---
--------------------通过运行上面的代码，服务端会创建一个 HTTP 服务器，监听端口 8888。到目前为止，我们已经完成了 SSE 和其他技术的配合使用，实现了实时的单向或双向消息传输。
四、总结
本文介绍了使用 SSE 实现推送消息的配合方案，SSE 能够使实时数据的传输更加简单、高效，适用于 Web 应用中的实时更新场景。通过与其他前端技术的结合使用，可以实现更多复杂的应用场景。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64fee8ed95b1f8cacdd9590b