在前端开发中，实时数据展示是一个常见的需求。例如，我们经常需要在页面上展示实时的股票行情、天气预报等信息。本文将介绍如何使用 Server-sent Events 技术来实现一个简单的实时天气预报应用。
Server-sent Events 简介
Server-sent Events (SSE) 是一种基于 HTTP 协议的实时数据传输技术。与 WebSockets 不同，SSE 采用了一种单向通信的模式，即服务器向客户端发送事件，客户端只能接收服务器发送的事件，不能向服务器发送消息。SSE 的优点在于它不需要像 WebSockets 那样建立一个全双工的连接，因此它更加轻量级，而且可以使用 HTTP/2 协议来传输数据。
SSE 采用了一种基于事件的通信模式。服务器向客户端发送一个事件，客户端可以通过监听这个事件来接收服务器发送的数据。SSE 的数据格式是纯文本，而且可以使用任何编码方式来编码数据。
实时天气预报应用
本文将介绍如何使用 SSE 技术来实现一个简单的实时天气预报应用。我们将使用一个开放的天气 API 来获取天气信息，然后将这些信息实时地展示在页面上。
获取天气信息
我们将使用 OpenWeatherMap 提供的天气 API 来获取天气信息。首先，我们需要在 OpenWeatherMap 上注册一个账号，并且获取一个 API Key。然后，我们可以使用下面的代码来获取天气信息。
-- -------------------- ---- -------
-------- ---------------- -
----- ------ - ---------------
----- --- - -----------------------------------------------------------------------------------------
------ ----------
-------------- -- ----------------
---------- -- -
----- ------- - -
------------ ---------------
------------ ----------------------------
----- ---------------------------------------------------------------
--
------ --------
---
-这个函数接收一个城市名作为参数，然后返回一个 Promise。当 Promise 被解析时，它会返回一个包含天气信息的对象，包括当前温度、天气状况描述和天气图标的 URL。
使用 SSE 实现实时更新
我们将使用 SSE 技术来实现实时更新。具体来说，我们将使用一个 Node.js 服务器来向客户端发送天气信息。下面是服务器端的代码。
-- -------------------- ---- -------
----- ---- - ----------------
----- -- - --------------
----- ------ - ----------------------- ---- -- -
-- -------- --- ---- -
------------------------- ----- ----- -- -
------------------ ---------------- --------------
----------------
----------
---
- ---- -- -------- --- ---------- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
-------------- -- -
--------------- ------
------------- -- -
----------------- ------------
---------------- ---------------------------------
--
----------------------
-- ------
- ---- -
-------------------
----------
-
---
------------------- -- -- -
------------------- -- ------- -- ------------------------
---这个服务器会监听两个 URL。当客户端访问根 URL 时，服务器会返回一个 HTML 页面。当客户端访问 /events URL 时，服务器会向客户端发送 SSE 事件。具体来说，服务器会每隔 5 秒钟向客户端发送一个包含天气信息的事件。这个事件的名称是 weather，数据是一个 JSON 对象。
下面是客户端的代码。这个代码会监听名为 weather 的事件，并且在事件发生时更新天气信息。
const eventSource = new EventSource('/events');
eventSource.addEventListener('weather', event => {
const weather = JSON.parse(event.data);
document.querySelector('#temperature').textContent = `${weather.temperature}°C`;
document.querySelector('#description').textContent = weather.description;
document.querySelector('#icon').src = weather.icon;
});这个代码会创建一个 EventSource 对象，然后监听名为 weather 的事件。当事件发生时，它会更新页面上的天气信息。
运行应用
为了运行这个应用，我们需要先安装 Node.js。然后，我们需要在命令行中运行下面的命令来启动服务器。
node server.js
这个命令会启动一个服务器，然后监听 3000 端口。我们可以在浏览器中访问 http://localhost:3000 来查看应用。
总结
本文介绍了如何使用 Server-sent Events 技术来实现一个实时天气预报应用。通过这个应用，我们可以学习如何使用 SSE 技术来实现实时数据传输，以及如何使用开放的 API 来获取实时数据。这个应用还可以作为一个模板，用来实现其他类型的实时数据展示应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65f0ff1c2b3ccec22f9d3809