vue flask 实现socket.io前后端交互
最近写一个项目,需要用到websocket,于是现学现用了vue的socket.io,后端采用flask进行响应,记录一下详细过程和socket.io的用法。目录vue-socket.io 用法vue-socket.io安装vue-socket.io使用flask-socket.io 用法flask 与 vue 交互vue-socket.io 用法vue-socket.io安装使用在vue脚手架选
最近写一个项目,需要用到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不自动进行连接,需要手动
}}))
如果安装了附属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
})
}))
既然搭建了连接,就要使用它,以下是在组件中实现使用:
以下代码所在文件: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>
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
以下是一个使用socket.io的例子
在上面代码注释处写入以下:
@socketio.on('test', namespace='api') # 监听前端发回的包头 test ,应用命名空间为 api
def test(): # 此处可添加变量,接收从前端发回来的信息
print('触发test函数')
socketio.emit('api', {'data': 'test_OK'}, namespace='api') # 此处 api 对应前端 sockets 的 api
如上,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('连接中')
},
同时后端添加on函数对应
@socketio.on('status', namespace='api')
def connect():
pass # 此处接入线程等,实现函数调用
def status_thread():
pass # 真正调用的函数
则可实现不同的api接口,结果如下:
文章到这里就结束了,看完后,对代码如果有什么疑问可以评论或私信,觉得有用的话还可以关注收藏一手- ’ v ’ - 十分感谢。
循循而进,一往无前。
更多推荐
所有评论(0)