Javascript 如何在服务器端任务进行时多次更新网页？

我想创建一个页面，允许IT人员从列表中选择一些服务器，并对其执行操作，然后单击go。然后让页面上的textarea更新每个操作完成时的状态。每个服务器维护任务可能需要一两分钟。他们希望在每台服务器完成所选任务时在页面上看到更新

不确定在前端使用哪些技术。后端根本不是问题。我可以轻松地获取服务器的完整列表，在每个服务器上执行操作，然后返回完整列表，以及每个服务器的结果。但是，没有人希望在获得更新之前等待所有服务器完成

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

---

有什么想法吗？

您可以使用两种技术来实现这一点

1-websocket

2-推送通知

---

在websocket中，浏览器选项卡必须保持打开状态。在推送通知中没有。Websocket支持多种浏览器，推送通知仅限于chrome和chrome。

Jquery有一种执行异步HTTP 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);
     }
}

函数递归Ajax（serverArray、currentIndex、操作） { var operationResult=“”； $.ajax({ 键入：“获取” url:“ServerOperation.php”， 数据：{操作：操作，服务器：serverArray[currentIndex]}， 成功：功能（结果）{ operationResult=JSON.stringify（结果）； 更新（操作结果）； } }); var nextIndex=currentIndex+1； if（nextIndex您可以使用

EventSource

将数据流传输到浏览器。请看，我认为EventSource方法用于反复对服务器进行相同的调用（传递相同的参数），以更新某些内容。我看到的大多数示例都是获取服务器日期/时间。在这个用例中，IT人员会转到页面，选择一些服务器并发出一个请求来处理整个列表（一次）。您可以使用

Promise.all（）

来处理一个异步函数数组，并在所有

Promise

传递都已完成，或者函数被调用或完成时返回响应数组。你看，也许我可以用一个承诺，但是这个承诺听起来好像不适用。一旦所有任务都完成了，我就不需要做什么了。相反，我需要在每个服务器完成其任务时对页面进行更新。用户不希望等到所有服务器都完成了请求的任务后，才能在网页上看到任何输出。1。我得再调查一下。这个网站将托管在Linux/Apache/PHP5.4上，所以不确定什么是现成的支持，或者我可以升级什么。只支持桌面/Chrome是可以的。推送是否仅适用于移动应用程序？这里的用例是浏览器选项卡保持打开状态，直到所有服务器完成任务