Żądanie AJAX - Dodaj dodatkową pętlę wewnętrzną żądania GET

Question

Mam przycisk u góry tabeli, która wyświetla okno modalne, aby zainicjować połączenie VoIP - ostatecznym celem jest, aby zadzwonił na pierwszy numer na liście, a następnie na drugi. numer i tak dalej. Działa to tak, że wyświetla okno modalne i pozwala mi zainicjować połączenie z pierwszym numerem na liście.

Muszę teraz zaktualizować skrypt, aby w razie pomyślnego wykonania połączenia kolejne żądanie AJAX w pętli oznaczało co 5 sekund sprawdzanie stanu połączenia. Jeśli pierwsze połączenie się powiedzie będzie to powrót po których mam przechowywanie w httpResponseText zmiennej:

Authentication accepted<br/>ActionID = Jo9oACY52cp1 

muszę analizować na wartość ActionID - w powyższym przykładzie będzie to Jo9oACY52cp1 - a potem mieć inny GET żądania, aby uzyskać status bieżącego połączenia przez przechodzącą w IdAkcji następująco:

https://www.acme.com/GetStatus.php?ActionID=$action_id 

to żądanie zwraca 3 wartości - IdAkcji, UID, status - tak:

xshsJ6Y2eLDC,1500806656.160,ANSWER 

Interesuje mnie tylko trzecia wartość - STATUS - i muszę nadal sprawdzać wynik tego żądania, aż status nie będzie równy IN_PROGRESS. W tym momencie mogę włączyć przycisk Next Call i zacząć wszystko od nowa.

Oto moja aktualna tabela i scenariusz:

