当前位置:   article > 正文

vue flask 实现socket.io前后端交互_vue和flask交互

vue和flask交互

最近写一个项目,需要用到websocket,于是现学现用了vue的socket.io,后端采用flask进行响应,记录一下详细过程和socket.io的用法。

vue-socket.io 用法

vue-socket.io安装

使用在vue脚手架选择 运行依赖 搜索安装 vue-socket.io
或者直接命令行安装

npm install vue-socket.io --save

除此外还有一个附属 socket.io-client ,按需安装

vue-socket.io使用

要在vue里使用socket.io,要先在main.js里导入再使用
以下代码所在文件:main.js

import VueSocketIO from 'vue-socket.io'



Vue.use(new VueSocketIO({
    debug: true,    //  开启调试,方便查看socket状态,生产环境可关闭或删除
    connection: 'http://192.168.1.150:5000/api',{  // 此处为我的远程主机地址,如果本机则改为 127.0.0.1
    autoConnect:false  // false表示socket不自动进行连接,需要手动
}}))
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

如果安装了附属socket.io-client,可以这样写

import VueSocketIO from 'vue-socket.io'
import socketIO from 'socket.io-client'

Vue.use(new VueSocketIO({
  debug: true,
	connection: socketIO('http://192.168.1.150:5000/api', {
	  autoConnect:false
    })
}))
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

既然搭建了连接,就要使用它,以下是在组件中实现使用:
以下代码所在文件:welcome.vue (所要使用的组件名称)

<template>
    <span>flask返回的数据:</span>
    <br>
    <span>{{ this.data }}</span>
    <br>
    <span>{{ this.data['ip'] }}</span>
</template>

<script>
  export default {
    data () {
    	return{
    	data:{},   // 获取后端发送的消息
    	ip:null    
    	}
    },
    
    sockets:{    // socket.io携带,与watch/create/data等同级
    connect:function () {
    	console.log('连接成功')   // 判断是否正确连接上后端
    	},
    	
    api:function (data) {    // api为对应后端发出的信息接口,可自行更换
        this.data = data      // 获取后端发出的信息
      }
    },
    
    mounted () {    // 在组件开始渲染时进行调用
      this.$socket.connect() // socket连接
      this.$socket.emit('test')  // 发送消息:对应后端test测试函数
      console.log('连接中')
    },
    
    destroyed () {    // 当离开组件时,结束调用
      if (this.$socket) this.$socket.disconnect()  // 如果socket连接存在,销毁socket连接
      console.log('连接已断开')
    }
    
  }
</script>


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42

flask-socket.io 用法

flask-socket.io 安装

以下使用python环境为3.8,直接pip安装:
pip install flask-socketio

flask-socket.io 使用

创建一个flask应用,在app.py里写入:

from flask_socketio import SocketIO

socketio = SocketIO()
socketio.init_app(app)

'''
此处写入监听事件
'''
if __name__ == '__main__':
    socketio.run(app, host='192.168.1.150', port='5000', debug=True) # 注意不再使用app.run

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

以下是一个使用socket.io的例子

在上面代码注释处写入以下:

@socketio.on('test', namespace='api')   # 监听前端发回的包头 test ,应用命名空间为 api 
def test():  # 此处可添加变量,接收从前端发回来的信息
    print('触发test函数')
    socketio.emit('api', {'data': 'test_OK'}, namespace='api') # 此处 api 对应前端 sockets 的 api 
  • 1
  • 2
  • 3
  • 4

如上,namespace = ‘api’ ,可以理解为url后面添加的path,如我这里的命名空间改为test,则前端的url也要改为: http://192.168.1.150:5000/test

flask 与 vue 交互

到这里基本上一个flask和vue的交互就完成了,上面的代码得到结果如下:
结果
可以在一个@socketio.on里写多个函数,也可以通过更改on()实现多个前后端连接,因为在前端更改url对应后端api确实太过麻烦,需要考虑生命周期什么的,所以直接使用前端emit()对应后端的on()即可触发相应函数,如此处我将前端的组件里代码更改如下:

 mounted () {
      this.$socket.connect() // socket连接
      this.$socket.emit('status')  // 发送消息:status 对应后端监控函数
      console.log('连接中')
    },
  • 1
  • 2
  • 3
  • 4
  • 5

同时后端添加on函数对应

@socketio.on('status', namespace='api')
def connect():
    pass   # 此处接入线程等,实现函数调用

def status_thread():
	pass   # 真正调用的函数
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

则可实现不同的api接口,结果如下:
在这里插入图片描述

文章到这里就结束了,看完后,对代码如果有什么疑问可以评论或私信,觉得有用的话还可以关注收藏一手- ’ v ’ - 十分感谢。

循循而进,一往无前。

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/AllinToyou/article/detail/66549
推荐阅读
相关标签
  

闽ICP备14008679号