vue flask 实现socket.io前后端交互_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 ’ - 十分感谢。

循循而进，一往无前。