前言
Server-sent Events（SSE）是 HTML5 中的一项重要特性，它允许服务器实时向客户端推送数据，并且在客户端接收到数据时触发事件。相比 WebSocket，SSE 更加轻量级，不需要建立一个全双工的连接，而且可以使用 HTTP/1.1 和 HTTP/2.0 协议。但是，由于 HTTP/1.1 和 HTTP/2.0 的协议特性不同，所以在实现 SSE 的兼容性时需要考虑到这些差异。
本文将介绍如何在前端实现 SSE 的 HTTP/1.1 和 HTTP/2.0 兼容性，并提供示例代码。
HTTP/1.1 SSE
在 HTTP/1.1 中，SSE 使用长轮询（long-polling）的方式实现。长轮询指的是客户端向服务器发送一个请求，服务器会一直保持连接，直到有数据可发送给客户端时才会响应请求。客户端在接收到响应后，再次发送请求，以此类推。
以下是一个使用 HTTP/1.1 SSE 的示例代码：
-- -------------------- ---- ------- ----- ----------- - --- -------------------- --------------------- - ------- -- - --------------------- ---------- ------------ -- ------------------- - ------- -- - -------------------- ----------- ------- --
在上面的代码中，我们创建了一个 EventSource 对象，并指定了 SSE 的 URL。当服务器向客户端发送数据时，会触发 onmessage 事件。如果发生错误，会触发 onerror 事件。
在服务器端，我们需要实现一个 SSE 的路由，例如：
-- -------------------- ---- -------
--------------- ----- ---- -- -
----------------------------- ---------------------
------------------------------ ------------
--------------------------- --------------
-------------- -- -
----- ---- - --- ---------------------
---------------- --------------
-- ------
---在上面的代码中，我们设置了响应头的 Content-Type 为 text/event-stream，表示这是一个 SSE 的响应。Cache-Control 设置为 no-cache，表示不缓存响应。Connection 设置为 keep-alive，表示保持连接。
在 setInterval 中，我们每隔 1 秒向客户端发送一个数据。
HTTP/2.0 SSE
在 HTTP/2.0 中，SSE 使用 Server Push 的方式实现。Server Push 是 HTTP/2.0 中的一项新特性，它允许服务器在客户端请求之前将资源推送给客户端。这样可以减少客户端请求的数量，提高性能。
以下是一个使用 HTTP/2.0 SSE 的示例代码：
-- -------------------- ---- ------- ----- ----------- - --- -------------------- --------------------- - ------- -- - --------------------- ---------- ------------ -- ------------------- - ------- -- - -------------------- ----------- ------- --
在上面的代码中，和 HTTP/1.1 SSE 的代码相同。
在服务器端，我们需要实现一个 SSE 的路由，例如：
-- -------------------- ---- -------
--------------- ----- ---- -- -
----------------------------- ---------------------
------------------------------ ------------
--------------------------- --------------
--------------------- ------------------- ------------ -----------
----- ---- - --- ---------------------
---------------- --------------
--------------------------- -
-------- -
------- ------
--
--------- -
--------------- -----------
--
---------------- -- -
---------------- - ----------------- ------- ----
---
---在上面的代码中，我们设置了响应头的 Content-Type、Cache-Control 和 Connection，和 HTTP/1.1 SSE 的代码相同。Link 头用于指定推送的资源，这里我们推送了一个 CSS 文件。
在 res.write 中，我们向客户端发送了一个数据。
在 res.push 中，我们推送了一个 CSS 文件。accept 指定了客户端支持的 MIME 类型，response 指定了推送的资源类型。然后我们通过 stream.end 方法将 CSS 内容发送给客户端。
兼容性
由于 HTTP/2.0 是在 HTTP/1.1 的基础上发展而来的，所以 HTTP/2.0 对 HTTP/1.1 的兼容性非常好。在使用 SSE 时，我们只需要根据协议版本来选择不同的实现方式即可。
结论
本文介绍了如何在前端实现 SSE 的 HTTP/1.1 和 HTTP/2.0 兼容性，并提供了示例代码。在实际开发中，我们需要根据协议版本来选择不同的实现方式，以确保兼容性和性能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67623296856ee0c1d4fe3665