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

flask flask-socketio创建一个网页聊天应用

news 2026/2/11 4:38:19

应用所需环境：

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创建一个网页聊天应用

应用所需环境&#xff1a; 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 ----…...

编程日记 2024/12/21 20:36:39

使用CNN模型训练图片识别（键盘，椅子，眼镜，水杯，鼠标）

首先是环境&#xff1a; 我是在Anaconda3中的Jupyter Notebook (tensorflow)中进行训练&#xff0c;环境各位自行安装 数据集&#xff1a; 本次数据集五个类型&#xff08;键盘&#xff0c;椅子&#xff0c;眼镜&#xff0c;水杯&#xff0c;鼠标&#xff09;我收集了每个接近两…...

编程日记 2024/12/21 20:34:36

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…...

编程日记 2024/12/21 20:32:34

Vue｜scoped样式

在 Vue.js 中&#xff0c;scoped 是一个非常有用的特性&#xff0c;允许你将样式限制在当前组件的作用域内&#xff0c;避免样式泄漏到其他组件。它是通过 Vue 的单文件组件&#xff08;.vue 文件&#xff09;中的 <style> 标签实现的。 目录 案例演示创建多个vue文件如何…...

编程日记 2024/12/21 20:28:31

eBPF试一下（TODO）

eBPF程序跟踪linux内核软中断 eBPF (Extended Berkeley Packet Filter) 是一种强大的 Linux 内核技术&#xff0c;最初用于网络数据包过滤&#xff0c;但现在它已经扩展到了多个领域&#xff0c;如性能监控、安全性、跟踪等。eBPF 允许用户在内核中执行代码&#xff08;以一种安…...

编程日记 2024/12/21 20:25:29

【数据安全】如何保证其安全

数据安全风险 数字经济时代&#xff0c;数据已成为重要的生产要素。智慧城市、智慧政务的建设&#xff0c;正以数据为核心&#xff0c;推动城市管理的智能化和公共服务的优化。然而&#xff0c;公共数据开放共享与隐私保护之间的矛盾日益凸显&#xff0c;如何在确保数据安全的…...

编程日记 2024/12/21 20:23:27

[创业之路-196]：华为成功经验的总结与教训简单总结

目录 前言&#xff1a; 成功经验 教训归纳 前言&#xff1a; 华为作为世界领先的通信设备制造商&#xff0c;其成功经验与教训值得深入探讨。 以下是对华为成功经验的总结与教训的归纳&#xff1a; 成功经验 战略定位明确&#xff1a; 华为始终坚持“死死抓住核心技术”…...

编程日记 2024/12/21 20:22:26

使用 NVIDIA DALI 计算视频的光流

引言 光流&#xff08;Optical Flow&#xff09;是计算机视觉中的一种技术&#xff0c;主要用于估计视频中连续帧之间的运动信息。它通过分析像素在时间维度上的移动来预测运动场&#xff0c;广泛应用于目标跟踪、动作识别、视频稳定等领域。 光流的计算传统上依赖 CPU 或 GP…...

编程日记 2024/12/21 20:18:23

【UE5】pmx导入UE5，套动作。（防止“气球人”现象。

参考视频&#xff1a;UE5Animation 16: MMD模型與動作導入 (繁中自動字幕) 问题所在&#xff1a; 做法记录&#xff08;自用&#xff09; 1.导入pmx&#xff0c;删除这两个。 2.转换给blender&#xff0c;清理节点。 3.导出时&#xff0c;内嵌贴图&#xff0c;选“复制”。 …...

编程日记 2024/12/21 20:17:22

vue预览和下载 pdf、ppt、word、excel文档,文件类型为链接或者base64格式或者文件流,

** 方法1&#xff1a;word、xls、ppt、pdf 这些文件&#xff0c; 如果预览的文件是链接可以直接打开&#xff0c;可用微软官方的预览地址 ** <iframe width"100%" :src"textVisibleURl " id"myFramePPT" style"border: none;backgroun…...

编程日记 2024/12/21 20:15:20

前端如何实现大文件上传

