vuejs&flask with socketio
2018-08-06 本文已影响69人
Sevsea
vuejs&flask with socketio
0x01 如何理解socketio
从小伙伴里听说socketio这个概念的时候，收到了一份能让你秒懂原理的代码。
虽然和实际操作有些偏差，但是不失为一个好理解的demo。
思路大致如下：
- flask作为后端，在
socket.io.run时就与保持了socketio的开启，等待调用。
-
js中的
socket.emit('start')连接的正是连接后端flask的方法。 -
flask中的start方法中emit('recv',i)正是将数据从后端传到前端,前端socket.on('recv',function)方法对传过来的数据做处理。
-
disconnect 与 connect 方法原理与start一样，为判断起始的方法，可选择性调用。
flask - demo:
import os
import time
import shlex
import subprocess
from flask import Flask, copy_current_request_context, send_from_directory
from flask_socketio import SocketIO, emit
app = Flask(__name__)
app.config['SECRET_KEY'] = 'secret!'
socketio = SocketIO(app)
@app.route('/')
def index():
return send_from_directory('./', 'index.html')
@socketio.on('connect')
def test_connect():
print('Client connected')
@socketio.on('disconnect')
def test_disconnect():
print('Client disconnected')
@socketio.on('start')
def start():
print 1
for i in xrange(1, 100):
emit('recv', i)
time. sleep(1)
if __name__ == '__main__':
socketio.run(app, host='0.0.0.0', debug=True, )
html+js - demo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<input type="button" onclick="start();" value="start">
<pre id="message"></pre>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/socket.io/1.3.6/socket.io.min.js"></script>
<script type="text/javascript" charset="utf-8">
var socket = io.connect('http://' + document.domain + ':' + location.port)
socket.on('connect', function () {
})
socket.on('disconnect', function () {
socket.emit('disconnect')
})
socket.on('recv', function (data) {
document.getElementById("message").innerText += data + "\r\n"
})
function start() {
socket.emit('start')
}
</script>
</body>
</html>
0x02 vuejs&flask前后端处理
vuejs对socketio处理的官方文档:
https://github.com/MetinSeylan/Vue-Socket.io
通用方案:
(来源博客https://blog.csdn.net/a8725585/article/details/73650613）
export default{
data(){
return{
id:''
}
}
sockets:{
connect: function(){ //这里是监听connect事件
this.id=this.$socket.id
},
customEmit: function(val){
console.log('this method was fired by the socket server. eg: io.emit("customEmit", data)')
}
},
mounted(){
this.$socket.emit('connect', val); //在这里触发connect事件
}
methods: {
clickButton: function(val){
// $socket is socket.io-client instance
this.$socket.emit('emit_method', val);
}
}
}
main.js增加申明部分:
PS.此处可能申明有些小问题，可以在页面中再申明一次。
import VueSocketio from 'vue-socket.io';
Vue.use(VueSocketio, 'http://127.0.0.1:5000');
我这里是在click一个button元素的时候调用socketio异步传输数据,可以按照注视中的序号理解。
import Vue from 'vue'
import VueSocketio from 'vue-socket.io';
Vue.use(VueSocketio, 'http://127.0.0.1:5000');
function isInArray(arr,value){
for(var i = 0; i < arr.length; i++){
if(value.app_name === arr[i].app_name){
return true;
}
}
return false;
}
sockets:{
recv: function(data){//5.接受后端数据处理
this.num = data.num;
console.log(data);
//6.判断是否重复
if(isInArray(this.lists,data)===false && data.passport===this.input){
this.lists.push(data);
}
this.loading2 = false;
},
close:function(data){
this.closed = data.status
},
connect:function(){
this.id=this.$socket.id;
}
},
mounted(){
this.$socket.emit('connect', this.input); //在这里触发connect事件
},
methods: {
Query() {//1.点击事件
var date_start = new Date();
this.lists=[];
this.closed = 0;
this.$socket.emit('start', {'params':this.input});//2.将数据传到后端
},
}
from flask_socketio import SocketIO, emit
...
app=Flask(__name__)
socketio = SocketIO(app)
socketio.init_app(app)
...
def do():
//外部调用时使用socketio.emit
socketio.emit('recv',{'data':data}) //4.1传参数给前端
@socketio.on('start')
def main(data):
keyword=data.get('params')//3.获取参数
//do something...
//此处用emit即可
emit('recv',{'data':data})//4.2传参数给前端
do()
未完待续
待补充：
1.socketio auth部分
