flask后端+网页前端：基于 socket.io 的双向通信和服务器部署

2024-04-12 09:36
文章标签 网页 部署 服务器 前端 后端 frontend flask io socket 双向通信

本文主要是介绍flask后端+网页前端：基于 socket.io 的双向通信和服务器部署，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

我想实现的效果是，我的服务器提供两个路由网址，网页A用于拍照、然后录音，把照片和录音传给服务器，服务器发射信号，通知另一个路由的网页B更新，把刚刚传来的照片和录音显示在网页上。

然后网页B用户根据这个照片和录音，回答一些问题，输入答案的文本，传给服务器。服务器拿到答案后，再发射信号，把这个结果显示在网页A上。

这就得用到双向通信（其实有点类似两个网页聊天的功能，而且支持发送语音、图片、文本三种消息）。这里用的是 socket.io 包。在本地写还是很好写的，但是，部署到服务器上之后，就出了很多 bug。很多坑，这里把我遇到的记下来，防止再次犯错。

这里只记录关键代码，也就是容易掉坑的代码。整个项目我之后会上传到 github 上。传好了补连接。

整体的逻辑

  1. 建立双向通道
  2. 网页A上传文件，得到服务器传回的提示信号（code: 200），然后 socket.emit("upload_completed")，通知服务器数据已经上传了
  3. 服务器监听 upload_completed 信号，收到该信号后，服务器作为中转站，广播信号 emit('data_updated', data, broadcast=True) 通知前端该更新数据了
  4. 网页 B 监听 data_updated 信号，修改自己的页面，展示图片和录音。等用户在该网页填好答案之后，点击发送按钮，网页 B 发生信号 socket.emit("annotated_answer")
  5. 服务器监听 annotated_answer 信号，收到该信号后，作为中转站，广播信号 emit('send_answer', answer, broadcast=True)
  6. 网页 A 监听信号 send_answer ，收到该信号后，把结果显示在网页上

特别拎出来的坑，特别注意

  1. 运行 flask 代码的时候调用 socketio 的 run 方法，不是用 app 的 run 方法，不然没法双向连接的；但是在服务器端部署的时候，用 uwsgi 跑上，它就是默认调用 app.run，很崩溃的啊这个；所以服务器端部署的时候，用 gunicorn （这个部署，真的，翻遍全网才找到，落泪了）
  2. socket 连接的地址，本地调试的时候填的是 localhost，但是传到服务器要改成服务器的地址，不该的话，连不上的！！
  3. 刚刚更新模型的时候又出毛病，爬上来更新。这次没有报任何错误，但是网页就是访问不到。检查了一个小时，发现是因为梯子忘记关了
  4. 部署后手机端打不开录音设备和摄像头，那是因为，媒体设备只能在 https 协议下，或者 http://localhost 下访问，所以要用这个功能，就必须去申请 ssl 证书。阿里云有免费的 20 张，好好把握。

flask 代码

我这里只贴最关键的代码，加上注释，直接把这个代码粘上去，是会报错的。

@app.route('/upload', methods=['POST'])
def app_upload_file():# 保存图片img_file = request.files['img']if img_file.filename == '':return jsonify({'error': 'No image'}), 400try:image_path = os.path.join(app.config['UPLOAD_FOLDER'], img_file.filename)img_file.save(image_path)shutil.copy(image_path, os.path.join(os.path.dirname(__file__), 'static/show.jpg'))  # 用于展示在网页上log(f"save image: {image_path}")except Exception as e:return jsonify({'error': str(e)}), 500try:# 传过来的就是文本question = request.form['question']except:question = "请描述图片内容"return jsonify({"image": img_file.filename, "question": question})@app.route('/upload/speech', methods=['POST'])
def recognize_speech():speech_file = request.files['speech']try:save_path = os.path.join(app.config['UPLOAD_FOLDER'], speech_file.filename)speech_file_path = os.path.join(app.config['UPLOAD_FOLDER'], save_path)speech_file.save(speech_file_path)# question = speech2txt(speech_file_path)# print('百度识别结果：', question)except Exception as e:return jsonify({'error': str(e)}), 500return jsonify({"speech": speech_file.filename})@socketio.on('upload_completed')
def handle_upload_completed(data):# pip install flask-socketio eventletprint(data)try:emit('data_updated', data, broadcast=True)except Exception as e:print(e)emit('error', {'error': str(e)})@socketio.on('upload_speech_completed')
def handle_upload_speech_completed(data):# pip install flask-socketio eventlettry:emit('data_speech_updated', data, broadcast=True)except Exception as e:print(e)emit('error', {'error': str(e)})@socketio.on('annotated_answer')
def handle_annotated_answer(answer):log(f'get answer from annotator: {answer}')try:emit('send_answer', answer, broadcast=True)except Exception as e:print(e)if __name__ == '__main__':# app.run(host='0.0.0.0', port=8099)# 这个地方！！看清楚！看清楚！要调用 socketio 的 run 方法，不是用 app 的 run 方法，不然没法双向连接的socketio.run(app, host='0.0.0.0', allow_unsafe_werkzeug=True, port=8099)

网页 A 的代码