‌在前端实现大文件上传的主要方法包括分片上传、断点续传、WebSocket上传和通过第三方服务上传。‌ ‌分片上传‌&#xff1a;将大文件切割成多个小片段&#xff0c;然后分别上传。可以使用HTML5的File API和Blob对象&#xff0c;通过FileReader读取文件内容&#xff0c;然后使…...

编程日记 2024/12/21 20:13:17

如何评估并持续优化AI呼入机器人的使用效果

如何评估并持续优化AI呼入机器人的使用效果 作者&#xff1a;开源呼叫中心FreeIPCC 随着人工智能技术的快速发展&#xff0c;AI呼入机器人在客户服务、技术支持等多个领域得到了广泛应用。这些智能系统不仅提高了工作效率&#xff0c;降低了运营成本&#xff0c;还显著改善了…...

编程日记 2024/12/21 20:12:16

找不同，找原因

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…...

编程日记 2024/12/21 20:11:15

OpenCV 学习记录：首篇

最近在学习机器视觉&#xff0c;希望能通过记录博客的形式来鞭策自己坚持学完&#xff0c;同时也把重要的知识点记录下来供参考学习。 1. OpenCV 介绍与模块组成 什么是 OpenCV&#xff1f; OpenCV (Open Source Computer Vision Library) 是一个开源的计算机视觉和机器学习软…...

编程日记 2024/12/21 20:08:11

Java项目常见基础问题汇总

在 Feign 的实现下&#xff0c;我们只需创建一个接口并使用注解的方式来配置它RESTful API 与 SOAP、GraphQL 等其他 API 设计方式各有优劣&#xff0c;发者应根据具体业务需求选择合适的架构Dubbo开始于电商系统&#xff0c;大公司在OSI网络通信模型中&#xff0c;RPC跨越了传…...

编程日记 2024/12/21 20:07:09

git 删除鉴权缓存及账号信息

在Windows系统下 清除凭证管理器中的Git凭据 按下Win R键&#xff0c;打开“运行”对话框&#xff0c;输入control&#xff0c;然后回车&#xff0c;打开控制面板。在控制面板中找到“用户账户”&#xff0c;然后点击“凭据管理器”。在凭据管理器中&#xff0c;找到“Windows…...

编程日记 2024/12/21 20:05:06

Windows中运行Linux（WSL）

Windows Subsystem for Linux&#xff08;WSL&#xff09;是一个在Windows 10和更高版本上运行Linux二进制可执行文件&#xff08;ELF格式&#xff09;的兼容层。它允许你在Windows上直接运行Linux环境&#xff0c;包括大多数命令行工具、实用程序和应用程序&#xff0c;无需修…...

编程日记 2024/12/21 20:01:59

一键尺寸测量仪：磁芯尺寸测量的优选方案

由于风电、新能源汽车、机器人、工业自动化和无线充电等下游应用领域的快速发展&#xff0c;磁性材料行业近年来产值不断扩大&#xff0c;全球磁性材料市场规模在2022年突破了350亿美元&#xff0c;中国市场规模达800亿元人民币。特别是电子行业&#xff0c;无线充电技术、电感…...

编程日记 2024/12/21 19:59:51

[创业之路-197]：华为的发展路径启示

目录 前言&#xff1a; 一、由小公司走向大公司&#xff1a; 二、由农村包围城市&#xff1a; 三、由国内走向国际&#xff1a; 四、由代理商走向设备商&#xff0c;再到系统方案商&#xff0c;再到生态系统的搭建&#xff1a; 五、由随性到跟随&#xff0c;到赶超&#…...

编程日记 2024/12/21 19:54:46

【计算机网络】lab2 Ethernet（链路层Ethernet frame结构细节）

&#x1f308; 个人主页&#xff1a;十二月的猫-CSDN博客 &#x1f525; 系列专栏&#xff1a; &#x1f3c0;计算机网络_十二月的猫的博客-CSDN博客 &#x1f4aa;&#x1f3fb; 十二月的寒冬阻挡不了春天的脚步&#xff0c;十二点的黑夜遮蔽不住黎明的曙光 目录 1. 前言 2.…...

