1

I would like to create a page that will allow the IT guys to select some servers from a list and an operation to perform on the them and then click go. Then have the textarea on the page update with the status of each operation as it completes. Each server maintenance task can take a minute or two. They would like to see updates on the page as each server completes the selected task.

Not sure which technologies to use on the front-end. The back-end is not a problem at all. I can easily take the full list of servers, perform the operation on each server then return the full list, with the result from each server. However, no one wants to wait for all the servers to complete before getting updates.

Normally I would use ajax to update a portion of a page but that is just for a single call/response. I think if I use a javascript loop to call a php script via ajax for each server, then the javascript loop will block the UI updates until the javascript function completes.

Any ideas?

Mike
  • 101
  • 1
  • 6
  • You can use `EventSource` to stream data to browser. See http://stackoverflow.com/questions/42512572/how-to-send-xmlhttprequest-continuously-in-webworker/42513099?s=2|0.0000#42513099, http://stackoverflow.com/questions/42475492/how-to-read-and-echo-file-size-of-uploaded-file-being-written-at-server-in-real?s=5|0.0000 – guest271314 May 01 '17 at 23:51
  • I think the EventSource method is used to make the same call to the server over and over (passing the same parameters) to get updated on something. Most examples I see are to get the server date/time. In this use case, the IT guy would go to the page, select some servers and make 1 request to process the whole list (once). – Mike May 02 '17 at 01:45
  • You can use `Promise.all()` to process an array of asynchronous functions and return array of responses when all `Promise` passed are fulfilled, or function is called or completes. See http://stackoverflow.com/questions/42180299/how-to-use-promise-all-after-promises-created-in-for-loop/42180380#42180380 – guest271314 May 02 '17 at 01:47
  • See also http://stackoverflow.com/questions/31424561/wait-until-all-es6-promises-complete-even-rejected-promises – guest271314 May 02 '17 at 01:54
  • Maybe I could use a promise but the promise.all sounds like it does not apply. There is nothing I need to do once all tasks have completed. Instead I need to make updates to the page as each server completes its task. The users don't want to wait until all servers have completed the requested task before seeing any output on the web page. – Mike May 02 '17 at 02:18
  • You can pass an array of function to call to `.map()`, of use `for` loop to call current function in array at each iteration of array. http://stackoverflow.com/a/31424853/ at second link uses `Promise.all()`, and also chains `.then()` within `.map()` callback to perform task when that specific `Promise` is resolved or rejected. – guest271314 May 02 '17 at 02:19

2 Answers2

1

Jquery has a method to perform an asynchronous HTTP Ajax request (http://api.jquery.com/jquery.ajax). Create a recursive javascript function to make the ajax call. Once you get the list of servers and desired operation selected by the user on the UI, call the RecursiveAjax function. With each result, call another function to update the 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);
     }
}
Mike
  • 101
  • 1
  • 6
0

You can use two technologies for this.

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

2- push notification https://developers.google.com/web/fundamentals/engage-and-retain/push-notifications/

In websocket the browser tab has to stay open. In push notification not. Websocket supports many browsers, push notification is only chrome and chromium.

kodmanyagha
  • 932
  • 12
  • 20
  • 1. I'll have to look into this some more. The site this would be hosted on is Linux/Apache/PHP 5.4 so not sure what is supported out of the box or what I can upgrade. Only supporting Desktop/Chrome is fine. – Mike May 02 '17 at 01:54
  • 2. Is push just for mobile apps? The use case here would be a browser tab left open until all the servers complete the task – Mike May 02 '17 at 01:55