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

ops/2024/12/23 18:55:50/

应用所需环境:

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_apppy_http1270015000_173">在终端中输入python app.py 并回车,然后打开两个网页分别输入http://127.0.0.1:5000并回车即可进行聊天

在这里插入图片描述


http://www.ppmy.cn/ops/144365.html

相关文章

Word使用分隔符实现页面部分分栏

文章目录 Word使用分隔符实现页面部分分栏分隔符使用页面设置 Word使用分隔符实现页面部分分栏 分隔符使用 word中的分隔符&#xff1a; 前面不分栏&#xff0c;后面分栏(或前面分栏&#xff0c;后面不分栏)&#xff0c;只需要在分隔位置处插入分隔符&#xff1a;“连续”即…

mapStateToProps

mapStateToProps 是 React 应用中与 Redux 结合使用时的一个重要概念。它是一个函数&#xff0c;用于将 Redux store 中的状态映射到 React 组件的 props 上。通过这个函数&#xff0c;你可以选择组件需要订阅的 state 部分&#xff0c;并在 Redux store 更新时自动更新组件的 …

Java 控制语句全解析:if、switch、循环及控制语句详解

一、if 选择结构&#xff1a;条件判断与多分支选择 if 语句是最基本的条件判断语句&#xff0c;根据表达式的真假来决定是否执行某段代码。可以通过 else if 来判断多个条件&#xff0c;或者使用 else 来处理所有条件都不成立的情况。 代码示例&#xff1a;&#xff1a; int …

Leetcode-208. 实现Trie(前缀树)

前缀树是一个由“路径”和“节点”组成多叉树结构。由根节点出发&#xff0c;按照存储字符串的每个字符&#xff0c;创建对应字符路径&#xff0c;以此实现快速查找单词或是否为前缀的功能。 此题要求简单&#xff0c;只需实现下面几种功能&#xff1a; Trie() 初始化前缀树对…

AMS1117芯片驱动电路·降压芯片的驱动电路详解

目录 AMS1117常见封装 AMS1117不同系列 AMS1117驱动电路 参考数据手册 编写不易&#xff0c;仅供学习&#xff0c;请勿搬运&#xff0c;感谢理解 相同LDO芯片驱动专栏文章 LM7805系列降压芯片驱动电路降压芯片驱动电路详解-CSDN博客 ME6211C系列降压芯片驱动电路降压芯片…

浏览器引入elasticsearch-head插件

elasticsearch-head插件下载&#xff1a; 链接: https://pan.baidu.com/s/1Dz3aU42HZCNg45iJoDOsMg?pwduvhg 提取码: uvhg 1、打开浏览器设置 2、选择拓展程序 3、选择elasticsearch-head插件下载 4、打开es-head插件 5、修改ip 6、登录

Neo4j 图数据库安装与操作指南(以mac为例)

目录 一、安装前提条件 1.1 Java环境 1.2 Homebrew&#xff08;可选&#xff09; 二、下载并安装Neo4j 2.1 从官方网站下载 2.1.1 访问Neo4j的官方网站 2.1.2 使用Homebrew安装 三、配置Neo4j 3.1 设置环境变量(可选) 3.2 打开配置文件(bash_profile) 3.2.1 打开终端…

环境变革下 B2B 销售的转型与创新:开源 AI 智能名片与 S2B2C 商城小程序的助力

摘要&#xff1a;本文探讨了在信息科技与互联网迅猛发展所引发的环境改变背景下&#xff0c;B2B 销售工作面临的挑战与机遇。深入分析了传统销售模式的局限性以及新环境对销售人员素质和能力的要求&#xff0c;提出从提供“信息”向提供“业务价值”转变的必要性。同时&#xf…