AJAX輪詢的實時監控畫面

　　上一篇我們通過異步刷新Ajax 技術，來實現監控頁面監控位號值的刷新，采用Ajax （Asynchronous Javascript And XML）技術，是指一種創建交互式、快速動態網頁應用的網頁開發技術，無需重新加載整個網頁的情況下，能夠更新部分網頁的技術。

　　重點：異步和部分網頁更新，通過在后台與服務器進行少量數據交換，Ajax 可以使網頁實現異步更新。同時，這意味着可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。

 

　　上文我們采用用戶點擊click事件來加載數據，tag值每次更新需要用戶主動點擊按鈕來獲取tag的最新值，對於監控頁面來說我們可能希望界面數據是主動刷新的，用戶無須操作模式下，能夠直觀看到數據的變化情況，如下圖 PV/SP 值。

 

 

3.1. 定時ajax輪詢技術

　　以滿足當前的需求來說，實現數據的實時刷新效果最簡單粗暴的方式就是采用定時ajax輪詢技術，我們就能快速把原型演化到主動更新tag當前值了。在某些特定的場景下，簡單粗暴是最好滿足需求手段和方式。下面我們把代碼稍微重構一下就能夠滿足這個需求。

 

        //JQuery 代碼入口
        $(document).ready(function(){
 
            setInterval("getData()",3000);
 
        });

        function testClick() {
            //模擬改變值
            //$("#divTag").html('2020');

            ////模擬異步從后台獲得值
            //$.ajax({url:"/getTagCurValue",success:function(result){
            //    $("#divTag").html(result);
            //}});

            getData();

        }

        function getData() {
            //模擬異步從后台獲得值
            $.ajax({url:"/getTagCurValue",success:function(result){
                $("#divTag").html(result);
            }});
        }

 

3.2. IDE運行調試

　　在集成開發環境里，F5重新測試頁面，就會看到一個主動tag值主動變化的監控界面，如下圖：

 

　　Flask運行后台也能監控到每次url請求，如下圖：

 

 

　　瀏覽器端也能通過開發者工具F12，監控到網絡請求。

　　到這一步，我們完成了一個簡單粗暴的實時刷新監控界面的原型。

 

3.3. 設置Flask工程端口號

　　Flask每次運行F5測試頁面，我們發現項目的端口都是隨機變化的，為了方便測試通過設置工程屬性，把項目的端口設置一個固定值，如下圖：

 

 

  

3.4. 小結

　　本小節我們通過使用ajax定時輪詢來刷新數據，使得監控界面的數據看起來是實時刷新的，從而讓技術原型基本具備了實時刷新的效果，基本滿足了驗證要求。同時，我們也能看到ajax輪詢的網絡及帶寬的消耗都是相對較高的，從服務端請求響應和瀏覽器調試都能跟蹤到請求的情況，因此從技術的性能來看還不是較好的選擇。當然在局域網等內部系統上這個已經達到了監控界面的基本要求，下一篇我們演示采用如何通過websocket技術來提高數據的傳輸效率。