在现代 Web 应用程序中，实时数据变得越来越重要，这也是用户对 Web 应用的期望之一。浏览器提供许多不同的方式来获得实时数据，其中一种方式是通过使用 Server-sent Events（SSE）。
SSE 是一种推送式事件源技术，允许客户端几乎即时地接收来自服务器的更新。这些更新被视为消息和以异步流的形式传输。因此，SSE 使得实时消息通信变得容易。
在这篇文章中，我们将探讨如何使用 SSE 来实现实时天气预报更新。我们将创建一个用于展示实时天气预报的简单网站，并使用 SSE 技术使之自动更新。
实现
准备工作
在开始实现之前，我们需要准备一些基础设施：
- 你需要有一个气象 API，此处我们使用OpenWeatherMap。
- 下载Express.js，一个用于构建 Web 应用的 Node.js 框架。
- 安装 dotenv 用于加载配置
- 使用
npm install --save-dev nodemon安装 nodemon 热加载工具用于开发
建立 Express 服务器
在项目的根目录中，创建一个新文件夹并命名为 server。进入该文件夹，并使用 npm init 命令来初始化一个新的 Node.js 项目。
然后，使用以下命令安装 Express 和 dotenv：
npm install --save express dotenv
接下来，在 server 文件夹中创建一个名为 app.js 的新文件。
在 app.js 文件中，让我们开始编写代码以建立一个基本的 Express 服务器。
const express = require('express');
const app = express();
const PORT = process.env.PORT || 3000; // 用于监听 Express 应用程序的端口
app.listen(PORT, () => console.log(`Server listening on port ${PORT}`));现在你可以使用 nodemon app.js 命令来启动 Express 服务器。
接下来，我们需要设置一个路由来提供气象数据：
-- -------------------- ---- -------
----- ----- - ---------------------- -- ----- ----------
-- -- ---- --- --- ---
---------------------------
----- ------ - -------------------------------------
-- -----------
------------------- ----- ----- ---- -- -
--- -
----- -------- - -------------------
----- --- - ---------------------------------------------------------------------------------------------
----- -------- - ----- -----------
----- ---- - ----- ----------------
---------------
- ----- ------- -
---------------------
---------------------------- --------
-
---在这里，我们首先准备了一个名为 apiKey 的常量，该常量从 .env 文件中读取 OpenWeatherMap API KEY。然后，我们提供了一个 Express 路由，该路由从 OpenWeatherMap API 获取用户指定位置的气象数据。
用 SSE 发送实时天气预报
现在，我们已经有了一个 Express 服务器和一个用于提供气象数据的路由。接下来，我们将为天气预报使用 SSE 发送数据给浏览器。
首先，让我们为天气预报创建一个前端页面。在项目根目录下新建一个 public 文件夹，其中新建一个 index.html 文件。
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
---------------------
-------
------
---------------
-------------
--- ------------------
--------
----- ----------- - -----------------------------------
-- -------- --- - -----------
----- ----------- - --- --------------------------
-- -- --- - ------- --
--------------------- - -------- ------- -
----- - ----- ---- - - -----------------------
-- -----
----- ----------- - -----------------------------
--------------------- - --------- ------------ ---
---------------------------------
--
---------
-------
-------在这里，我们向页面添加了一个 ul 元素，该元素用于显示不同城市的天气预报。然后，我们使用 EventSource 创建了一个用于处理 SSE 的事件源。
接下来，我们需要在服务器端设置一个 SSE 路由，该路由将发送气象数据给浏览器。在 app.js 文件中添加以下代码：
-- -------------------- ---- -------
-- -- --- --
--------------------- ----- ---- -- -
-- -- --- --
------------------ -
--------------- --------------------
---------------- -----------
----------- -------------
---
----- ----- - ------ ------------------
----- ---- ---------
----- - ----- ---- --
---------
-------------- -- -
-- ------ --- --
-----------------
-- ------
---在这里，我们首先设置了 SSE 的标头，然后设置了一个从名称为 Los Angeles 的城市和温度为 23 度摄氏度的虚拟气象事件。最后，我们使用 setInterval 函数将事件发送到客户端。
这样就完成了我们使用 SSE 实现实时天气预报的过程。
总结
通过实现一个简单的实时天气预报示例，我们学习了如何使用 SSE 技术来向客户端推送数据。SSE 是一种简单有效的技术，能够实现实时通信并改善 Web 应用程序的用户体验。
在实现过程中，我们还深入了解了 Node.js、Express、dotenv 和 fetch 等库的使用方法。这将帮助你更好地理解如何使用这些库实现不同的功能。
希望这篇文章能够使你更好地掌握 SSE 技术和建立实时通信的方法。如果你想要深入学习 SSE，请查看官方 MDN 文档。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645b3f2a968c7c53b0d992bb