如何随着服务器端任务的进行多次更新网页？

Question

我想创建一个页面，允许 IT 人员 select 列表中的一些服务器和对它们执行的操作，然后单击“开始”。然后让页面上的文本区域在每个操作完成时更新其状态。每个服务器维护任务可能需要一两分钟。他们希望在每台服务器完成 selected 任务时在页面上看到更新。

不确定在前端使用哪些技术。后端根本不是问题。我可以轻松获取完整的服务器列表，在每个服务器上执行操作，然后 return 完整列表，以及每个服务器的结果。然而，没有人愿意等到所有的服务器都完成后才得到更新。

通常我会使用 ajax 来更新页面的一部分，但这只是针对单个 call/response。我想如果我使用 javascript 循环通过 ajax 为每个服务器调用 php 脚本，那么 javascript 循环将阻止 UI 更新直到javascript 函数完成。

有什么想法吗？

Answer 1

您可以为此使用两种技术。

1- websocket https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API/Writing_WebSocket_client_applications

2-推送通知https://developers.google.com/web/fundamentals/engage-and-retain/push-notifications/

在 websocket 中，浏览器选项卡必须保持打开状态。在推送通知中没有。 Websocket支持很多浏览器，推送通知只有chrome和chromium.

Answer 2

Jquery 有一个方法来执行异步 HTTP Ajax 请求 (http://api.jquery.com/jquery.ajax)。创建一个递归 javascript 函数来进行 ajax 调用。获得服务器列表和用户在 UI 上选择的所需操作后，调用 RecursiveAjax 函数。对于每个结果，调用另一个函数来更新 UI.

function RecursiveAjax(serverArray, currentIndex, operation)
{
  var operationResult = "";
  $.ajax({
         type: "GET"
         url:  "ServerOperation.php",
         data: {Operation: operation, Server: serverArray[currentIndex]},
         success: function (result) {
             operationResult = JSON.stringify(result);
             UpdateUI(operationResult);
         }
     });
     var nextIndex = currentIndex + 1;
     if(nextIndex < serverArray.length) {
       RecursiveAjax(serverArray, nextIndex, operation);
     }
}

如何随着服务器端任务的进行多次更新网页？

How to update web page multiple times as server-side task progresses?

javascript

php

lamp