flask_socketio踩到的坑

最新推荐文章于 2024-08-30 15:31:37 发布

xiejunna

最新推荐文章于 2024-08-30 15:31:37 发布

阅读量2.8k

点赞数 2

分类专栏： python 文章标签： flask python flask-socketio

本文链接：https://blog.csdn.net/xiejunna/article/details/120111655

版权

python 专栏收录该内容

30 篇文章 2 订阅

订阅专栏

需求：

读视频里有人像图片的帧，拿到图片帧，传递给其他同事封装好的算法，获取去隐私后坐标信息。

实现方法：

python服务读取摄像头，拿到摄像头有人像的图片帧，利用flask_socketio推送给前端，进行界面显示。

由于之前也没有用过flask_socketio，这里把踩到的坑，记录一下。
参考博客和flask_socketio文档https://flask-socketio.readthedocs.io/en/latest/intro.html#installation

入坑记录：

第一步安装 pip install flask-socketio 其实这里坑最大，由于依赖的不止这一个包，所以只安装了这一个包后，安装的又是最新版本，服务端启动各种报错，即使安装也没有说明要安装哪个版本的，版本不兼容也是各种意想不到的问题，例如：服务端启动了，代码运行正常了，也可以连接上服务端socket，前端就是接收不到消息。
文档上对应的版本：此截图是flask_socketio文档上的版本要求，一定要遵循这个版本要求，由于版本问题，入坑了3天才出来！
项目用的依赖包：

python服务端依赖包：
flask-socketio            4.0.0
python-socketio           4.0.1
python-engineio           3.2.0
前端依赖包：
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/socket.io/1.3.6/socket.io.min.js"></script>

在这里插入图片描述
项目目录：

SocketTest.py示例如下：

# -*- coding:utf-8 -*-

from flask import Flask, render_template
from flask_socketio import SocketIO
from threading import Lock
import random
async_mode = None
app = Flask(__name__, static_folder='/', template_folder="/")
app.config['SECRET_KEY'] = 'secret!'
socketio = SocketIO(app, cors_allowed_origins="*")  # 允许跨域
thread = None
thread_lock = Lock()


# 如果访问地址中包含 /、/index、/index.html,则映射到index.html界面
@app.route('/')
@app.route('/index')
@app.route('/index.html')
def index():
    print('index')
    return render_template('index.html')


# 连接上socket后，需要做的事情 connect为连接的事件，固定这么写
@socketio.on('connect', namespace='/msg')
def test_connect():
    print('连接上socket服务')
    global thread
    with thread_lock:
        if thread is None:
            print(thread)
            thread = socketio.start_background_task(target=background_thread)
            print('thread is none create')


def callback_a():
    print('service callback success')


def callback_b():
    print('html callback success')


def background_thread():
    while True:
        socketio.sleep(10)
        t = random.randint(1, 100)
        msg = {'data': t}
        print(msg)
        socketio.emit('a', msg, namespace='/msg',  callback=callback_a())
        print(t)


# 接收到消息做的事情 message为接收消息的事件，如果是接收到的文本，用message，接收json，用json，固定这么写
@socketio.on('message', namespace='/msg')
def text(message):
    print(message)
    room = 'room1'
    t = random.randint(1, 100)
    msg = 'service-message-' + str(t)
    print(msg)
    socketio.emit('a', {'msg': msg}, namespace='/msg', callback=callback_b())


if __name__ == '__main__':
    # socketio.run(app, debug=True)
    socketio.run(app, host='0.0.0.0', debug=True, port=5000, log_output=True)

index.html示例如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>socketio 测试</title>

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" ></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/socket.io/1.3.6/socket.io.min.js"></script>
</head>
<body>
<div id="textid"></div>
<script type="text/javascript">
    $(document).ready(function() {
        
        var url = 'ws://127.0.0.1:5000/msg'
        console.log(url)

        var socket = io.connect(url);

		socket.on('a', function(res) {
		    console.log(res);
            var msg = res.data;
            console.log(msg);
            var res_str = JSON.stringify(res)
            socket.emit('message', 'html receive success');
            document.getElementById("textid").innerHTML = '<p>'+res_str+'</p>';
        });

		console.log("end")


    });
</script>
</body>
</html>