AngularJS解析ping響應

Question

我有一個基於AngularJS的SPA，它可以通過websocket發送ping請求到服務器。我想從詳細的響應中解析來自服務器的ping響應。即我想知道ping是成功還是失敗，每次成功/失敗的計數（我只想在下面的迴應中以粗體顯示信息）。還有一件事，我想達到的是，如果發生故障，在發送失敗的情況下顯示一些紅燈，並顯示總髮送數量中失敗的ping數量，如果成功則顯示綠燈亮起，並顯示總髮送數量爲成功ping數量。 請看看pingController.js和pingController.html。 這是我的大塊頭。 Send ping command to server

<div ng-repeat="message in messages track by $index "> 
{{message}} 
</div> 

我相信我創建，並通過幾個環節會後試過angularJS過濾器，我還沒有想出這樣做的正確方法。

SmartCartApp.filter('parseResponse', function() { 
    // function to invoke by Angular each time 
    // Angular passes in the `items` which is our Array 
    return function (messages) { 
    // Create a new Array 
    var filtered = []; 
    // loop through existing Array 
    for (var i = 0; i < messages.length; i++) { 
     var message = messages[i]; 
     var res = message.match(/Success/g); //this filters messages which has Success string in it. Looks like I need to create a multiple of those to just get Success/Failure 
     if(res !==null) 
     { 
     filtered.push(message); 
     } 

    } 
     return filtered; 
    }; 
}); 

服務器發送地響應基於成功/失敗到我的SPA。 下面是答案的樣子。

失敗：

NIC [;] 0.000000,0.000000,0.000000,0.000000,0.000000,0.000000 [，] 0,0,0,0,0,0 [，] 0.000000,0.000000,0.000000,0.000000， 0.001479,0.000000 [，] 0,0,0,0,0,0 [/] 03/06/2017 17：43：28.0251 [;] Ping [;] Status [;] Ping to www.google.com已解決地址：216.239.50.80 發送總數：22總成功數：0總錯誤數：22超時總數：0最小RTT（ms）：0最大RTT（ms）：0平均RTT（ms）：0.00 [ ] 03/06/2017 17：43：28.0251 [;] Ping [;] Ping結果[;] www.google.com [，] False [，] 10 [，] 1 [，] 3 [，] 0 [ ，] 216.239.50.80 [，] TtlExpired [，] True [，] TtlExpired [/] 03/06/2017 17; 43：28.0813 [;] Ping [;] Running [;] FALSE [/] 03/06/2017 17：43：28.1874 [;] Traffic [;] Total Traffic [;] 0.002960 [，] ] 0.003569 [，] 0 [，] 2.057E + 09 [，] ALL [/]

成功： 03/06/2017 17：48：45.2265 [;] Traffic [;] 0.000000,0.000000,0.000000,0.000000,0.000000,0.000000 [，] 0,0,0,0,0,0 [，] 0.000000,0.000000,0.000000,0.000000,0.000732,0.000000 [，] 0,0,0,0， 0,0 [/] 03/06/2017 17：48：45.3019 [;] Ping [;] Status [;] Ping to www.ibm.com：已解決地址：173.223.238.158 發送總數：9成功：9總錯誤：0總超時：0最小RTT（ms）：8最大RTT（ms）：14平均RTT（ms）：10.33 [/] 03/06/2017 17：48：45.3031 [ ] Ping [;] Ping結果[;] www.ibm.com [，]假[，] 10 [，] 1 [，] 3 [，] 9 [，] 173.223.238.158 [，]成功[，]假[，]無[03/06]/2017 17：48：46.2251 [;]交通[;]總交通[;] 0.002205 [，] 0 [，] 0.005805 [，] 0 [，] 2.057E + 09 [，] ALL [/] 03/06/2017 17：48：46.2251 [;] Traffic [;]通過NIC [;]的流量0.000000,0.000000,0.000000,0.000000,0.002205,0.000000 [，] 0,0,0,0,0,0 [，] 0.000000， 0.000000,0.000000,0.000000,0.005805,0.000000,0.000000,0.005805,0.000000 [，] 0,0,0,0,0,0 [/] 03/06/2017 17：48：47.2304 [;]流量[;]總流量[;] 0.000867 [，] 0 [，] 0.002704 [，] 0 [，] 2.057E + 09 [，] ALL [/] 03/06/2017 17：48：47.2304 [;]交通[;]交通方式

Answer 1

我發現這可以通過多種方式完成。 1）最簡單的方法是在JavaScript中使用字符串的匹配屬性。我也瞭解到，這可以使用角度過濾器或工廠/服務來完成。
這是我使用服務實現的。

myApp.service('ParseMessageService', function() { 
    this.myFunc = function(message) { 

    var res = message.match(/Success/g); 

    if (res !== null) { 
     //console.log(res); 
     TSent = message.match(/Total Sent: (\d+)/); 
     if (TSent) { 
     sent = TSent[1]; 
     //parsedMsg.push(TSent[1]); 
     //console.log(TSent[1]); //replace with $scope and display on Gui 
     } 
     TSucc = message.match(/Total Success: (\d+)/); 
     if (TSucc) { 
     succ = TSucc[1]; 
     //parsedMsg.push(TSucc[1]); 
     // console.log(TSucc[1]); //replace with $scope and display on Gui 
     } 
     TErr = message.match(/Total Errors: (\d+)/); 
     if (TErr) { 
     err = TErr[1]; 
     //parsedMsg.push(TErr[1]); 
     //console.log(TErr[1]); //replace with $scope and display on Gui 
     } 

    } 
    }