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.…...
Nordic nRF52832蓝牙串口实战：手把手教你用SDK 15.3.0实现手机与设备双向通信
Nordic nRF52832蓝牙串口开发实战：从SDK配置到双向通信全解析 在嵌入式蓝牙开发领域，Nordic的nRF52832芯片凭借其优异的射频性能和丰富的外设资源，成为物联网设备开发的明星选择。但对于刚接触这款芯片的开发者来说，如何快速实现手…...
2026年Java面试高频考点终极整理（纯干货，建议直接背诵）
Java 面试 Java 作为编程语言中的 NO.1,选择入行做 IT 做编程开发的人，基本都把它作为首选语言,进大厂拿高薪也是大多数小伙伴们的梦想。以前 Java 岗位人才的空缺，而需求量又大，所以这种人才供不应求的现状，就是 Java 工程师的薪…...
从basicfwd到自定义发包器：手把手教你用DPDK 21.11写一个高性能发包程序
从basicfwd到自定义发包器：DPDK 21.11高性能网络编程实战 在当今云计算和边缘计算蓬勃发展的时代，网络性能优化已成为开发者必须面对的挑战。DPDK（Data Plane Development Kit）作为高性能数据包处理框架，正在被越来越多…...
从零到一：在Linux上构建USRP与GNU Radio的完整信号处理工坊
1. 环境准备：打造你的信号处理工坊基础 搭建信号处理工坊就像装修新房，得先打好地基。我强烈推荐使用Ubuntu 20.04 LTS系统，这个版本不仅稳定，而且社区支持完善。记得第一次尝试时用了最新版系统，结果各种依赖冲突让我…...
OpenClaw用户如何通过Taotoken获得更优的模型调用体验
🚀 告别海外账号与网络限制！稳定直连全球优质大模型，限时半价接入中。 👉 点击领取海量免费额度 OpenClaw用户如何通过Taotoken获得更优的模型调用体验 对于使用OpenClaw构建智能体工作流的开发者而言，直接对接多个大…...
【OpenClaw从入门到精通】第81篇：OpenClaw 2026.5.3万字实测详解——视频/音乐生成+Memory Dreaming实战指南
摘要：本文聚焦OpenClaw v2026.4.5至v2026.5.3的核心更新，基于官方文档、开发者社区实测数据，全方位解析视频生成、音乐生成、ComfyUI集成、Memory Dreaming四大核心功能。从升级迁移、环境配置到实战案例，提供可直接复制的代码与操作流程，覆盖API密钥配置、多Provider适配…...
2026年AI开发一站式工作台选型：模力方舟MoArk实战价值解析
在2026年的AI产业实践中，技术落地的复杂性与效率瓶颈依然是开发者面临的核心挑战。当AI开发从实验走向规模化应用，对覆盖模型体验、微调训练、推理部署到商业变现的全流程一体化平台的需求变得尤为迫切。由Gitee（码云）推出的模力方…...
液冷下半场：两相液冷比拼的不仅是冷板厚度，还比什么？
常见问题（FAQ） Q: 两相液冷能将芯片温差控制在多少？ A: 可在2℃以内，典型工况下可达1.5℃。相比单相液冷的8℃以上波动，优势明显。 Q: 存量机房改造后，机柜功率能提升多少？ A: 某数据中心改造…...
容器存储进阶：PersistentVolume（PV）_PVC 底层原理 + 动态供应踩坑 + 数据备份恢复实战
容器存储进阶：PersistentVolume（PV）/PVC 底层原理 + 动态供应踩坑 + 数据备份恢复实战 前言：在Kubernetes容器集群中，PersistentVolume（PV）与PersistentVolumeClaim（PVC）是实现容器持久化存储的核心组件，但生产环境中，多数运维人员往往卡在基础配置层面，而忽略了动…...
飞书文档批量导出终极指南：3步实现自动化文档迁移
飞书文档批量导出终极指南：3步实现自动化文档迁移 【免费下载链接】feishu-doc-export 飞书文档导出服务 项目地址: https://gitcode.com/gh_mirrors/fe/feishu-doc-export 还在为飞书文档迁移而烦恼吗？飞书文档批量导出工具让你彻底告别手动下载…...