基于flask_socketio实现websocket，实时向页面推送消息

基于socketio实现websocket

后端代码

socket_data={}
num1=1

def stage_connect():
    while True:
        socketio.sleep(1)
        global num1
        global socket_data
        if type(socket_data)==unicode:
            socket_data=json.loads(socket_data)
        if len(socket_data) == 0:
            socket_data = {'text': '', 'Sdate': '', 'Edate': ''}
        new_num=counts(u"""select count(*) as c from tsgz_log""")
        if int(new_num[0]['c'])!=int(num1):
            l=logs(socket_data['text'],socket_data['Sdate'],socket_data['Edate'])
            socketio.emit('log',
                          {'data': l},
                          namespace='/stage/log_websocket')
            num1=new_num[0]['c']
        else:
            pass

socket连接，主动连接
@socketio.on('connect', namespace='/stage/log_websocket')
def connect():
    socketio.start_background_task(target=stage_connect)

接收前端发送的参数，my_event是事件名称，接收指定事件名的参数
@socketio.on('my event',namespace='/stage/log_websocket')
def my_event(data):
    global socket_data
    socket_data=data
    
if __name__ == '__main__':
    # app = create_app()
    # app.run(host='0.0.0.0', debug=True, port=5002)
    app = create_app()
    socketio.run(app, debug=True, port=5002, host='0.0.0.0')

前端代码

连接到指定的命名空间
var namespace = '/stage/log_websocket';
socket = io.connect(location.protocol + '//' + document.domain + ':' + location.port + 	  namespace);

向指定的命名事件发送数据
socket.emit('my_event',data)

接收指定事件发送过来的数据
socket.on('log', function(res) {
	            that.list = res.data.list
	        });

<script src="js/islogin.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap-datepicker3.standalone.min.css"/>
<div class="log-box" id="log">
	<!--搜索条件-->
	<div class="log-search">
		<div class="user-search-box">
			<input type="text" placeholder="" v-model="text" class="border-box"> 
			<span>开始时间</span> 
			<input type="text" class="border-box datepicker" v-model="Sdate" tab="Sdate"/>
			<span>结束时间</span>
			<input type="text" class="border-box datepicker" v-model="Edate" tab="Edate"/>
			<div class="user-search-btn" v-on:click="query"><span>搜索</span></div>
			<span class="glyphicon glyphicon-repeat" title="清空条件"></span>
		</div>
	</div>
	<div class="scroll">
		<ul>
			<li v-for="item in list" :key="item.id"><b></b><span>{{item}}</span></li>
		</ul>
	</div>
</div>
<script src="js/bootstrap-datepicker.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap-datepicker.zh-CN.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/socket_io.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	var namespace = '/stage/log_websocket';
	socket = io.connect(location.protocol + '//' + document.domain + ':' + location.port + namespace);
	var v = new Vue({
		el:"#log",
		data:{
			text:"",
			Sdate:"",
			Edate:"",
			list:[]
		},
		mounted(){
			this.init()
		},
		methods:{
			//查询
			query(){
				var that = this
				var data = JSON.stringify({text:that.text,Sdate:that.Sdate,Edate:that.Edate})
				$.ajax({
					type:"get",
					url:urll+"stage/logs?text="+that.text+"&Sdate="+that.Sdate+"&Edate="+that.Edate,
					async:true,
					success:function(result){
						if(result.error_code==0){
		                	that.list = result.list
		                	pro_back(result.message)
							socket.emit('my event',data)
		                }else{
		                	pro_back(result.message)
		                }
					},
					error:function(){},
				});
			},
			init(){
				var that = this;
				//时间插件初始化
				$(".datepicker").datepicker({
				    language: "zh-CN",
				    format: 'yyyy-mm-dd',
				    clearBtn: true,
					autoclose: true,
				}).on("changeDate",function(e){
					that[$(this).attr("tab")] = $(this).val()
				});
				$.ajax({
					type:"get",
					url:urll+"stage/logs?text=&Edate=&Sdate=",
					async:true,
					success: function(result) {
		                if(result.error_code==0){
		                	that.list = result.list
		                	pro_back(result.message)
		                }else{
		                	pro_back(result.message)
		                }
		            },
		            error:function(xhr){console.log(xhr)}
				});
				socket.on('log', function(res) {
		            that.list = res.data.list
		        });
			}
		}
	})
</script>