flask_socketio 以继承 Namespace方式实现一个网页聊天应用
点击进入上一篇，可作为参考
实验环境
python 用的是3.11.11
其他环境可以通过这种方式一键安装：
pip install flask==3.1.0 Flask-SocketIO==5.4.1 gevent-websocket==0.10.1 -i https://mirrors.tuna.tsinghua.edu.cn/pypi/web/simple
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
gevent 24.11.1
gevent-websocket 0.10.1
greenlet 3.1.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
zope.event 5.0
zope.interface 7.2
先看效果：
目录结构：
app2.py中的内容如下：
from flask import Flask, render_template, request
from flask_socketio import SocketIO, Namespace, join_room, leave_room app = Flask(__name__)
app.config['SECRET_KEY'] = 'secret!' def create_application(name, config=None, timeout=60, proxy=None):app = Flask(name)@app.route("/", methods=["GET", "POST"])def main():return render_template("index.html")return appclass MyNamespace(Namespace): def on_connect(self): print("Client connected") # def on_message(self, message): # print(f"Received message: {message}") # # socket_io.emit('response', {'data': 'Message received'}, namespace="/my_room") # 下边这种方式和本行这个方式都可以（在没有to传递参数时，self方式不能传递to这个参数）# self.emit('response', {'data': 'Message received'}, namespace="/my_room")def on_joinRoom(self, message):# global Room # 没有被用到吧，应该没啥用# print(message)join_room(message['room']) #加入房间有专门的函数，不用我们管# socket_io.emit("room_joined", {socket_io.emit("roomJoined", {"user" : request.sid,"room" : message['room']},to=message['room'], namespace="/my_room") # ！！！这个namespace="/my_room"一定要写def on_sendMsg(self,message):print(message)# 下边这个emit中的“SendtoAll”是 前端socket.on('SendtoAll'）的监听对象 to=message['room'] 表示给房间里的所有人都发送消息 如果不写则表示个自己一个人回消息# request.sid貌似是每对socket连接都会不一样，但是没断开的应该是一样的# self.emit 这个不能传递, to=message["room"] 不然会报错# self.emit('SendtoAll', {"msg":message["msg"], "user":request.sid}, to=message["room"], namespace="/my_room")socket_io.emit('SendtoAll', {"msg":message["msg"], "user":request.sid}, to=message["room"], namespace="/my_room")def on_leaveRoom(self,message):print(message)socket_io.emit('roomLeftPersonal', {"room": message['room'], "user": request.sid}, namespace="/my_room") # 这个没写to=message['room'] 表示给自己一个人回消息leave_room(message['room']) # 可神奇，他咋知道那个人离开了，可能是socket连接所以知道socket_io.emit('roomLeft', {"room":message['room'], "user":request.sid}, to=message['room'], namespace="/my_room")app = create_application("pipeagent_service", config=None)
socket_io = SocketIO(app, processes=True, cors_allowed_origins="*", async_mode='gevent')
socket_io.on_namespace(MyNamespace('/my_room'))
if __name__ == "__main__":socket_io.run(app=app, host="0.0.0.0", debug=False, log_output=True)
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(){// 这个 my_room对应后端中的Namespace 即命名空间var socket = io.connect('http://localhost:5000/my_room'); socket.on('connect', function() { socket.send('Client Connected') // console.log("Connected to server"); }); $('form#joinRoom').submit(function (event){socket.emit('joinRoom', {room:$('#roomNum').val()})return false});// 3socket.on('roomJoined', function (msg, cb) {$('#chatContent').append('<li>' + msg.user + 'has joined room'+ msg.room +' </li>')});// 4$('form#SubmitForm').submit(function (event){// 发送给后端的sendMsg方法socket.emit('sendMsg', {msg:$('#chatMsg').val(),room:$('#roomNum').val()});$('#chatMsg').val("");return false});// 5 监听后端的SendtoAll方法socket.on('SendtoAll', function (msg, cb) {$('#chatContent').append('<li>' + msg.user + ': ' + msg.msg + '</li>')});// 6$('#leave_room').on('click', function (){socket.emit('leaveRoom', {room:$('#roomNum').val()})console.log("sent")});// 7socket.on('roomLeftPersonal', function (msg, cb) {$('#chatContent').append('<li>' + 'you have left room'+ msg.room +' </li>')});// 8 socket.on('roomLeft', function (msg, cb) {$('#chatContent').append('<li>' + msg.user + 'has left room'+ msg.room +' </li>')});// socket.on('response', function(data) { // console.log(data.data); // }); // socket.on('disconnect', function() { // console.log('Disconnected'); // }); // socket.emit('message', 'Hello, server!');// 1 一般的执行步骤 1，2，3....// var socket = io();// 连接socket// socket.on('connect', function (){// socket.send('Client Connected')// });
})
运行：即 python app2.py 然后打开两个网页，并分别输入http://127.0.0.1:5000/ 开启愉快的自我交流吧
另可参考点击进入
相关文章：
flask_socketio 以继承 Namespace方式实现一个网页聊天应用
点击进入上一篇，可作为参考 实验环境 python 用的是3.11.11 其他环境可以通过这种方式一键安装： pip install flask3.1.0 Flask-SocketIO5.4.1 gevent-websocket0.10.1 -i https://mirrors.tuna.tsinghua.edu.cn/pypi/web/simple pip list 详情如下&am…...
go mod tidy 命令
go mod tidy 是 Go 语言的命令，用于清理和更新 go.mod 和 go.sum 文件。它主要有以下功能： 移除未使用的依赖项：从 go.mod 文件中删除那些在代码中不再使用的依赖项。 添加缺失的依赖项：添加代码中使用但尚未记录在 go.mod 文件中…...
（11）YOLOv9算法基本原理
一、YOLOv9 的结构 YOLOv9 引入了可编程梯度信息（PGI），以及基于梯度路径规划的新型轻量级网络架构，为目标检测领域带来了突破性的成果。 Yolov9 网络模型主要由BackBone（主干网络）、Neck（颈层&…...
python学opencv|读取图像（十七）认识alpha通道
【1】引言 前序学习进程中，我们已经掌握了RGB和HSV图像的通道拆分和合并，获得了很多意想不到的效果，相关链接包括且不限于： python学opencv|读取图像（十二）BGR图像转HSV图像-CSDN博客 python学opencv|读…...
中小学教室多媒体电脑安全登录解决方案
中小学教室多媒体电脑面临学生随意登录的问题，主要涉及到设备使用、网络安全、教学秩序等多个方面。以下是对这一问题的详细分析： 一、设备使用问题 1. 设备损坏风险 学生随意登录可能导致多媒体电脑设备过度使用，增加设备损坏的风险。不当…...
Redis篇之Redis高可用模式参数调优，提高Redis性能
1. Redis高可用模式核心 Redis高可用模式的核心是使用主从复制和自动故障转移机制来确保系统在某些节点发生故障时仍然可以正常工作。 常用的高可用架构包括Redis Sentinel模式和Redis Cluster模式，其中Sentinel模式是为了提供高可用性而专门设计的解决方案。 在Re…...
linux-----进程execl簇函数
execl函数族概述 在Linux中，execl函数族用于在一个进程中加载并执行一个新的程序，它会替换当前进程的地址空间（代码段、数据段、堆和栈等）。这个函数族包括execl、execlp、execle、execv、execvp和execvpe，它们的主要功…...
Vue + ECharts 实现山东地图展示与交互
这篇文章中，我将逐步介绍如何使用 Vue 和 ECharts 实现一个互动式的地图展示组件，其中支持返回上一层地图、点击查看不同城市的详细信息，以及根据数据动态展示不同的统计信息。 效果图：玩转山东地图：用Echarts打造交互…...
【Verilog】UDP用户原语
User-defined primitives 概述基本语法组合逻辑的UDP时序逻辑的UDPUDP 符号表 Verilog HDL（简称 Verilog ）是一种硬件描述语言，用于数字电路的系统设计。可对算法级、门级、开关级等多种抽象设计层次进行建模。 Verilog 不仅定义了语法&…...
问题小记-达梦数据库报错“字符串转换出错”处理
最近遇到一个达梦数据库报错“-6111: 字符串转换出错”的问题，这个问题主要是涉及到一条sql语句的执行，在此分享下这个报错的处理过程。 问题表现为：一样的表结构和数据，执行相同的SQL，在Oracle数据库中执行正常&…...
MyBatis入门的详细应用实例
目录 MyBatis第一章：代理Dao方式的CRUD操作1. 代理Dao方式的增删改查 第二章：MyBatis参数详解1. parameterType2. resultType 第三章：SqlMapConfig.xml配置文件1. 定义properties标签的方式管理数据库的信息2. 类型别名定义 MyBatis 第一章&…...
Sequelize ORM sql 语句工具
Sequelize ORM sql 语句工具 初始化配置 Sequelize orm 配置文章落日沉溺于海 在命令行中全局安装 npm i -g sequelize-clisequelize 执行需要匹配 mysql2 对应的依赖（安装 mysql2） npm i sequelize mysql2初始化项目 sequelize init熟悉初始化项目后…...
增强LabVIEW与PLC通信稳定性
在工业自动化系统中，上位机与PLC之间的通信稳定性至关重要，尤其是在数据采集和控制任务的实时性要求较高的场景中。LabVIEW作为常用的上位机开发平台，通过合理优化通信协议、硬件接口、数据传输方式以及系统容错机制，可以大大提升…...
UDP系统控制器_音量控制、电脑关机、文件打开、PPT演示、任务栏自动隐藏
UDP系统控制器(ShuiYX) 帮助文档 概述 本程序设计用于通过UDP协议接收指令来远程控制计算机的音量、执行特定命令和其他功能。为了确保程序正常工作，请确认防火墙和网络设置允许UDP通信，并且程序启动后会最小化到托盘图标。 命令格式及说明 音量控制…...
NK细胞杀伐功能如何实现？
在人体的免疫系统中，自然杀伐细胞（Natural Killer Cells，简称NK细胞）是一类完全自然的免疫激活力量。它们为人体提供了快速反应能力，不依赖类元的特定识别力，但能直接寻找和毁灭毒病感染细胞和肿瘤细胞。那…...
Ubuntu搭建ES8集群+加密通讯+https访问
目录 写在前面 一、前期准备 1. 创建用户和用户组 2. 修改limits.conf文件 3. 关闭操作系统swap功能 4. 调整mmap上限 二、安装ES 1.下载ES 2.配置集群间安全访问证书密钥 3.配置elasticsearch.yml 4.修改jvm.options 5.启动ES服务 6.修改密码 7.启用外部ht…...
PC寄存器（Program Counter Register）jvm
在JVM（Java虚拟机）中，PC寄存器（Program Counter Register）扮演着至关重要的角色。以下是对JVM中PC寄存器的详细解释： 一、定义与功能 定义： JVM中的PC寄存器，也被称为程序计数器，是对物理PC寄存器的一种抽象模拟。它用于存储当前线程所执行的字节码指令的地址，即指…...
预览和下载 （pc和微信小程序）
1.微信小程序 预览pdf 或者 图片等 //utils.js 文件//通过接口返回文件链接 打开文档 export default function previewFile({ downLinkUrl, tempFilePath }) {let url "https://" downLinkUrl.replace("http://", "").replace("https:…...
使用 DeepSpeed 微调 OPT 基础语言模型
文章目录 OPT 基础语言模型Using OPT with DeepSpeedmain.py 解析1、导入库和模块2、解析命令行参数3、main 函数3.1 设备与分布式初始化3.2 模型与数据准备3.3 定义评估函数3.4 优化器与学习率调度器设置3.5 使用 deepspeed 进行模型等初始化3.6 训练循环3.7 模型保存 4、dsch…...
BSM和BMS什么区别？
BSM BSM（Battery System Manager）是指用于管理和控制电动车辆的电池系统的设备，其功能包括监测电池状态、控制充放电过程、保护电池安全等。 BMS BMS（Battery Management System）是指用于监测、控制和保护电池组的设…...
idea大量爆红问题解决
问题描述 在学习和工作中，idea是程序员不可缺少的一个工具，但是突然在有些时候就会出现大量爆红的问题，发现无法跳转，无论是关机重启或者是替换root都无法解决 就是如上所展示的问题，但是程序依然可以启动。 问题解决…...
Python：操作 Excel 折叠
💖亲爱的技术爱好者们，热烈欢迎来到 Kant2048 的博客！我是 Thomas Kant，很开心能在CSDN上与你们相遇～💖 本博客的精华专栏： 【自动化测试】 【测试经验】 【人工智能】 【Python】 Python 操作 Excel 系列 读取单元格数据按行写入设置行高和列宽自动调整行高和列宽水平…...
iPhone密码忘记了办？iPhoneUnlocker，iPhone解锁工具Aiseesoft iPhone Unlocker 高级注册版分享
平时用 iPhone 的时候，难免会碰到解锁的麻烦事。比如密码忘了、人脸识别 / 指纹识别突然不灵，或者买了二手 iPhone 却被原来的 iCloud 账号锁住，这时候就需要靠谱的解锁工具来帮忙了。Aiseesoft iPhone Unlocker 就是专门解决这些问题的软件&…...
蓝牙 BLE 扫描面试题大全(2)：进阶面试题与实战演练
前文覆盖了 BLE 扫描的基础概念与经典问题蓝牙 BLE 扫描面试题大全(1)：从基础到实战的深度解析-CSDN博客，但实际面试中，企业更关注候选人对复杂场景的应对能力（如多设备并发扫描、低功耗与高发现率的平衡）和前沿技术的…...
微信小程序 - 手机震动
一、界面 <button type"primary" bindtap"shortVibrate">短震动</button> <button type"primary" bindtap"longVibrate">长震动</button> 二、js逻辑代码 注：文档 https://developers.weixin.qq…...
【单片机期末】单片机系统设计
主要内容：系统状态机，系统时基，系统需求分析，系统构建，系统状态流图 一、题目要求 二、绘制系统状态流图 题目：根据上述描述绘制系统状态流图，注明状态转移条件及方向。 三、利用定时器产生时…...
DBAPI如何优雅的获取单条数据
API如何优雅的获取单条数据 案例一 对于查询类API，查询的是单条数据，比如根据主键ID查询用户信息，sql如下： select id, name, age from user where id #{id}API默认返回的数据格式是多条的，如下： {&qu…...
Linux-07 ubuntu 的 chrome 启动不了
文章目录 问题原因解决步骤一、卸载旧版chrome二、重新安装chorme三、启动不了，报错如下四、启动不了，解决如下 总结 问题原因 在应用中可以看到chrome，但是打不开(说明：原来的ubuntu系统出问题了，这个是备用的硬盘&a…...
ArcGIS Pro制作水平横向图例+多级标注
今天介绍下载ArcGIS Pro中如何设置水平横向图例。 之前我们介绍了ArcGIS的横向图例制作：ArcGIS横向、多列图例、顺序重排、符号居中、批量更改图例符号等等（ArcGIS出图图例8大技巧），那这次我们看看ArcGIS Pro如何更加快捷的操作。…...
A2A JS SDK 完整教程：快速入门指南
目录 什么是 A2A JS SDK?A2A JS 安装与设置A2A JS 核心概念创建你的第一个 A2A JS 代理A2A JS 服务端开发A2A JS 客户端使用A2A JS 高级特性A2A JS 最佳实践A2A JS 故障排除 什么是 A2A JS SDK? A2A JS SDK 是一个专为 JavaScript/TypeScript 开发者设计的强大库ÿ…...