当前位置: 首页 > news >正文

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方式实现一个网页聊天应用

点击进入上一篇&#xff0c;可作为参考 实验环境 python 用的是3.11.11 其他环境可以通过这种方式一键安装&#xff1a; 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 语言的命令&#xff0c;用于清理和更新 go.mod 和 go.sum 文件。它主要有以下功能&#xff1a; 移除未使用的依赖项&#xff1a;从 go.mod 文件中删除那些在代码中不再使用的依赖项。 添加缺失的依赖项&#xff1a;添加代码中使用但尚未记录在 go.mod 文件中…...

(11)YOLOv9算法基本原理

一、YOLOv9 的结构 YOLOv9 引入了可编程梯度信息&#xff08;PGI&#xff09;&#xff0c;以及基于梯度路径规划的新型轻量级网络架构&#xff0c;为目标检测领域带来了突破性的成果。 Yolov9 网络模型主要由BackBone&#xff08;主干网络&#xff09;、Neck&#xff08;颈层&…...

python学opencv|读取图像(十七)认识alpha通道

【1】引言 前序学习进程中&#xff0c;我们已经掌握了RGB和HSV图像的通道拆分和合并&#xff0c;获得了很多意想不到的效果&#xff0c;相关链接包括且不限于&#xff1a; python学opencv|读取图像&#xff08;十二&#xff09;BGR图像转HSV图像-CSDN博客 python学opencv|读…...

中小学教室多媒体电脑安全登录解决方案

中小学教室多媒体电脑面临学生随意登录的问题&#xff0c;主要涉及到设备使用、网络安全、教学秩序等多个方面。以下是对这一问题的详细分析&#xff1a; 一、设备使用问题 1. 设备损坏风险 学生随意登录可能导致多媒体电脑设备过度使用&#xff0c;增加设备损坏的风险。不当…...

Redis篇之Redis高可用模式参数调优,提高Redis性能

1. Redis高可用模式核心 Redis高可用模式的核心是使用主从复制和自动故障转移机制来确保系统在某些节点发生故障时仍然可以正常工作。 常用的高可用架构包括Redis Sentinel模式和Redis Cluster模式&#xff0c;其中Sentinel模式是为了提供高可用性而专门设计的解决方案。 在Re…...

linux-----进程execl簇函数

execl函数族概述 在Linux中&#xff0c;execl函数族用于在一个进程中加载并执行一个新的程序&#xff0c;它会替换当前进程的地址空间&#xff08;代码段、数据段、堆和栈等&#xff09;。这个函数族包括execl、execlp、execle、execv、execvp和execvpe&#xff0c;它们的主要功…...

Vue + ECharts 实现山东地图展示与交互

这篇文章中&#xff0c;我将逐步介绍如何使用 Vue 和 ECharts 实现一个互动式的地图展示组件&#xff0c;其中支持返回上一层地图、点击查看不同城市的详细信息&#xff0c;以及根据数据动态展示不同的统计信息。 效果图&#xff1a;玩转山东地图&#xff1a;用Echarts打造交互…...

【Verilog】UDP用户原语

User-defined primitives 概述基本语法组合逻辑的UDP时序逻辑的UDPUDP 符号表 Verilog HDL&#xff08;简称 Verilog &#xff09;是一种硬件描述语言&#xff0c;用于数字电路的系统设计。可对算法级、门级、开关级等多种抽象设计层次进行建模。 Verilog 不仅定义了语法&…...

问题小记-达梦数据库报错“字符串转换出错”处理

最近遇到一个达梦数据库报错“-6111: 字符串转换出错”的问题&#xff0c;这个问题主要是涉及到一条sql语句的执行&#xff0c;在此分享下这个报错的处理过程。 问题表现为&#xff1a;一样的表结构和数据&#xff0c;执行相同的SQL&#xff0c;在Oracle数据库中执行正常&…...

MyBatis入门的详细应用实例

目录 MyBatis第一章&#xff1a;代理Dao方式的CRUD操作1. 代理Dao方式的增删改查 第二章&#xff1a;MyBatis参数详解1. parameterType2. resultType 第三章&#xff1a;SqlMapConfig.xml配置文件1. 定义properties标签的方式管理数据库的信息2. 类型别名定义 MyBatis 第一章&…...

Sequelize ORM sql 语句工具

Sequelize ORM sql 语句工具 初始化配置 Sequelize orm 配置文章落日沉溺于海 在命令行中全局安装 npm i -g sequelize-clisequelize 执行需要匹配 mysql2 对应的依赖&#xff08;安装 mysql2&#xff09; npm i sequelize mysql2初始化项目 sequelize init熟悉初始化项目后…...

增强LabVIEW与PLC通信稳定性

在工业自动化系统中&#xff0c;上位机与PLC之间的通信稳定性至关重要&#xff0c;尤其是在数据采集和控制任务的实时性要求较高的场景中。LabVIEW作为常用的上位机开发平台&#xff0c;通过合理优化通信协议、硬件接口、数据传输方式以及系统容错机制&#xff0c;可以大大提升…...

UDP系统控制器_音量控制、电脑关机、文件打开、PPT演示、任务栏自动隐藏

