在现代 Web 应用中，实时通讯和实时更新对于用户体验来说非常重要，而使用 Server-Sent Events (SSE) 是一种实现实时更新的简单方法。本文将介绍如何使用 SSE 实现实时播报天气预报，以及如何在前端代码中使用 SSE。
什么是 Server-Sent Events？
Server-Sent Events (SSE) 是一种 HTTP 技术，它允许服务器向客户端推送数据。与传统的 HTTP 请求-响应模型相比，SSE 可以实现服务器端的主动推送数据，从而可以实现实时更新和实时通讯。使用 SSE 的主要途径是客户端发起一个 SSE 请求，服务器端会以流的形式发送数据到客户端，并保持连接不中断，直到客户端关闭连接。
SSE 使用简单，只需要一个 SSE 请求，以及一个消息流。SSE 消息流本质上是一个类似于长轮询的 HTTP 连接，不同的是 SSE 可以推送多个消息到客户端，而不必每次请求都需要重新建立连接。客户端只需要使用 EventSource 对象来处理来自服务器端的消息。
如何使用 SSE 实现实时播报天气预报？
使用 SSE 实现实时播报天气预报的原理非常简单：只需要编写一个能够定期更新天气预报的服务端代码，并将更新的数据发送给客户端，客户端收到数据后即可实时更新页面。
下面是一个基于 Node.js 的服务端代码示例，使用 setInterval 定期更新天气预报，使用 SSE 来推送数据到客户端：
-- -------------------- ---- -------
----- ---- - ----------------
----------------------- ---- -- -
-- -------- --- ----------- -
------------------ -
--------------- --------------------
---------------- -----------
----------- -------------
---
-------------- -- -
----- ---- - -
------------ ------------------------ - ----
--------- ------------------------ - -----
--
---------------- ------------------------------
-- ------
- ---- -
-------------------
----------
-
----------------上面的代码中，客户端可以通过访问 http://localhost:8080/weather 来实时获取天气预报。每隔 3 秒钟，服务器会更新一次天气预报，并将更新的数据推送到客户端。
下面是一个简单的 HTML 页面示例，使用 EventSource 来获取服务器发送的实时数据并更新页面：
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
---------------------
-------
------
---------------
----------- -----------------------------
----------- --------------------------
--------
----- ------ - --- ------------------------
---------------- - ------- -- -
----- ---- - -----------------------
------------------------------------------------ - -----------------
--------------------------------------------- - --------------
--
---------
-------
-------上面的代码中，EventSource 对象用于从服务端获取实时数据。当服务端发送数据到客户端时，onmessage 事件会触发，并且可以将数据更新到页面中。
如何在前端代码中使用 SSE？
在前端代码中使用 SSE 非常简单，只需要通过创建 EventSource 对象来订阅服务器端数据。当服务器端有新的数据更新时，可以通过 onmessage 事件来处理数据并更新页面。
下面是一个 EventSource 的例子：
-- -------------------- ---- ------- ----- ------ - --- ----------------------- ------------- - -------- -- - ---------------------- -- ---------------- - -------- ------- - -------------------- ------------ -- -------------- - -------- -- - -------------------- --
上面的代码中，创建了一个 EventSource 对象，连接到 /events 端点。当连接建立成功时，onopen 事件会触发，当服务端向客户端推送数据时，onmessage 事件会被触发。
如果发生通讯异常，例如服务器关闭连接，浏览器会自动重试建立 SSE 连接，当重试不成功时，onerror 事件会触发。
总结
本文介绍了使用 Server-Sent Events 实现实时播报天气预报的方法和技术，以及如何在前端代码中使用 SSE。SSE 是一种非常强大且易于使用的技术，它使得实时通讯和实时更新变得非常简单。在 Web 应用中使用 SSE 可以大大提高用户体验，同时也可以更加高效地推送数据到客户端。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64dd9b98f6b2d6eab38d6a92