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.mzph.cn/web/63555.shtml

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

相关文章

STM32 水质水位检测项目(硬件架构)及(软件架构)

硬件选型 水位测量模块 TDS采集模块 外置ADC模块&#xff08;ADS1115&#xff09; 水位测量模块使用方法 水位测量原理 压力传感器&#xff1a;水越深压力越大 P ρgh Fps Fρgh*s P大气压 水位测量传感器本质上是一个压力测量传感器。压力的值和传感器产生的电压值是线…

服务器数据恢复—RAIDZ离线硬盘数超过热备盘数导致阵列崩溃的数据恢复案例

服务器存储数据恢复环境&#xff1a; ZFS Storage 7320存储阵列中有32块硬盘。32块硬盘分为4组&#xff0c;每组8块硬盘&#xff0c;共组建了3组RAIDZ&#xff0c;每组raid都配置了热备盘。 服务器存储故障&#xff1a; 服务器存储运行过程中突然崩溃&#xff0c;排除人为误操…

llama2中的model.py中的结构示意图

参考文章&#xff1a;https://zhuanlan.zhihu.com/p/679640407

开放词汇目标检测(Open-Vocabulary Object Detection, OVOD)综述

定义 开放词汇目标检测&#xff08;Open-Vocabulary Object Detection, OVOD&#xff09;是一种目标检测任务&#xff0c;旨在检测和识别那些未在训练集中明确标注的物体类别。传统的目标检测模型通常只能识别有限数量的预定义类别&#xff0c;而OVOD模型则具有识别“开放词汇…

Vue与React:前端框架的巅峰对决

文章目录 一、引言&#xff08;一&#xff09;前端框架发展现状简述 二、Vue 与 React 框架概述&#xff08;一&#xff09;Vue.js 简介&#xff08;二&#xff09;React.js 简介 三、开发效率对比&#xff08;一&#xff09;Vue 开发效率分析&#xff08;二&#xff09;React …

3分钟读懂数据分析的流程是什么

数据分析是基于商业目的&#xff0c;有目的地进行收集、整理、加工和分析数据&#xff0c;提炼出有价值的 信息的一个过程。整个过程大致可分为五个阶段&#xff0c;具体如下图所示。 1.明确目的和思路 在开展数据分析之前&#xff0c;我们必须要搞清楚几个问题&#xff0c;比…

词嵌入(Word Embedding):自然语言处理的基石

目录 ​编辑 词嵌入&#xff08;Word Embedding&#xff09;&#xff1a;自然语言处理的基石 引言 词嵌入的基本概念 词嵌入的主要方法 1. Word2Vec 2. GloVe 3. FastText 4. ELMo 5. BERT 词嵌入的应用场景 词嵌入的研究进展 结论 词嵌入&#xff08;Word Embedd…

AutoSarOS中调度表的概念与源代码解析

--------AutoSarOS调度表的概念 一、AutoSarOS 是什么以及调度表的重要性 AutoSar(Automotive Open System Architecture)是汽车行业的一个开放式软件架构标准哦。它就像是一种大家都遵循的规则,能让不同的软件供应商一起合作开发汽车软件,这样软件就能被重复使用,开发效…

半连接转内连接 | OceanBase SQL 查询改写

查询优化器是关系型数据库系统的核心模块&#xff0c;是数据库内核开发的重点和难点&#xff0c;也是衡量整个数据库系统成熟度的“试金石”。为了帮助大家更好地理解 OceanBase 查询优化器&#xff0c;我们撰写了查询改写系列文章&#xff0c;带大家更好地掌握查询改写的精髓&…

android opencv导入进行编译

1、直接新建module进行导入&#xff0c;选择opencv的sdk 导入module模式&#xff0c;选择下载好的sdk&#xff0c;修改module name为OpenCV490。 有报错直接解决报错&#xff0c;没报错直接运行成功。 2、解决错误&#xff0c;同步成功 一般报错是gradle版本问题较多。我的报…

通过阿里云 Milvus 与 PAI 搭建高效的检索增强对话系统

