每秒异步更新 UI，无需从服务器刷新页面

Posted 2023-03-07

【中文标题】每秒异步更新 UI，无需从服务器刷新页面

【英文标题】：Update UI asynchronously every second without refreshing page from server

【发布时间】：2020-01-04 05:08:14

【问题描述】：

从服务器更新客户端而不刷新浏览器窗口。 例如：认为有一个变量 count=0 并且它通过设置间隔每秒更新一次，但是它在服务器中更新而不反映浏览器中的更改。

let count=0

app.get('/', function(req, res)
    setInterval(() => 
        count+=1;
    , 1000);

  res.json(count); //I need to update UI asynchronously.
); 

【问题讨论】：

你认为这段代码在做什么？来自浏览器的一个请求和一个响应。因此，此代码在请求时向客户端发送一个count，然后请求完成。您只能为每个请求发送一个响应。同时，每次请求客户端时，您都会启动另一个永远运行的间隔计时器。因此，在两次请求之后，您将运行两个间隔计时器。

如果你想定期从服务器获取一个值，那么你有两个选择。 1）您可以在客户端和服务器之间建立一个 webSocket 连接，并且服务器可以随时通过该 webSocket 连接向网页发送一个新值。然后客户端监听传入的数据，并在一些数据到达时做出相应的响应。或者，2）您可以在某种客户端计时器上从客户端向服务器发送 ajax 调用，以每隔一段时间获取最新值。

谢谢@jfriend00，让我看看webSocket。

再次感谢@jfriend00 webSockets 解决了我的问题 :)

【参考方案1】：

如果您想定期从服务器获取值，那么您有几个选择。

您可以在客户端和服务器之间建立 webSocket 连接，服务器可以随时通过该 webSocket 连接向网页发送新值。然后客户端监听传入的数据，并在一些数据到达时做出相应的响应。

Socket.io 是一个使用 webSocket 的库，但添加了许多有用的功能，例如自动重新连接、消息包装器等......所以这也是一个选择。

您可以在某种客户端计时器上从客户端向服务器发送 ajax 调用，以每隔一段时间获取最新值。

服务器发送的事件可用于将数据单向推送到客户端。虽然 webSocket/socket.io 可以用于双向通信，但服务器发送的事件仅用于将数据从服务器推送到客户端。这是一项较新的技术，因此您必须确保您的浏览器基础支持它，而 webSockets 的存在时间更长。有关将服务器端事件与 webSocket 进行比较的一些数据，请参阅 WebSockets vs. Server-Sent events/EventSource 或 Websockets vs. Server-Sent Events。