编程日记 2024/12/21 19:53:45

深度学习在微纳光子学中的应用

深度学习在微纳光子学中的主要应用方向 深度学习与微纳光子学的结合主要集中在以下几个方向&#xff1a; 逆向设计 通过神经网络快速预测微纳结构的光学响应&#xff0c;替代传统耗时的数值模拟方法。例如设计超表面、光子晶体等结构。 特征提取与优化 从复杂的光学数据中自…...

编程新知 2026/2/10 7:11:42

docker详细操作--未完待续

docker介绍 docker官网: Docker&#xff1a;加速容器应用程序开发 harbor官网&#xff1a;Harbor - Harbor 中文 使用docker加速器: Docker镜像极速下载服务 - 毫秒镜像 是什么 Docker 是一种开源的容器化平台&#xff0c;用于将应用程序及其依赖项&#xff08;如库、运行时环…...

编程新知 2026/2/5 4:33:24

三维GIS开发cesium智慧地铁教程（5）Cesium相机控制

一、环境搭建 <script src"../cesium1.99/Build/Cesium/Cesium.js"></script> <link rel"stylesheet" href"../cesium1.99/Build/Cesium/Widgets/widgets.css"> 关键配置点&#xff1a; 路径验证&#xff1a;确保相对路径.…...

编程新知 2025/12/1 19:23:04

【Linux】C语言执行shell指令

在C语言中执行Shell指令 在C语言中&#xff0c;有几种方法可以执行Shell指令&#xff1a; 1. 使用system()函数 这是最简单的方法&#xff0c;包含在stdlib.h头文件中&#xff1a; #include <stdlib.h>int main() {system("ls -l"); // 执行ls -l命令retu…...

编程新知 2025/11/20 18:42:48

Leetcode 3577. Count the Number of Computer Unlocking Permutations

Leetcode 3577. Count the Number of Computer Unlocking Permutations 1. 解题思路2. 代码实现 题目链接&#xff1a;3577. Count the Number of Computer Unlocking Permutations 1. 解题思路 这一题其实就是一个脑筋急转弯&#xff0c;要想要能够将所有的电脑解锁&#x…...

编程新知 2026/1/4 2:33:39

el-switch文字内置

el-switch文字内置 效果 vue <div style"color:#ffffff;font-size:14px;float:left;margin-bottom:5px;margin-right:5px;">自动加载</div> <el-switch v-model"value" active-color"#3E99FB" inactive-color"#DCDFE6"…...

编程新知 2026/1/26 10:00:16

Python实现prophet 理论及参数优化

文章目录 Prophet理论及模型参数介绍Python代码完整实现prophet 添加外部数据进行模型优化 之前初步学习prophet的时候&#xff0c;写过一篇简单实现&#xff0c;后期随着对该模型的深入研究&#xff0c;本次记录涉及到prophet 的公式以及参数调优&#xff0c;从公式可以更直观…...

编程新知 2026/1/27 5:01:54

相机从app启动流程

一、流程框架图 二、具体流程分析 1、得到cameralist和对应的静态信息 目录如下： 重点代码分析： 启动相机前，先要通过getCameraIdList获取camera的个数以及id，然后可以通过getCameraCharacteristics获取对应id camera的capabilities（静态信息）进行一些openCamera前的…...

编程新知 2026/1/31 5:09:19

OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别

OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别 直接训练提示词嵌入向量的核心区别 您提到的代码： prompt_embedding = initial_embedding.clone().requires_grad_(True) optimizer = torch.optim.Adam([prompt_embedding...

编程新知 2025/7/4 0:50:01

AI病理诊断七剑下天山，医疗未来触手可及

一、病理诊断困局&#xff1a;刀尖上的医学艺术 1.1 金标准背后的隐痛 病理诊断被誉为"诊断的诊断"&#xff0c;医生需通过显微镜观察组织切片&#xff0c;在细胞迷宫中捕捉癌变信号。某省病理质控报告显示&#xff0c;基层医院误诊率达12%-15%&#xff0c;专家会诊…...

编程新知 2026/2/6 20:53:34