项目需求📠

后端能够持续不断地将特定数据传输给前端，这些数据可能包括当前任务进度、实时聊天信息、点赞或评论等互动通知。

今天主要的目标就是如何实现数据间的传输

技术栈🪁

我想到的办法就是通过websocket协议实现这一操作

后端:python-flask

前端:uniapp-vue-js

错误案例❌

首先我在网络上找到了这么一个方案,先上代码给大家看一下

不要复制,是错的

不要复制,是错的

不要复制,是错的

错误代码

后端部分

from flask import Flask   from flask_socketio import SocketIO, emit   import time      app = Flask(__name__)   app.config['SECRET_KEY'] = 'your_secret_key'   socketio = SocketIO(app, cors_allowed_origins="*")      @socketio.on('start_task')   def handle_start_task():       # 模拟一个长时间运行的任务       for i in range(1, 101):           time.sleep(0.1)  # 假设每个步骤需要0.1秒           # 发送进度更新到客户端           emit('progress', {'progress': i}, broadcast=False)   if __name__ == '__main__':       socketio.run(app, debug=True, host='0.0.0.0', port=5000)

前端代码 

export default {     data() {       return {         socket: null,         progress: 0       };     },     methods: {       connectSocket() {         this.socket = uni.connectSocket({           url: 'ws://你的服务器地址:5000/',           success: () => {             console.log('WebSocket连接成功');             // 可以选择在这里发送'start_task'事件来启动任务             this.sendStartTask();           },           fail: (err) => {             console.error('WebSocket连接失败:', err);           }         });            // 监听WebSocket接收到的消息         uni.onSocketMessage((res) => {           if (res.data.includes('progress')) {             // 解析消息内容，这里假设服务器发送的是JSON字符串             const data = JSON.parse(res.data);             if (data.progress) {               this.progress = data.progress;               console.log('Progress update:', this.progress);               // 可以在这里更新UI或执行其他逻辑             }           }         });            // 监听WebSocket连接关闭         uni.onSocketClose(() => {           console.log('WebSocket连接已关闭');         });       },       sendStartTask() {         if (this.socket.readyState === 1) { // WebSocket连接已打开           this.socket.send(JSON.stringify({ event: 'start_task' }));         } else {           console.log('WebSocket连接未打开');         }       }     },     mounted() {       this.connectSocket();     }   };

问题分析

再说一遍上面的代码有问题,不要复制

上面的代码问题实在是太多,我暂时就不一一讲了,先讲一下为什么这段代码改都没办法改,还有要是一意孤行,会看到什么问题

按上面这样弄会看到什么

这段报错的意思是,没有 

@app.route('/')

就是根路径的执行函数,那我给它加上去不就完了

那么你会看到

这个意思是前端传回一条不可解析的数据

为什么会这样

一开始问题出在后端,按我刚刚说的加上去就行了

后面问题出在前端

前端上传的数据不能被后端的flask socketio访问到

查了很多资料才知道

原来这玩意跟torch一样,也有版本对应问题

现在flask socketio的版本基本上都是5.x,这里面就涉及到一个问题,前端的程序(架构里内置的apiuniapp,线上测试网页)很多都是之前做的,或者之前封装的,版本不匹配,所以发到后端的东西,后端不认识

正确的解决方案😎

只要老老实实自己手动安装Javascript socketio的最新版的了,如何用最原始的api来运行

下载和导入

命令行 cd 进入项目文件夹

然后

npm install socket.io-client

这个下的就是 Javascript socketio的最新版

然后再通过

import io from 'socket.io-client'

在uniapp文件中导入 

解决代码

放一下真正有用的代码,这个可以直接复制

后端

from threading import Lock from flask import Flask from flask_socketio import SocketIO, emit import time  app = Flask(__name__) app.config['SECRET_KEY'] = 'secret!' socketio = SocketIO(app,cors_allowed_origins = '*')   @socketio.on('start_task') def handle_start_task(data):     # 模拟一个长时间运行的任务     for i in range(1, 101):         time.sleep(0.1)  # 假设每个步骤需要0.1秒         # 发送进度更新到客户端         emit('message', {'progress': i}, broadcast=False)  # broadcast=False 表示不广播给所有连接的客户端   if __name__ == '__main__':     socketio.run(app, debug=True, host='0.0.0.0', port=5000)

在终端输入 flask run 运行

前端

代码讲解📐

简单的讲解一下代码

只要是为了防踩坑,没讲的不是特别重要,想知道为什么的可以自己用AI查一下

socketio = SocketIO(app,cors_allowed_origins = '*')

cors_allowed_origins = '*',用来解决跨域问题,要不然会400

@socketio.on('start_task')

监听事件"start_task"

emit('message', {'progress': i}, broadcast=False)

发送一个名为"message"的事件,{}里面是传递出去的数据,broadcast=False表示只向触发者发送,要向所有人发送改为True就行了

前端的解释,我就在注释中写了,有不懂欢迎留言

PS:回复很快

最后留一个运行结果😉