注意这里只贴了一部分代码，关于文件怎么上传的，也就是引入的 camera.js 和 recorder.js 这俩文件的内容，在我这这篇文章里贴了： flask 后端 + 微信小程序和网页两种前端：调用硬件(相机和录音)和上传至服务器

html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="{{ url_for('static', filename='css/full_button.css') }}" type="text/css"><script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.min.js"></script>
</head>
<body><div style="display: flex"><div><video id="videoElement" autoplay="autoplay" muted="muted" style="width: 40px"></video><img id="photo" alt="你的照片" src="" style="display: none"></div><div id="answer" class="answer-text">答案等待中...</div></div><div class="button-grid"><button id="snapButton">拍摄照片</button><button id="recorderButton">录音</button><button id="captionButton">描述图片</button><button id="vqaButton">回答问题</button></div>{#    <input type="text" id="textQuestion" placeholder="请输入问题...">#}<script>// 这里最最最关键的就是这个网址，如果你在本地跑，要填 localhost，不能填 127.0.0.1；如果是部署在服务器，要填成服务器的地址，不然肯定是连不上的。const socket = io.connect('http://localhost:8099'); // 连接到Flask服务器socket.on('send_answer', function (data) {// 接收到服务器返回的答案，震动提示，把答案显示在页面上console.log('接收到答案：', data);document.getElementById('answer').textContent = data;navigator.vibrate([200]);  // 震动提示收到答案})var imageBlob = null;  // 拍摄的图片var speechBlob = null;  // 提出的问题// 生成随机文件名function randomFilename() {let now = new Date().getTime();let str = `xxxxxxxx-xxxx-${now}-yxxx`;return str.replace(/[xy]/g, function(c) {const r = Math.random() * 16 | 0;const v = c === 'x' ? r : (r & 0x3 | 0x8);return v.toString(16)})}</script><script type="text/javascript" src="../static/js/user_camera.js"></script><script type="text/javascript" src="../static/js/user_recorder.js"></script><script>// 绑定 caption 按钮document.getElementById('captionButton').onclick = function () {if (imageBlob == null) {alert('请先拍摄照片，再点击“描述图片”按钮')} else {const captionFormData = new FormData();let imgFilename = randomFilename()+'.jpg';captionFormData.append('img', imageBlob, imgFilename);captionFormData.append('question', '请描述图片内容');fetch('http://localhost:8099/upload', {method: 'POST',body: captionFormData}).then(response => {console.log('response:', response);if (response.status === 200) {console.log('发射信号 upload_completed');// 注意！！这里发射的信号，带的数据，得是URL.createObjectURL(imageBlob)不能是别的不能是别的不能是别的，重要的事情说3遍！！不然无法正确地显示在网页 B 上socket.emit('upload_completed', {'image': URL.createObjectURL(imageBlob),'question': '请描述图片内容'});}}).then(data => console.log('data:', data)).catch(error => console.error(error));}};// 绑定 vqa 按钮document.getElementById('vqaButton').onclick = function () {if (imageBlob == null) {alert('请先拍摄照片，再点击“描述图片”按钮')} else {if (speechBlob == null) {alert('您还没有提问，请先点击录音按钮录音提问')} else {let filename = randomFilename();// 先发语音再发图片，因为发了图片之后会提示听录音const speechFormData = new FormData();speechFormData.append('speech', speechBlob, filename+'.wav');fetch('http://localhost:8099/upload/speech', {method: 'POST',body: speechFormData}).then(response => {console.log('response:', response);if (response.status === 200) {console.log('成功上传音频', response);socket.emit('upload_speech_completed',{'speech': window.URL.createObjectURL(speechBlob)})}}).then(data => console.log('data:', data)).catch(error => console.error(error));const imgFormData = new FormData();imgFormData.append('img', imageBlob, filename+'.jpg');fetch('http://localhost:8099/upload', {method: 'POST',body: imgFormData}).then(response => {console.log('response:', response);if (response.status === 200) {console.log('发射信号 upload_completed');socket.emit('upload_completed', {'image': URL.createObjectURL(imageBlob),'question': '请听录音'});}}).then(data => console.log('data:', data)).catch(error => console.error(error));}}};</script>
</body>
</html>

网页 B 的代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>human-annotation</title><script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.min.js"></script></head>
<body><img id="image" src="" alt="Your Image"><audio id="audioPlayer" controls class="audio-player"></audio><div style="display: flex">提问：<div id="question"></div></div><input type="text" id="textInput" placeholder="请输入答案..."><button id="submitButton">发送</button><script>// 这里也是，大坑，大坑啊！！这个地址要填对，本地用 localhost，云端用云端服务器地址啊！var socket = io.connect('http://localhost:8099'); // 连接到Flask服务器socket.on('data_updated', function(data) {// 当接收到来自服务器的数据时，更新页面内容var img = document.getElementById('image');img.src = data.image;console.log('img.src');// document.getElementById('image').innerHTML = '<img src="' + data.image + '" alt="Uploaded Image">';document.getElementById('question').textContent = data.question;});socket.on('data_speech_updated', function (data) {var audioPlayer = document.getElementById("audioPlayer");audioPlayer.src = data.speech;});// 监听按钮点击事件document.getElementById('submitButton').addEventListener('click', function() {// 获取输入框中的文本var message = document.getElementById('textInput').value;// 验证消息是否为空if (message.trim() !== '') {// 通过Socket.IO发送消息给服务器socket.emit('annotated_answer', message);// 清空输入框document.getElementById('textInput').value = '';} else {alert('Please enter a message.');}});</script>
</body>
</html>

部署

用 gunicorn 部署

配置文件：
gunucorn配置文件
运行命令：运行命令

这篇关于flask后端+网页前端：基于 socket.io 的双向通信和服务器部署的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/896757。

相关文章

一文教你Python如何快速精准抓取网页数据

一文教你Python如何快速精准抓取网页数据

《一文教你Python如何快速精准抓取网页数据》这篇文章主要为大家详细介绍了如何利用Python实现快速精准抓取网页数据,文中的示例代码简洁易懂,具有一定的借鉴价值,有需要的小伙伴可以了解下... 目录1. 准备工作2. 基础爬虫实现3. 高级功能扩展3.1 抓取文章详情3.2 保存数据到文件4. 完整示例
阅读更多...
python获取网页表格的多种方法汇总

python获取网页表格的多种方法汇总

《python获取网页表格的多种方法汇总》我们在网页上看到很多的表格,如果要获取里面的数据或者转化成其他格式,就需要将表格获取下来并进行整理,在Python中,获取网页表格的方法有多种,下面就跟随小编... 目录1. 使用Pandas的read_html2. 使用BeautifulSoup和pandas3.
阅读更多...
Go语言开发实现查询IP信息的MCP服务器

Go语言开发实现查询IP信息的MCP服务器

《Go语言开发实现查询IP信息的MCP服务器》随着MCP的快速普及和广泛应用,MCP服务器也层出不穷,本文将详细介绍如何在Go语言中使用go-mcp库来开发一个查询IP信息的MCP... 目录前言mcp-ip-geo 服务器目录结构说明查询 IP 信息功能实现工具实现工具管理查询单个 IP 信息工具的实现服
阅读更多...
HTML5中的Microdata与历史记录管理详解

HTML5中的Microdata与历史记录管理详解

《HTML5中的Microdata与历史记录管理详解》Microdata作为HTML5新增的一个特性，它允许开发者在HTML文档中添加更多的语义信息，以便于搜索引擎和浏览器更好地理解页面内容，本文将探... 目录html5中的Mijscrodata与历史记录管理背景简介html5中的Microdata使用M
阅读更多...
html5的响应式布局的方法示例详解

html5的响应式布局的方法示例详解

《html5的响应式布局的方法示例详解》：本文主要介绍了HTML5中使用媒体查询和Flexbox进行响应式布局的方法，简要介绍了CSSGrid布局的基础知识和如何实现自动换行的网格布局，详细内容请阅读本文，希望能对你有所帮助... 一 使用媒体查询响应式布局        使用的参数@media这是常用的
阅读更多...
HTML5表格语法格式详解

HTML5表格语法格式详解

《HTML5表格语法格式详解》在HTML语法中，表格主要通过table、tr和td3个标签构成,本文通过实例代码讲解HTML5表格语法格式，感兴趣的朋友一起看看吧... 目录一、表格1.表格语法格式2.表格属性 3.例子二、不规则表格1.跨行2.跨列3.例子一、表格在html语法中，表格主要通过< tab
阅读更多...
springboot上传zip包并解压至服务器nginx目录方式

springboot上传zip包并解压至服务器nginx目录方式

《springboot上传zip包并解压至服务器nginx目录方式》：本文主要介绍springboot上传zip包并解压至服务器nginx目录方式,具有很好的参考价值,希望对大家有所帮助,如有错误... 目录springboot上传zip包并解压至服务器nginx目录1.首先需要引入zip相关jar包2.然
阅读更多...
将Java项目提交到云服务器的流程步骤

将Java项目提交到云服务器的流程步骤

《将Java项目提交到云服务器的流程步骤》所谓将项目提交到云服务器即将你的项目打成一个jar包然后提交到云服务器即可,因此我们需要准备服务器环境为：Linux+JDK+MariDB（MySQL）+Gi... 目录1. 安装 jdk1.1 查看 jdk 版本1.2 下载 jdk2. 安装 mariadb(my
阅读更多...
Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

《Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案》：本文主要介绍Vue3组件中getCurrentInstance()获取App实例,但是返回nu... 目录vue3组件中getCurrentInstajavascriptnce()获取App实例，但是返回n
阅读更多...
JS+HTML实现在线图片水印添加工具

JS+HTML实现在线图片水印添加工具

《JS+HTML实现在线图片水印添加工具》在社交媒体和内容创作日益频繁的今天,如何保护原创内容、展示品牌身份成了一个不得不面对的问题,本文将实现一个完全基于HTML+CSS构建的现代化图片水印在线工具... 目录概述功能亮点使用方法技术解析延伸思考运行效果项目源码下载总结概述在社交媒体和内容创作日益频繁的
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2