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技术来提高数据的传输效率。