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