使用Flask-SocketIO推送图片实现页面图片动态更新

需求背景 #

通过Flask-SocketIO实现服务端定期向客户端推送图片，替换页面img标签的展示内容。

原有实现代码 #

服务端（app.py） #

with open(f'{app.static_folder}\\image.jpg', 'rb') as f:
        img = f.read()

socketio.emit('my_response',
             {'data': 'Server generated event', 'count': count,
              'image': img})

客户端（test.js） #

socket.on('my_response', function(msg) {     
    let arrayBufferView = new Uint8Array(msg['image']);
    console.log(arrayBufferView);
    var blob = new Blob( [ arrayBufferView ], { type: "image/jpeg" } );
    var img_url = URL.createObjectURL(blob);
    console.log(img_url);
    $("#img_cam").attr("src", img_url);
});

问题现象 #

运行后页面图片未更新，经排查：

• SocketIO传输的数据无异常
• 前端Uint8Array转换后的数据正常
• 页面内手动添加按钮绑定本地文件路径更新img src的逻辑可正常运行

解决方案 #

问题根因为HTML页面内img标签的id拼写错误，与js中选择的#img_cam不匹配，上述贴出的代码逻辑本身可正常运行。

内容的提问来源于stack exchange，提问作者Eddie C.