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();
    //  连接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>')

    });
})