UDP系统控制器(ShuiYX) 帮助文档 概述 本程序设计用于通过UDP协议接收指令来远程控制计算机的音量、执行特定命令和其他功能。为了确保程序正常工作&#xff0c;请确认防火墙和网络设置允许UDP通信&#xff0c;并且程序启动后会最小化到托盘图标。 命令格式及说明 音量控制…...

NK细胞杀伐功能如何实现?

在人体的免疫系统中&#xff0c;自然杀伐细胞&#xff08;Natural Killer Cells&#xff0c;简称NK细胞&#xff09;是一类完全自然的免疫激活力量。它们为人体提供了快速反应能力&#xff0c;不依赖类元的特定识别力&#xff0c;但能直接寻找和毁灭毒病感染细胞和肿瘤细胞。那…...

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&#xff08;Battery System Manager&#xff09;是指用于管理和控制电动车辆的电池系统的设备&#xff0c;其功能包括监测电池状态、控制充放电过程、保护电池安全等。 BMS BMS&#xff08;Battery Management System&#xff09;是指用于监测、控制和保护电池组的设…...

【大模型RAG】拍照搜题技术架构速览:三层管道、两级检索、兜底大模型

摘要 拍照搜题系统采用“三层管道&#xff08;多模态 OCR → 语义检索 → 答案渲染&#xff09;、两级检索&#xff08;倒排 BM25 向量 HNSW&#xff09;并以大语言模型兜底”的整体框架&#xff1a; 多模态 OCR 层 将题目图片经过超分、去噪、倾斜校正后&#xff0c;分别用…...

逻辑回归:给不确定性划界的分类大师

想象你是一名医生。面对患者的检查报告&#xff08;肿瘤大小、血液指标&#xff09;&#xff0c;你需要做出一个**决定性判断**&#xff1a;恶性还是良性&#xff1f;这种“非黑即白”的抉择&#xff0c;正是**逻辑回归&#xff08;Logistic Regression&#xff09;** 的战场&a…...

相机Camera日志实例分析之二:相机Camx【专业模式开启直方图拍照】单帧流程日志详解

【关注我&#xff0c;后续持续新增专题博文&#xff0c;谢谢&#xff01;&#xff01;&#xff01;】 上一篇我们讲了&#xff1a; 这一篇我们开始讲&#xff1a; 目录 一、场景操作步骤 二、日志基础关键字分级如下 三、场景日志如下&#xff1a; 一、场景操作步骤 操作步…...

Qwen3-Embedding-0.6B深度解析:多语言语义检索的轻量级利器

第一章 引言&#xff1a;语义表示的新时代挑战与Qwen3的破局之路 1.1 文本嵌入的核心价值与技术演进 在人工智能领域&#xff0c;文本嵌入技术如同连接自然语言与机器理解的“神经突触”——它将人类语言转化为计算机可计算的语义向量&#xff0c;支撑着搜索引擎、推荐系统、…...

微信小程序云开发平台MySQL的连接方式

注&#xff1a;微信小程序云开发平台指的是腾讯云开发 先给结论&#xff1a;微信小程序云开发平台的MySQL&#xff0c;无法通过获取数据库连接信息的方式进行连接&#xff0c;连接只能通过云开发的SDK连接&#xff0c;具体要参考官方文档&#xff1a; 为什么&#xff1f; 因为…...

Map相关知识

数据结构 二叉树 二叉树&#xff0c;顾名思义&#xff0c;每个节点最多有两个“叉”&#xff0c;也就是两个子节点&#xff0c;分别是左子 节点和右子节点。不过&#xff0c;二叉树并不要求每个节点都有两个子节点&#xff0c;有的节点只 有左子节点&#xff0c;有的节点只有…...

CMake控制VS2022项目文件分组

我们可以通过 CMake 控制源文件的组织结构,使它们在 VS 解决方案资源管理器中以“组”(Filter)的形式进行分类展示。 🎯 目标 通过 CMake 脚本将 .cpp、.h 等源文件分组显示在 Visual Studio 2022 的解决方案资源管理器中。 ✅ 支持的方法汇总(共4种) 方法描述是否推荐…...

Python基于历史模拟方法实现投资组合风险管理的VaR与ES模型项目实战

说明&#xff1a;这是一个机器学习实战项目&#xff08;附带数据代码文档&#xff09;&#xff0c;如需数据代码文档可以直接到文章最后关注获取。 1.项目背景 在金融市场日益复杂和波动加剧的背景下&#xff0c;风险管理成为金融机构和个人投资者关注的核心议题之一。VaR&…...

Webpack性能优化:构建速度与体积优化策略

一、构建速度优化 1、​​升级Webpack和Node.js​​ ​​优化效果​​&#xff1a;Webpack 4比Webpack 3构建时间降低60%-98%。​​原因​​&#xff1a; V8引擎优化&#xff08;for of替代forEach、Map/Set替代Object&#xff09;。默认使用更快的md4哈希算法。AST直接从Loa…...

TSN交换机正在重构工业网络,PROFINET和EtherCAT会被取代吗?

在工业自动化持续演进的今天&#xff0c;通信网络的角色正变得愈发关键。 2025年6月6日&#xff0c;为期三天的华南国际工业博览会在深圳国际会展中心&#xff08;宝安&#xff09;圆满落幕。作为国内工业通信领域的技术型企业&#xff0c;光路科技&#xff08;Fiberroad&…...