美文网首页python进阶
vuejs&flask with socketio

vuejs&flask with socketio

作者: Sevsea | 来源:发表于2018-08-06 19:28 被阅读69次

vuejs&flask with socketio

0x01 如何理解socketio

从小伙伴里听说socketio这个概念的时候,收到了一份能让你秒懂原理的代码。

虽然和实际操作有些偏差,但是不失为一个好理解的demo。

思路大致如下:
  1. flask作为后端,在socket.io.run时就与保持了socketio的开启,等待调用。
  1. js中的socket.emit('start')连接的正是连接后端flask的方法。

  2. flask中的start方法中emit('recv',i)正是将数据从后端传到前端,前端socket.on('recv',function)方法对传过来的数据做处理。

  3. 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部分

相关文章

网友评论

    本文标题:vuejs&flask with socketio

    本文链接:https://www.haomeiwen.com/subject/duggvftx.html