$("#startBulkContactCall").click(function() { 
 
    $(this).attr('selectedRow', '1'); 
 
    contactMobile = $($($('table > tbody > tr:nth-child(1) > td:nth-child(2)').children())[0]).attr('contactMobile'); 
 
    contactName = $($($('table > tbody > tr:nth-child(1) > td:nth-child(2)').children())[0]).attr('contactName'); 
 
    $('#callNextBulkContact').prop('disabled', true); 
 
    firstURL = "<?php echo $callBackURL ;?>" + defaultCallBackNumber + "<?php echo $contactCallBack ;?>" + contactMobile; 
 
    console.log('firstURL: ' + firstURL); 
 
    $.ajax({ 
 
     url: "<?php echo $callBackURL ;?>" + defaultCallBackNumber + "<?php echo $contactCallBack ;?>" + contactMobile, 
 
     data: {}, 
 
     type: "GET" 
 
    }) 
 
    .then(function(data, status, xhr) { 
 
     var httpStatus = status; 
 
     var httpResponseCode = (xhr.status); 
 
     var httpResponseText = (xhr.responseText); 
 
     $('#ajaxSuccessBulk').html('Call in Progress').show(); 
 
     $("#startBulkContactCall").prop("disabled", true); 
 
     $("#callNextBulkContact").prop("disabled", true); 
 
    }) 
 
    .fail(function(xhr) { 
 
     var httpStatus = (xhr.status); 
 
     var httpResponseCode = (xhr.getAllResponseHeaders); 
 
     var httpResponseText = (xhr.responseText); 
 
     var ajaxError = 'There was an error requesting the call back. HTTP Status: ' + httpStatus + ' ' + httpResponseText; 
 
     //make alert visible 
 
     $('#ajaxError').html(ajaxError).show(); 
 
    }) 
 
}); 
 

 
$('#callNextBulkContact').click(function() { 
 
    $('#callBulkContact').attr('selectedRow', parseInt($('#callBulkContact').attr('selectedRow')) + 1); 
 
    var rowNum = parseInt($('#callBulkContact').attr('selectedRow')); 
 
    var row = 'table > tbody > tr:nth-child(' + rowNum + ') > td:nth-child(2)'; 
 
    contactMobile = $($($(row).children())[0]).attr('contactMobile'); 
 
    contactName = $($($(row).children())[0]).attr('contactName'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 

 
<button type="button" id="bulkCallButton" class="btn btn-default"><span class="glyphicon glyphicon-phone"></span> Bulk Call</button> 
 

 

 
<table class="table table2 table-striped table-bordered" width="100%"> 
 
    <thead> 
 
    <th scope="col">Name</th> 
 
    <th scope="col">Mobile</th> 
 
    </thead> 
 
    <tbody> 
 
    <tr id="D8F49748-212A-42D8-A188-4C23556027FA"> 
 
     <td><a href="details.php?action=contactLink&contactID=D8F49748-212A-42D8-A188-4C23556027FA">John Citizen</a></td> 
 
     <td><a href="#" contactName="John Citizen" contactMobile="0412345678" data-toggle="modal" data-rec-id="1537" data-target="#contactCallModal"><span class="glyphicon glyphicon-earphone"></span> 0412 345 678</a></td> 
 
    </tr> 
 
    <tr id="EAD2DCCA-7EFA-B048-AD7D-8FCC0ED5EFD7"> 
 
     <td><a href="details.php?action=contactLink&contactID=EAD2DCCA-7EFA-B048-AD7D-8FCC0ED5EFD7">Jonah McMahon</a></td> 
 
     <td><a href="#" contactName="Jonah McMahon" contactMobile="0490876543" data-toggle="modal" data-rec-id="1538" data-target="#contactCallModal"><span class="glyphicon glyphicon-earphone"></span> 0490 876 543</a></td> 
 
    </tr> 
 
    <tr id="D9AA7744-E138-4A0E-86A2-B8D0CD2007D6"> 
 
     <td><a href="details.php?action=contactLink&contactID=D9AA7744-E138-4A0E-86A2-B8D0CD2007D6">Jake Simpson</a></td> 
 
     <td><a href="#" contactName="Jake Simpson" contactMobile="0405999666" data-toggle="modal" data-rec-id="1577" data-target="#contactCallModal"><span class="glyphicon glyphicon-earphone"></span> 0405 999 666</a></td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 

 

 
<div class="modal" id="contactBulkCallModal"> 
 
    <div class="modal-dialog"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button> 
 
     <h4 class="modal-title">Call Contact</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <p>Calling </p> 
 
     </div> 
 
     <div id="ajaxError" class="alert alert-danger text-center" role="alert" style="display:none"> 
 
     Error Response 
 
     </div> 
 
     <div id="ajaxSuccess" class="alert alert-success text-center" role="alert" style="display:none"> 
 
     Call in Progress 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
     <button type="button" id="startBulkContactCall" class="btn btn-success">Start Call</button> 
 
     <button type="button" id="callNextBulkContact" class="btn btn-success">Next</button> 
 
     </div> 
 
    </div> 
 
    <!-- /.modal-content --> 
 
    </div> 
 
    <!-- /.modal-dialog --> 
 
</div> 
 
<!-- /.modal -->

Nigdy nie miałem zrobić tak złożonego żądania AJAX (przynajmniej dla mnie) i nie wiesz od czego zacząć, aby dodać dodatkowy wniosek w pętli?

Answer 1

Oto co zrobię: najpierw oddzielny kod w funkcjach, ułatwi to podążanie.

StartCall powinien zainicjować połączenie, otrzyma callURL, którego powinien używać ajax. Zwraca obietnicę, która zostanie rozwiązana po jej złożeniu.

MonitorCall pobiera identyfikator i callback (trzeci parametr "failed_tries" jest używany wewnętrznie). Uruchomi sprawdzanie statusu za pomocą ajax i wywoła się co 5 sekund, aż do 5 kolejnych awarii się nie stanie, lub dopóki nie otrzymamy poprawny status. Oddzwanianie to zwykłe wywołanie zwrotne JS z błędem i wynikiem jako argumentami.

getMonitoredCall dołączy do dwóch poprzednich funkcji, aby podać obietnicę, która rozwiąże się po zakończeniu połączenia.

getNewCallUrl służy do zapewnienia innego połączenia. Ta funkcja będzie wywoływana przed każdym wywołaniem, aby wyszukać, kto ma zadzwonić. Tam jest praca dla ciebie! Powinna zwrócić obietnicę, która podaje adres URL jako wynik.

W końcu pętla zapoczątkuje wszystko i po zakończeniu połączenia ponownie zadzwoni do następnego połączenia, aż coś się nie powiedzie.

function startCall(callURL){ 
    return $.ajax({ 
     url: callURL, 
     data: {}, 
     type: "GET" 
    }).then(function(data, status, xhr) { 
     var httpStatus = status; 
     var httpResponseCode = (xhr.status); 
     var httpResponseText = (xhr.responseText); 
     $('#ajaxSuccessBulk').html('Call in Progress').show(); 
     $("#startBulkContactCall").prop("disabled", true); 
     $("#callNextBulkContact").prop("disabled", true); 

     return Promise.resolve(xhr.responseText.match(/ActionID = (.+)/)[1]); 
    }) 
    .fail(function(xhr) { 
     var httpStatus = (xhr.status); 
     var httpResponseCode = (xhr.getAllResponseHeaders); 
     var httpResponseText = (xhr.responseText); 
     var ajaxError = 'There was an error requesting the call back. HTTP Status: ' + httpStatus + ' ' + httpResponseText; 
     //make alert visible 
     $('#ajaxError').html(ajaxError).show(); 
    }); 
} 
function monitorCall(callID,callback,failed_tries){ 
    failed_tries = failed_tries || 0; 
    $.ajax({ 
     url: 'https://www.acme.com/GetStatus.php', 
     data: {ActionID:callID}, 
     type: "GET" 
    }).then(function(data){ 
     if(data && data.split(',')[2] != "IN_PROGRESS"){ 
      callback(null,data); 
     }else{ 
      setTimeout(monitorCall.bind(null,callID,callback,0),5000); 
     } 
    }).fail(function(xhr){ 
     failed_tries++; 
     if(failed_tries>5){ 
      callback("Error trying to get the status, stopping after 5 consecutive tries."); 
     }else{ 
      setTimeout(monitorCall.bind(null,callID,callback,failed_tries),5000); 
     } 
    }); 
} 

function getMonitoredCall(callUrl){ 
    return new Promise(function(resolve,reject){ 
     startCall(callUrl).then(function(callID){ 
      monitorCall(callID,function(err,res){ 
       if(err){ 
        reject(err); 
       }else{ 
        resolve(res); 
       } 
      }); 
     }); 
    }); 
} 

function getNewCallUrl(){ 
    return $.ajax({ 
     url: "http://getNewCallUrl/", 
     data: {}, 
     type: "GET" 
    }).then(function(data, status, xhr) { 
     //Let's presume the request simply returns a call URL. 
     return Promise.resolve(data); 
    }) 
    .fail(function(xhr) { 
     var httpStatus = (xhr.status); 
     var httpResponseCode = (xhr.getAllResponseHeaders); 
     var httpResponseText = (xhr.responseText); 
     var ajaxError = 'There was an error requesting the call back. HTTP Status: ' + httpStatus + ' ' + httpResponseText; 
     //make alert visible 
     $('#ajaxError').html(ajaxError).show(); 
    }); 
} 

function loopCalls(){ 
    getNewCallUrl().then(function(callUrl){ 
     return getMonitoredCall(callUrl); 
    }).then(function(){setTimeout(loopCalls,5000)}); 
} 
loopCalls();