亲宝软件园·资讯

展开

Flask-Sockets实时的监控画面

wuch 人气:1

  Ajax轮询是通过特定的的时间间隔(如每1秒),由浏览器对服务器发出HTTP请求,然后由服务器返回最新的数据给客户端的浏览器。这种简单粗暴模式有一个明显的缺点,就是浏览器需要不断的向服务器发出请求,HTTP请求可能包含较长的头部,其中真正有效的数据可能只是很小的一部分,显然这样会浪费很多的带宽等资源(对于很多局域网内的企业应用,这个简单粗暴模式确实解决问题)。

1.1.    websocket简介

  本文接下来采用一种更加高效率的服务端主动推送技术(WebSocket )来提高数据的传输效率。WebSocket通信协议 是 HTML5 开始支持的一种在单个 TCP 连接上进行全双工通讯的协议。在 WebSocket 技术架构中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输。

  浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求,连接建立以后,客户端和服务器端就可以通过 TCP 连接直接交换数据。当你获取 Web Socket 连接后,可以通过 send() 方法来向服务器发送数据,并通过 onmessage 事件来接收服务器返回的数据。  

1.2.  创建一个Flask-Sockets服务端项目

  本例我们通过VS2019创建一个空的Python项目,来实现Flask-Sockets服务端代码,我们在现有的解决方案里添加一个Project,如下图:

 

1.2.1. 安装Flask-Sockets组件

Flask我们可采用Flask-Sockets组件来实现websocket 通信验证原型,

组件网址:https://github.com/heroku-python/flask-sockets

安装命令:pip install Flask-Sockets

vs community 我们可以直接在Python Environment 安装Flask-Sockets组件(注意字母大小写,否则不能安装成功),如下图:

1.2.2. 实现websocket服务端源码

服务端先实现由服务端定时推送一个自增的变量值给客户端,代码如下:

      
from flask import Flask
from flask_sockets import Sockets
import time

app = Flask(__name__)
sockets = Sockets(app)


@sockets.route('/tagCurValue')
def tagCurValue(ws):
    '''
        代码模拟每5秒钟,定时给客户端推送一个自增的变量数据
    '''
    n=0
    while not ws.closed:
        n=n+1
        ws.send(str(n))
        print("tag curent value:"+ str(n))
        time.sleep(5)


@app.route('/')
def hello():
    return 'Hello World!'


if __name__ == "__main__":
    from gevent import pywsgi
    from geventwebsocket.handler import WebSocketHandler
    server = pywsgi.WSGIServer(('0.0.0.0', 5000), application=app, handler_class=WebSocketHandler)
    print('Server Start')
    server.serve_forever()  

server = pywsgi.WSGIServer(('0.0.0.0', 5000), application=app, handler_class=WebSocketHandler)

上述代码的'0.0.0.0'要注意赋值,组件的Example例子是一个空字符串,笔者也踩了坑,花费不少时间才找到案例运行失败的原因。

1.2.3. 运行FlaskSocketSvr服务端

首先,我们需要把FlaskSocketSvr设置成解决方案的默认项目,后然F5运行测试环境如下图:

浏览器地址栏输入以下网址:http://127.0.0.1:5000/ 结果如下图:

 

1.2.4. 重构客户端代码

  现在我们重构客户端代码以便可以访问服务端提高的websocket URL获得数据更新

http://127.0.0.1:5000/tagCurValue 

UI JS代码如下:

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

            if ("WebSocket" in window) {
                //连接server--TagCurValue
                var ws = new WebSocket("ws://127.0.0.1:5000/tagCurValue");
                //var ws = new WebSocket("ws://127.0.0.1:8008/tagCurValue");
                ws.onmessage = function (evt) {
                    // 接收数据
                    receivedMsg = evt.data;
                    $("#divTag").html(receivedMsg);

                };
            }

 
        });

  

现在我们在Project通过Python菜单执行Start server,然后再F5运行服务端,我们就可以通过浏览器运行测试页面了。

 

测试页面url:http://127.0.0.1:8008/

 

我们也能通过浏览器的开发工具查看网络访问只发生了一次。

 

1.3.    读取opc服务的tag位号值

  最后,我们再把tagCurValue'重构成真正读取opc服务某一个tag位号的值。以完成了从UI端到服务端主动获取opc服务tag位号值,并更新UI界面的技术原型。views文件函数tagCurValue'代码修改如下:

@sockets.route('/tagCurValue')
def tagCurValue(ws):
    import OpenOPC
    while not ws.closed:
        opc = OpenOPC.client()
        opc.connect('Matrikon.OPC.Simulation')
        result= opc['Random.Int1']
        opc.close()
        ws.send(unicode( result))
        print("tag curent value:"+ unicode( result))
        time.sleep(5)

 现在,我们重新运行测试环境,结果如下图:

1.4.    小结

  本小节介绍了如何通过采用websocket技术,实现由服务端主动Send数据到UI端的通信模式,客户端实时刷新UI端tag位号的当前值,提高了数据传输的效率和性能,样例的FlaskSocketSvr服务也演示了一个独立的服务端到UI端的数据传输方式(独立的服务端地址)。最后,新的服务也通过读取OPC server的tag位号值演示了通过OPC Sever获取监控设备数据的方式。

 

加载全部内容

相关教程
猜你喜欢
用户评论