应用所需环境：
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中的内容：
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中的内容如下：
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中的内容如下：
js
复制代码
$(document).ready(function(){
// 1 一般的执行步骤 1，2，3....
var socket = io();
// 连接socket
socket.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")
});
// 3
socket.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>')
});
// 7
socket.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并回车即可进行聊天
