前言
在 Web 开发过程中，经常会遇到需要实时推送数据的场景，比如聊天室、股票行情等。而一般来说，实时推送都是基于 WebSocket 技术实现的。但是在某些场景下，由于一些原因（比如安全因素、协议限制），我们可能需要使用 SSE（Server-Sent Events，服务器端推送事件）来推送数据。
本篇文章主要介绍了一种使用 SSE 实现推送若干分钟前数据的思路，并分享了具体的实现方法及代码。
需求
我们假设有一个场景，需要实现以下功能：
- 实时向客户端推送天气数据；
- 数据来源于第三方 API；
- 推送的数据是该地区 30 分钟前的天气数据。
假设我们使用的是 和风天气 的 API，那么获取数据的接口如下：
https://free-api.heweather.com/s6/weather?location={城市名}&key={API key}其中，城市名和 API key 是必填参数，示例调用如下：
https://free-api.heweather.com/s6/weather?location=beijing&key=API_key
该接口实时返回的是当前天气数据。
SSE 原理
SSE 是 HTML5 引入的一个协议，用于服务器向客户端单向推送数据。客户端通过打开一个 SSE 连接，随时接收来自服务器端的数据。
SSE 的实现基于原生的 JavaScript API：EventSource。我们可以在客户端创建一个 EventSource 对象，监听服务器发送的事件。服务器端每次推送数据时，只需将数据打包成一个特定格式（data: +数据），通过 SSE 连接发送到客户端即可。客户端在收到数据后，可以根据数据的内容进行各种处理，比如更新页面等。
实现思路
结合实际需求，我们需要实现以下步骤：
- 使用 AJAX 请求和风天气 API，获取当前天气数据；
- 对数据进行处理，得到 30 分钟前的天气数据；
- 使用 SSE 推送数据；
- 客户端接收并处理数据。
针对以上步骤，我们将详细介绍具体的实现方法。
第一步：使用 AJAX 获取数据
首先，我们需要使用 AJAX 请求 API 获取当前天气数据。因为我们使用的是和风天气的 API，所以我们需要在该网站上注册，并获取到 API key。
-- -------------------- ---- -------
-------- --------------------------- -
--- ------ - -------------------------------------------------------------------------
--- --- - --- -----------------
--------------- --------
---------------------- - ---------- -
-- --------------- --- -- -
-- ----------- --- ---- -
--- ----------- - -----------------------------
-- ------------ -- ----------------------- -
-------- -- ------ -------- --- ---------- -- ----------------------------------------
-
-
-
--
-----------
-第二步：处理数据
接下来，我们需要对获取到的当前天气数据进行处理，得到 30 分钟前的天气数据。
-- -------------------- ---- -------
-------- ----------------------- -
--- ------- - --- -----------------
--- ------ - --- ------------ - ------- - -- - ------
--- ------ - -
--------- ---
---- ---
---- ---
--------- ---
-------- ---
---------- ---
--
--- ------ - -------------------------------------------------------------------------------
--- ---- - - -- - - ----- ---- -
--- ----------- - --- --------------------- - - - -- - ------------------------ -----------
--- --- - --- -----------------
--------------- ------ - -------------
---------------------- - ---------- -
-- --------------- --- -- -
-- ----------- --- ---- -
--- ----------- - -----------------------------
-- ------------ -- ----------------------- -
--- ------- - ------------------------------
-- --------- -
--------------- - -----------------
---------- - ------------
---------- - ------------
--------------- - -----------------
-------------- - ----------------
---------------- - -------------------------------------------------- ---- - ------
-
-
-
-
--
-----------
-
------ -------
-上述代码中，我们定义了一个 getWeatherData 方法，用于获取 30 分钟前的天气数据。该方法以分钟数作为参数，并以当前时间为基准，循环请求从当前时间到 30 分钟前每一分钟的数据，最终将所有数据汇总后返回。
第三步：使用 SSE 推送数据
接下来，我们需要使用 SSE 技术来实现数据的推送。
-- -------------------- ---- -------
-------- -------------------------- -
-- ---------------------- -
--- ------ - --- -------------------------------
-------------- - ---------- -
----------------- --------
--
------------------------------- ----------- -
--- ----------- - -------------------
-------- -- ------ -------- --- ---------- -- ----------------------
-- -------
- ---- -
----------------- --- ------------
-
-其中，我们首先判断浏览器是否支持 SSE。如果支持，则创建一个 EventSource 对象，并指定服务器接口地址（/getWeatherData）。服务器返回的数据需要满足 SSE 协议规范，即以 data: 开头，以 \n\n 结尾。我们在服务器端的实现中，将获取到的天气数据序列化成 JSON 格式，并在前面加上 data:，在后面加上 \n\n 后返回给客户端即可。
第四步：客户端接收并处理数据
最后，我们需要在客户端接收并处理服务器推送的天气数据。
serverSentEvents(function(weatherData) {
document.getElementById('cond_txt').textContent = weatherData.cond_txt;
document.getElementById('tmp').textContent = weatherData.tmp;
document.getElementById('hum').textContent = weatherData.hum;
document.getElementById('wind_dir').textContent = weatherData.wind_dir;
document.getElementById('wind_sc').textContent = weatherData.wind_sc;
document.getElementById('update_at').textContent = weatherData.update_at;
});在客户端代码中，我们定义了 serverSentEvents 回调函数，用于处理服务器端传送的天气数据。在该函数中，我们根据数据的内容更新了页面中对应的元素。
总结
本文详细介绍了如何通过 SSE 推送 30 分钟前的天气数据。实现过程中，需要注意的几点是：
- 在服务器端，需要将获取到的数据序列化成 JSON 格式，并在前面加上
data:，在后面加上\n\n后返回给客户端； - 在客户端，需要判断浏览器是否支持 SSE，如果不支持则需要提供替代方案。
通过本文的介绍，我们可以掌握 SSE 的原理及具体实现方法，并可以将其应用到实际开发场景中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647c4356968c7c53b07600ef