背景介绍 阿里云向量检索服务Milvus版&#xff08;简称阿里云Milvus&#xff09;是一款云上全托管服务&#xff0c;确保了了与开源Milvus的100%兼容性&#xff0c;并支持无缝迁移。在开源版本的基础上增强了可扩展性&#xff0c;能提供大规模 AI 向量数据的相似性检索服务。相…

【批量生成WORD和PDF文件】根据表格内容和模板文件批量创建word文件,一次性生成多个word文档和批量创建PDF文件

如何按照Word模板和表格的数据快速制作5000个word文档 &#xff1f; 在与客户的合作的中需要创建大量的合同&#xff0c;这些合同的模板大概都是一致的&#xff0c;是不是每次我们都需要填充不一样的数据来完成&#xff1f; 今天用表格数据完成合同模板的填充&#xff0c;批量…

Windows11 安装 Ubuntu-20.04,同时安装配置 zsh shell,配置 git 别名(alias),大大提高开发效率

背景&#xff1a;家里配置了一台 Windows 电脑&#xff0c;有时候需要用到 vscode 开发测试一些代码&#xff0c;在使用过程中发现原生 windows 敲代码不是很友好&#xff0c;于是想到配置 wsl&#xff0c;安装 Ubuntu&#xff0c;并安装配置 zsh shell&#xff0c;同时配置 gi…

鸿蒙心路旅程:HarmonyOS NEXT 心路旅程:技术、成长与未来

HarmonyOS NEXT 心路旅程&#xff1a;技术、成长与未来 技术的浪潮中&#xff0c;总有一些瞬间让人感到心潮澎湃。作为一名HarmonyOS NEXT开发者&#xff0c;我有幸成为这个时代科技创新的一部分。从最初的接触到深入学习、开发&#xff0c;以及如今规划未来的职业方向&#x…

勤研低代码平台:重塑软件开发协作新生态

在当今数字化浪潮汹涌澎湃的时代&#xff0c;软件开发的效率与质量成为企业竞争的关键因素之一。勤研低代码开发平台以创新性的实际页面 - 功能设计 - 页面设计 - 原型页面切换功能&#xff0c;脱颖而出&#xff0c;为软件开发过程中的团队协作、客户沟通以及项目推进带来了前所…

node安装,npm安装,vue-cli安装以及element-ui配置项目

node.js Node.js主要用于开发高性能、高并发的网络服务器&#xff0c;特别适合构建HTTP服务器、实时交互应用&#xff08;如聊天室&#xff09;和RESTful API服务器等。‌它使用JavaScript语言&#xff0c;基于Chrome V8引擎&#xff0c;提供模块化开发和丰富的npm生态系统&…

easyplayer-pro播放器学习

背调 查询官方文档&#xff0c;EasyPlayer-pro支持ws-flv, http-flv, hls, webrtc&#xff08;webrtc://xxx&#xff09;格式&#xff0c;电子放大、水印(动态水印、幽灵水印)、显示上一个视频最后一帧、播放器快照截图、视频录制(WebM格式(音频视频)、MP4格式(视频),FLV格式(…

WPF+MVVM案例实战与特效(四十三)- 打造动态炫酷彩虹字控件,让你的界面动起来

文章目录 1、引言1、案例效果2、案例实现1、XAML 布局2、逻辑代码3、动画效果4、控件使用5、运行效果3、案例源代码4、总结1、引言 上一节,我们实现了炫酷的彩虹字控件,现在我们想让彩虹字更加生动吸引人,让每个字体跳动起来,让字体活过来。这里我们通过动画实现,我们把这…

线程知识总结(一)

1、概述 1.1 进程与线程 进程是程序运行时&#xff0c;操作系统进行资源分配的最小单位&#xff0c;包括 CPU、内存空间、磁盘 IO 等。从另一个角度讲&#xff0c;进程是程序在设备&#xff08;计算机、手机等&#xff09;上的一次执行活动&#xff0c;或者说是正在运行中的程…

【Python】使用Selenium 操作浏览器 自动化测试 记录

【自动化】Python SeleniumUtil 工具 开启开发者模式 自动安装油猴用户脚本等-CSDN博客文章浏览阅读389次。【自动化】Python SeleniumUtil 工具。https://blog.csdn.net/G971005287W/article/details/144565691?spm1001.2014.3001.5501【学习记录】浏览器指纹相关学习记录&am…