【学习笔记】使用flask 制作websocket协议连接，实现服务器多次向前端发送数据

烟花节

于 2024-08-09 19:54:47 发布

阅读量1.3k

点赞数 38

分类专栏：学习笔记文章标签：学习笔记 flask 服务器 websocket

本文链接：https://blog.csdn.net/2202_75832991/article/details/141068741

版权

学习笔记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

项目需求📠

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

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

技术栈🪁

我想到的办法就是通过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 运行

前端

<template>
	<view>
		<!-- 你的页面内容 -->
	</view>
</template>

<script>
	// 引入socket.io-client  
	import io from 'socket.io-client';

	export default {
		data() {
			return {
				socket: null,
			};
		},
		created() {
			// 连接到Socket.IO服务器,这是本地地址,改成你服务器的地址也行   
			this.socket = io('http://127.0.0.1:5000');
			// 监听连接事件  
			this.socket.on('connect', () => {
				console.log('连接成功');
                //连接成功向后端发送一个事件"start_task",{}里面是携带的数据
				this.socket.emit('start_task', {
					detail: 'Please start the task now!'
				});
			});

			// 监听事件
            //这里的事件名要和后端发过来的事件名对应,如后端发了一个名为"message"的事件
            //这里得填"message" 
			this.socket.on('message', (data) => {
				console.log('收到消息:', data);

			});

			// 监听断开连接事件  
			this.socket.on('disconnect', () => {
				console.log('连接断开');
			});
		},
		beforeDestroy() {
			// 组件页面销毁前断开连接  
			if (this.socket) {
				this.socket.disconnect();
			}
		},
	};
</script>