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并回车即可进行聊天

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/493931.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

[计算机网络]唐僧的”通关文牒“NAT地址转换

1.NAT&#xff1a;唐僧的通关文牒 在古老的西游记中&#xff0c;唐僧师徒四人历经九九八十一难&#xff0c;终于取得了真经。然而&#xff0c;他们并不是一开始就获得了通关文牒&#xff0c;而是经过了重重考验&#xff0c;最终得到了国王的认可&#xff0c;才顺利通过了各个关…

数据结构经典算法总复习(下卷)

第五章:树和二叉树 先序遍历二叉树的非递归算法。 void PreOrderTraverse(BiTree T, void (*Visit)(TElemType)) {//表示用于查找的函数的指针Stack S; BiTree p T;InitStack(S);//S模拟工作栈while (p || !StackEmpty(S)) {//S为空且下一个结点为空&#xff0c;意味着结束遍…

【Windows版】opencv 和opencv_contrib配置

一、参考资料 &#xff08;四十一&#xff09;CMakeVSopencv/opencv_contrib 环境配置 从源码安装&#xff2f;penCV&#xff0c;使用python windowsvscodeopencv源码安装配置 二、关键步骤 1. opencv与opencv_contrib版本对齐 下载 opencv 下载 opencv_contrib opencv…

2014年IMO第4题

△ A B C \triangle ABC △ABC 中, B C BC BC 上有一点 P P P 满足 ∠ B A P = ∠ A C B \angle BAP=\angle ACB ∠BAP=∠ACB, 还有一点 Q Q Q 满足 ∠ A = Q A C = ∠ A B C \angle A=QAC=\angle ABC ∠A=QAC=∠ABC. 分别延长 A P AP AP, A Q AQ AQ 一倍至 M M M, N …

基于微信小程序的乡村旅游系统

博主介绍&#xff1a;java高级开发&#xff0c;从事互联网行业六年&#xff0c;熟悉各种主流语言&#xff0c;精通java、python、php、爬虫、web开发&#xff0c;已经做了多年的设计程序开发&#xff0c;开发过上千套设计程序&#xff0c;没有什么华丽的语言&#xff0c;只有实…

拆解一个微型气泵了解工作原理

原因 在焊接电路板时&#xff0c;测试打印后想要拆卸错误的板子上的元件&#xff0c;但每次拆卸过程中吸锡器手动按压到手疼。忽然看见一种小型气泵&#xff0c;不知道能不能做一个电动的吸锡器。 拆卸过程 第一步先把前盖板拆掉&#xff0c;这一步很好办到&#xff0c;就三…

SAP HCM 考勤时间冲突到分 源码分析

导读 时间冲突:SAP实施顾问应该都知道时间约束的概念&#xff0c;时间约束是按照主键作为分隔&#xff0c;其中信息类型有个seqnr的流水号字段&#xff0c;是控制时间约束的主要条件&#xff0c;今天分析的2001信息类型&#xff0c;如果日期相同&#xff0c;请假的开始时间与结…

《庐山派从入门到...》板载按键启动!

《庐山派从入门到...》板载按键启动&#xff01; 《庐山派从入门到...》板载按键启动&#xff01; 视频内容大致如下 我们之前了解了GPIO的输出模式使用方法&#xff0c;并且成功点灯&#xff0c;很明显本篇要来分享的自然是GPIO的输入模式 正好回顾一下之前学的python基础包…

分布式协同 - 分布式事务_TCC解决方案

文章目录 导图Pre流程图2PC VS 3PC VS TCC2PC&#xff08;Two-Phase Commit&#xff0c;二阶段提交&#xff09;3PC&#xff08;Three-Phase Commit&#xff0c;三阶段提交&#xff09;TCC&#xff08;Try-Confirm-Cancel&#xff09;2PC、3PC与TCC的区别2PC、3PC与TCC的联系 导…

新版国标GB28181设备端Android版EasyGBD支持国标GB28181-2022,支持语音对讲,支持位置上报,开源在Github

经过近3个月的迭代开发&#xff0c;新版本的国标GB28181设备端EasyGBD安卓Android版终于在昨天发布到Github了&#xff0c;最新的EasyGBD支持了国标GB28181-2022版&#xff0c;还支持了语音对讲、位置上报、本地录像等功能&#xff0c;比原有GB28181-2016版的EasyGBD更加高效、…

YOLO-World:Real-Time Open-Vocabulary Object Detection

目录 摘要 Abstract YOLO-World 1 模型架构 1.1 Text Encoder 1.2 YOLO Backbone 2 RepVL-PAN 2.1 T-CSPLayer 2.2 I-Pooling Attention 2.3 预测 3 消融实验 3.1 预训练数据 3.2 RepVL-PAN的消融实验 3.3 文本编码器 4 效果展示 4.1 零样本 4.2 根据词汇表检…

MySQL -- 库的相关操作

目录 查看数据库 创建数据库 直接创建&#xff1a; 加约束条件 if not exists 字符集和校对规则 什么是字符集 什么是校对规则 校对规则的主要功能 校对规则的特性 查看指定的数据库使用的字符集和校对规则&#xff1a; 比较是否区分大小写字母差异 显示创建语句 …

【spring-cloud-gateway总结】

文章目录 什么是gateway如何导入gateway依赖路由配置gateway配置断路器导包配置 什么是gateway 在微服务架构中&#xff0c;gateway网关是一个服务&#xff0c;它作为系统的唯一入口点&#xff0c;处理所有的客户端请求&#xff0c;然后将这些请求路由到适当的服务。提供了几个…

mac iterm2 使用 lrzsz

前言 mac os 终端不支持使用 rz sz 上传下载文件&#xff0c;本文提供解决方法。 mac 上安装 brew install lrzsz两个脚本 注意&#xff1a;/usr/local/bin/iterm2-send-zmodem.sh 中的 sz命令路径要和你mac 上 sz 命令路径一致。 /usr/local/bin/iterm2-recv-zmodem.sh 中…

数智化医院分布式计算框架融合人工智能方向初步实现与能力转换浅析

人工智能中心计算机 一、引言 1.1 研究背景与意义 近年来&#xff0c;人工智能&#xff08;Artificial Intelligence&#xff0c;AI&#xff09;与大数据技术的迅猛发展为医疗行业带来了前所未有的变革机遇。医疗领域积累了海量的数据&#xff0c;如电子病历&#xff08;Elec…

airflow docker 安装

mkdir -p /root/airflow cd /root/airflow && mkdir -p ./dags ./logs ./plugins ./configcd /root/airflow/ wget https://airflow.apache.org/docs/apache-airflow/2.10.4/docker-compose.yaml nano docker-compose.yamlAIRFLOW__CORE__LOAD_EXAMPLES: false #初始化…

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

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

springboot463学生信息管理系统论文(论文+源码)_kaic

摘 要 使用旧方法对学生信息管理系统的信息进行系统化管理已经不再让人们信赖了&#xff0c;把现在的网络信息技术运用在学生信息管理系统的管理上面可以解决许多信息管理上面的难题&#xff0c;比如处理数据时间很长&#xff0c;数据存在错误不能及时纠正等问题。这次开发的学…

postman读取文件执行

要从文件获取的变量 text 在pre-request 中写从文件获取数据的脚本。脚本实现了&#xff0c;设置了text默认值&#xff0c;从文件读取text列&#xff0c;将text存入环境变量 //获取text参数 var text "济南天气"; if(data.text){ text data.text } pm.environment.…

我的个人博客正式上线了!

我的个人博客终于上线啦点此访问 经过一番折腾&#xff0c;我的个人博客终于上线啦&#xff01;这是一个属于我自己的小天地&#xff0c;可以用来记录生活点滴、技术分享以及一些随想。 在这里&#xff0c;我想分享一下搭建博客的整个过程和心得体会。 为什么要搭建博客&…