flask_socketio踩到的坑

清疚 2022-09-10 05:16 216阅读 0赞

## 需求： ##

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

## 实现方法： ##

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

由于之前也没有用过flask\_socketio，这里把踩到的坑，记录一下。  
参考博客和flask\_socketio文档[https://flask-socketio.readthedocs.io/en/latest/intro.html\#installation][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>

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAeGllanVubmE_size_20_color_FFFFFF_t_70_g_se_x_16]  
项目目录：  
![在这里插入图片描述][47a4edaf93994bef825a84cea49e8be5.png]  
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>

浏览器访问：  
http://localhost:5000/index.html  
![在这里插入图片描述][5acee81a304b4294af4b2208cf3c1385.png]

[https_flask-socketio.readthedocs.io_en_latest_intro.html_installation]: https://flask-socketio.readthedocs.io/en/latest/intro.html
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAeGllanVubmE_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/e841af2263e14255a97d93e0c8968842.png
[47a4edaf93994bef825a84cea49e8be5.png]: /images/20220829/7c908abb39d54f9ebe9015d9c3f2b288.png
[5acee81a304b4294af4b2208cf3c1385.png]: /images/20220829/3eca88845040485abe8df0df963366c5.png