什么是 Server Push 功能？
Server Push 又称为 HTTP/2 Push，是一种主动向客户端推送资源的技术。在传统的 HTTP 协议中，客户端需要发起请求才能获取资源，而 Server Push 则能够在客户端需要之前就将资源推送给客户端，提升页面加载速度和性能。
如何借助 Server-sent Events 实现 Server Push？
Server-sent Events（SSE）是一种基于 HTTP 的服务器向客户端单向推送数据的技术。借助 SSE，前端可以方便地实现 Server Push 功能。
以下是实现 Server Push 的详细步骤：
- 在服务器端，创建一个 SSE 路由处理器。
-- -------------------- ---- -------
----- ------- - ------------------
----- --- - ---------
--------------- ------------- ---- -
---------
--------------- --------------------
---------------- -----------
------------- -------------
--
---------------------- -
----- ---- - --- ---------------------------
---------------- -------------
-- -----
--- 在前端，创建一个 EventSource 对象，连接到 SSE 服务器路由。
const source = new EventSource('/sse')
source.onmessage = function(event) {
console.log(event.data)
}- 在 EventSource 对象接收到服务器推送的数据时，进行相应处理。
这里我们简单地将服务器推送的时间字符串打印到控制台。
示例代码
服务器端代码
-- -------------------- ---- -------
----- ------- - ------------------
----- --- - ---------
--------------- ------------- ---- -
---------
--------------- --------------------
---------------- -----------
------------- -------------
--
---------------------- -
----- ---- - --- ---------------------------
---------------- -------------
-- -----
--
---------------- ---------- -
------------------- ------- -- -----------------------
--前端代码
-- -------------------- ---- -------
--------- -----
------
------
----- -----------------
------------------ ------ ------------
-------
------
--------
----- ------ - --- -------------------
---------------- - --------------- -
------------------- ----- ---------------
-
---------
-------
-------总结
借助 Server-sent Events 实现 Server Push 功能的步骤很简单，同时也能够提升页面的性能和用户体验。但需要注意的是，不是所有的浏览器都支持 SSE 技术，所以在实际使用过程中需要进行兼容性测试。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649cc64248841e989497aaf3