随着互联网的发展，越来越多的网站需要展示实时数据，比如天气预报、股票行情等。实时数据对于网站的用户体验非常重要。本文将介绍如何使用 Server-sent Events 技术实现一个实时天气预报系统。
什么是 Server-sent Events
Server-sent Events 是 HTML5 标准中的一项技术，它允许客户端通过 HTTP 连接接收服务端发送的事件流。与 WebSocket 不同，Server-sent Events 是单向的，只能由服务端向客户端推送数据。相比于轮询和长轮询等传统的实时数据获取方式，Server-sent Events 的实现非常简单，且具有广泛的浏览器支持。
实现步骤
下面是实现实时天气预报系统的步骤：
- 获取天气数据
首先，我们需要通过一个公开的天气 API 获取天气数据。这里我选择了 OpenWeatherMap 提供的免费天气 API。获取天气数据的 URL 如下：
https://api.openweathermap.org/data/2.5/weather?q={城市名}&appid={API Key}其中，{城市名} 是需要查询天气的城市名，{API Key} 是 OpenWeatherMap 提供的 API Key。请求该 URL 将返回 JSON 格式的天气数据。
- 实现 Server-sent Events
我们可以通过 HTML5 的 EventSource API 来实现 Server-sent Events。以下代码演示了如何创建一个 EventSource 实例，并接收服务端发送的事件：
const eventSource = new EventSource('/api/weather');
eventSource.onmessage = function(event) {
const data = JSON.parse(event.data);
// 更新天气预报界面
};在上述代码中，'/api/weather' 是一个与服务端建立 SSE 连接的 URL。服务端需要通过这个 URL 发送天气数据。当服务端发送数据时，客户端的 onmessage 属性会被触发，我们可以在这个回调函数中处理接收到的数据并更新界面。
- 实现服务端
服务端需要提供一个接口，通过该接口发送天气数据。以下是一个使用 Node.js 和 Express 实现的服务端：
-- -------------------- ---- -------
----- ------- - -------------------
----- ---- - ----------------
----- ------- - -------------------
----- --- - ----------
----- ------ - ------ --- ------
-------- ------------------ --------- -
----- --- - ----------------------------------------------------------------------------
------------ --------------- --------- ----- -
-- ------- -- ------------------- -- ---- -
----- ---- - -----------------
---------------
- ---- -
-------------------- -------
-
---
-
----------------------- ------------- ---- -
----------------------------- ---------------------
------------------------------ ------------
--------------------------- --------------
-------------- - ----
----- ---- - ----- -- ------------------------
---------------------- -
------------------ -------------- -
----- ------- - ------ -----------------------------
-------------------
---
-- ------- -- - -- ---------
---
----------------------------------- ---------- -
------------------- ------- -- ------------------------
---上述代码中，app.get('/api/weather') 用来处理 SSE 请求。在这个路由中，我们设置了一些响应头，示意客户端该响应是一个 SSE 内容。然后，服务端获取北京的天气数据，并通过 res.write() 函数向客户端发送数据，数据是一个 JSON 格式的字符串。
演示
我们已经完成了实现实时天气预报系统的所有步骤。下面是一个演示链接：https://codesandbox.io/s/server-sent-events-weather-api-4wh4n。打开链接后，等候几秒钟，天气预报界面将会实时更新。网页可以实时接收到服务端推送的天气数据，通过 EventSource API 来实现这一功能。
结语
本文介绍了如何使用 Server-sent Events 简单实现一个实时天气预报系统。事实上，Server-sent Events 还可以用于实现聊天室、实时数据展示等功能。相信读者通过本文的学习，可以开始使用这项技术实现自己感兴趣的项目。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/6795e443504e4ea9bdc204ab