websocket实时监控画面

　　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获取监控设备数据的方式。