flask flask-socketio创建一个网页聊天应用
应用所需环境：
python 3.11.11
其他 只需要通过这个命令即可
pip install flask==3.1.0 Flask-SocketIO==5.4.1 -i https://mirrors.tuna.tsinghua.edu.cn/pypi/web/simple
最好是用conda创建一个新的虚拟环境来验证
完整的pip list如下
Package Version
---------------- -------
bidict 0.23.1
blinker 1.9.0
click 8.1.7
Flask 3.1.0
Flask-SocketIO 5.4.1
h11 0.14.0
itsdangerous 2.2.0
Jinja2 3.1.4
MarkupSafe 3.0.2
pip 24.2
python-engineio 4.11.1
python-socketio 5.11.4
setuptools 75.1.0
simple-websocket 1.1.0
Werkzeug 3.1.3
wheel 0.44.0
wsproto 1.2.0
应用的结构目录
app.py中的内容：
from flask import Flask, render_template, request
from flask_socketio import SocketIO, send, emit, join_room, leave_room# import eventlet
# eventlet.monkey_patch()app = Flask("chatWare", static_folder="static", template_folder="templates")
app.config['SECRET_KEY'] = "bruh"
socketio = SocketIO(app)@app.route("/")
def main():return render_template("index.html")
# 监听的可能是前端的socket.send这个方法
@socketio.on('message')
def handleMessage(msg):print("收到: " + msg)# send(msg, broadcast=True) # 这个发回去了，但是前端没有定义方法进行接收 所以是不是可以不用发#
@socketio.event #加一个@socketio.event 表明他是个方法，被装饰的方法可以被前端用socket.emit('sendMsg'）这种方式发送给后端。 message就是前端用emit的第二个参数
def sendMsg(message):print(message)# 下边这个emit中的“SendtoAll”是 前端socket.on('SendtoAll'）的监听对象 to=message['room'] 表示给房间里的所有人都发送消息 如果不写则表示个自己一个人回消息# request.sid貌似是每对socket连接都会不一样，但是没断开的应该是一样的emit('SendtoAll', {"msg":message["msg"], "user":request.sid}, to=message["room"])@socketio.event
def joinRoom(message):# global Room # 没有被用到吧，应该没啥用# print(message)join_room(message['room']) #加入房间有专门的函数，不用我们管emit("roomJoined", {"user" : request.sid,"room" : message['room']}, to=message['room'])@socketio.event
def leaveRoom(message):print(message)emit('roomLeftPersonal', {"room": message['room'], "user": request.sid}) # 这个没写to=message['room'] 表示给自己一个人回消息leave_room(message['room']) # 可神奇，他咋知道那个人离开了，可能是socket连接所以知道emit('roomLeft', {"room":message['room'], "user":request.sid}, to=message['room'])if __name__ == "__main__":app.run(host="0.0.0.0", port=5000, debug=True, threaded=True)socketio.run(app)
index.html中的内容如下：
<!DOCTYPE html>
<html lang="en"><head><title>flask socketio通信</title>
<!-- flask-socketio--><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script><!-- Jquery--><!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script> --><script type="text/javascript" src="//cdn.bootcss.com/socket.io/3.1.2/socket.io.min.js"></script><script type="text/javascript" src="{{url_for('static', filename='js/index.js')}}"></script></head><body><h3>Join Room</h3><form id="joinRoom" method="POST" action="#"><label>Room Number</label><input type="text" id="roomNum" required><input type="submit" id="submitRoomNum"></form><button id="leave_room">Leave</button><h1>Hello World</h1><ul id="chatContent"><li>Text</li></ul><form id="SubmitForm" method="POST" action="#"><h3>发送文字</h3><textarea placeholder="输入文字" name="msg" id="chatMsg" required></textarea><button type="submit">发送</button></form></body>
</html>
index.js中的内容如下：
$(document).ready(function(){// 1 一般的执行步骤 1，2，3....var socket = io();// 连接socketsocket.on('connect', function (){socket.send('Client Connected')});// 4$('form#SubmitForm').submit(function (event){// 发送给后端的sendMsg方法socket.emit('sendMsg', {msg:$('#chatMsg').val(),room:$('#roomNum').val()});$('#chatMsg').val("");return false});// 2 $('form#joinRoom').submit(function (event){socket.emit('joinRoom', {room:$('#roomNum').val()})return false});// 6$('#leave_room').on('click', function (){socket.emit('leaveRoom', {room:$('#roomNum').val()})console.log("sent")});// 3socket.on('roomJoined', function (msg, cb) {$('#chatContent').append('<li>' + msg.user + 'has joined room'+ msg.room +' </li>')});// 8 socket.on('roomLeft', function (msg, cb) {$('#chatContent').append('<li>' + msg.user + 'has left room'+ msg.room +' </li>')});// 7socket.on('roomLeftPersonal', function (msg, cb) {$('#chatContent').append('<li>' + 'you have left room'+ msg.room +' </li>')});// 5 监听后端的SendtoAll方法socket.on('SendtoAll', function (msg, cb) {$('#chatContent').append('<li>' + msg.user + ': ' + msg.msg + '</li>')});
})
在终端中输入python app.py 并回车，然后打开两个网页分别输入http://127.0.0.1:5000并回车即可进行聊天
相关文章：
flask flask-socketio创建一个网页聊天应用
应用所需环境： python 3.11.11 其他 只需要通过这个命令即可 pip install flask3.1.0 Flask-SocketIO5.4.1 -i https://mirrors.tuna.tsinghua.edu.cn/pypi/web/simple 最好是用conda创建一个新的虚拟环境来验证 完整的pip list如下 Package Version ----…...
使用CNN模型训练图片识别（键盘，椅子，眼镜，水杯，鼠标）
首先是环境： 我是在Anaconda3中的Jupyter Notebook (tensorflow)中进行训练，环境各位自行安装 数据集： 本次数据集五个类型（键盘，椅子，眼镜，水杯，鼠标）我收集了每个接近两…...
Gitlab 数据备份全攻略：命令、方法与注意事项
文章目录 1、备份命令2、备份目录名称说明3、手工备份配置文件3.1 备份配置文件3.2 备份ssh文件 4、备份注意事项4.1 停止puma和sicdekiq组件4.2 copy策略需要更多磁盘空间 5、数据备份方法5.1 docker命令备份5.2 kubectl命令备份5.3 参数说明5.4、选择性备份5.5、非tar备份5.6…...
Vue｜scoped样式
在 Vue.js 中，scoped 是一个非常有用的特性，允许你将样式限制在当前组件的作用域内，避免样式泄漏到其他组件。它是通过 Vue 的单文件组件（.vue 文件）中的 <style> 标签实现的。 目录 案例演示创建多个vue文件如何…...
eBPF试一下（TODO）
eBPF程序跟踪linux内核软中断 eBPF (Extended Berkeley Packet Filter) 是一种强大的 Linux 内核技术，最初用于网络数据包过滤，但现在它已经扩展到了多个领域，如性能监控、安全性、跟踪等。eBPF 允许用户在内核中执行代码（以一种安…...
【数据安全】如何保证其安全
数据安全风险 数字经济时代，数据已成为重要的生产要素。智慧城市、智慧政务的建设，正以数据为核心，推动城市管理的智能化和公共服务的优化。然而，公共数据开放共享与隐私保护之间的矛盾日益凸显，如何在确保数据安全的…...
[创业之路-196]：华为成功经验的总结与教训简单总结
目录 前言： 成功经验 教训归纳 前言： 华为作为世界领先的通信设备制造商，其成功经验与教训值得深入探讨。 以下是对华为成功经验的总结与教训的归纳： 成功经验 战略定位明确： 华为始终坚持“死死抓住核心技术”…...
使用 NVIDIA DALI 计算视频的光流
引言 光流（Optical Flow）是计算机视觉中的一种技术，主要用于估计视频中连续帧之间的运动信息。它通过分析像素在时间维度上的移动来预测运动场，广泛应用于目标跟踪、动作识别、视频稳定等领域。 光流的计算传统上依赖 CPU 或 GP…...
【UE5】pmx导入UE5，套动作。（防止“气球人”现象。
参考视频：UE5Animation 16: MMD模型與動作導入 (繁中自動字幕) 问题所在： 做法记录（自用） 1.导入pmx，删除这两个。 2.转换给blender，清理节点。 3.导出时，内嵌贴图，选“复制”。 …...
vue预览和下载 pdf、ppt、word、excel文档,文件类型为链接或者base64格式或者文件流,
** 方法1：word、xls、ppt、pdf 这些文件， 如果预览的文件是链接可以直接打开，可用微软官方的预览地址 ** <iframe width"100%" :src"textVisibleURl " id"myFramePPT" style"border: none;backgroun…...
前端如何实现大文件上传
在前端实现大文件上传的主要方法包括分片上传、断点续传、WebSocket上传和通过第三方服务上传。 分片上传：将大文件切割成多个小片段，然后分别上传。可以使用HTML5的File API和Blob对象，通过FileReader读取文件内容，然后使…...
如何评估并持续优化AI呼入机器人的使用效果
如何评估并持续优化AI呼入机器人的使用效果 作者：开源呼叫中心FreeIPCC 随着人工智能技术的快速发展，AI呼入机器人在客户服务、技术支持等多个领域得到了广泛应用。这些智能系统不仅提高了工作效率，降低了运营成本，还显著改善了…...
找不同，找原因
Yes, you can use “by the time I get back to it” instead of “get around to it,” but there’s a slight difference in tone and meaning: • “Get around to it” implies finally finding the time or motivation to do something after delaying or procrastina…...
OpenCV 学习记录：首篇
最近在学习机器视觉，希望能通过记录博客的形式来鞭策自己坚持学完，同时也把重要的知识点记录下来供参考学习。 1. OpenCV 介绍与模块组成 什么是 OpenCV？ OpenCV (Open Source Computer Vision Library) 是一个开源的计算机视觉和机器学习软…...
Java项目常见基础问题汇总
在 Feign 的实现下，我们只需创建一个接口并使用注解的方式来配置它RESTful API 与 SOAP、GraphQL 等其他 API 设计方式各有优劣，发者应根据具体业务需求选择合适的架构Dubbo开始于电商系统，大公司在OSI网络通信模型中，RPC跨越了传…...
git 删除鉴权缓存及账号信息
在Windows系统下 清除凭证管理器中的Git凭据 按下Win R键，打开“运行”对话框，输入control，然后回车，打开控制面板。在控制面板中找到“用户账户”，然后点击“凭据管理器”。在凭据管理器中，找到“Windows…...
Windows中运行Linux（WSL）
Windows Subsystem for Linux（WSL）是一个在Windows 10和更高版本上运行Linux二进制可执行文件（ELF格式）的兼容层。它允许你在Windows上直接运行Linux环境，包括大多数命令行工具、实用程序和应用程序，无需修…...
一键尺寸测量仪：磁芯尺寸测量的优选方案
由于风电、新能源汽车、机器人、工业自动化和无线充电等下游应用领域的快速发展，磁性材料行业近年来产值不断扩大，全球磁性材料市场规模在2022年突破了350亿美元，中国市场规模达800亿元人民币。特别是电子行业，无线充电技术、电感…...
[创业之路-197]：华为的发展路径启示
目录 前言： 一、由小公司走向大公司： 二、由农村包围城市： 三、由国内走向国际： 四、由代理商走向设备商，再到系统方案商，再到生态系统的搭建： 五、由随性到跟随，到赶超&#…...
【计算机网络】lab2 Ethernet（链路层Ethernet frame结构细节）
🌈 个人主页：十二月的猫-CSDN博客 🔥 系列专栏： 🏀计算机网络_十二月的猫的博客-CSDN博客 💪🏻 十二月的寒冬阻挡不了春天的脚步，十二点的黑夜遮蔽不住黎明的曙光 目录 1. 前言 2.…...
保姆级教程：在Ubuntu 20.04上搞定SigmaStar SSC336/SSC338/SSC30K的SDK编译环境（含bash切换和32位库安装）
SigmaStar SSC系列芯片开发环境搭建实战指南 从零开始配置Ubuntu 20.04编译环境 最近在接触SigmaStar SSC336/SSC338/SSC30K系列芯片开发时，发现官方文档对环境配置的描述较为简略，而实际搭建过程中会遇到各种"坑"。本文将结合实战经验&#x…...
LFM2.5-1.2B-Thinking-GGUF集成Python爬虫实战：智能数据采集与清洗
LFM2.5-1.2B-Thinking-GGUF集成Python爬虫实战：智能数据采集与清洗 1. 当爬虫遇上大模型：数据采集的新思路 传统爬虫开发就像在迷宫里摸索前行——你需要手动解析每个网站的HTML结构，针对不同反爬机制编写特定规则，还要处理杂乱…...
Mac Mouse Fix：如何让第三方鼠标在macOS上释放全部潜能
Mac Mouse Fix：如何让第三方鼠标在macOS上释放全部潜能 【免费下载链接】mac-mouse-fix Mac Mouse Fix - A simple way to make your mouse better. 项目地址: https://gitcode.com/GitHub_Trending/ma/mac-mouse-fix Mac Mouse Fix是一款开源工具࿰…...
SmallThinker-3B-Preview惊艳效果：将模糊产品需求转化为PRD+技术方案+风险提示
SmallThinker-3B-Preview惊艳效果：将模糊产品需求转化为PRD技术方案风险提示 你有没有遇到过这样的情况？产品经理或者老板给你一个模糊的想法，比如“我们做个智能助手吧”，或者“开发一个能自动生成周报的工具”。你听完后一头雾…...
Langchain与Qwen结合：如何用Python构建一个智能问答机器人（含联网搜索功能）
Langchain与Qwen结合：如何用Python构建一个智能问答机器人（含联网搜索功能） 在人工智能技术快速发展的今天，构建一个能够理解自然语言并提供准确回答的智能系统已不再是遥不可及的梦想。通过结合Langchain框架和Qwen大语言模型&a…...
嘎嘎降AI退款申请完整流程：不达标怎么拿回费用的具体步骤
嘎嘎降AI退款申请完整流程：不达标怎么拿回费用的具体步骤 这篇教程来自实操经验。帮三个同学处理过论文AI率，加上自己的，前后操作了十几次。把流程总结成教程，尽量详细。 核心工具推荐嘎嘎降AI（www.aigcleaner.com&a…...
VRChat玩家必看：用批处理脚本一键把缓存从C盘挪到E盘（附config.json手动修改方法）
VRChat玩家自救指南：彻底解决C盘缓存爆满的终极方案 每次打开VRChat看到C盘剩余空间像倒计时一样减少，是不是感觉血压都上来了？作为一款以用户生成内容为核心的游戏，VRChat会不断下载并缓存其他玩家创建的虚拟形象、世界场景等资源…...
小程序原生组件层级穿透实战：cover-view与canvas的深度优化
1. 为什么需要cover-view与canvas层级穿透 在小程序开发中，原生组件的层级问题一直是让开发者头疼的难题。特别是当我们需要在canvas、video等原生组件上叠加按钮、文字提示时，普通的view组件根本无法实现预期效果。这是因为小程序的原生组件采用了特殊的…...
IDEA+Tomcat8.5实战：5步搞定Shiro550漏洞复现环境（附JDK1.7多版本切换技巧）
IDEATomcat 8.5实战：5步构建Shiro550漏洞研究环境与多版本JDK管理技巧 当你第一次尝试复现Shiro550漏洞时，是否曾被各种环境配置问题困扰？从JDK版本冲突到Tomcat端口占用，再到war包部署失败，每一个环节都可能成为新手研…...
图像标注难题如何破解？LabelImg工具全面解析与实战指南
图像标注难题如何破解？LabelImg工具全面解析与实战指南 【免费下载链接】labelImg LabelImg is now part of the Label Studio community. The popular image annotation tool created by Tzutalin is no longer actively being developed, but you can check out L…...