from flask import Flask, render_template, request
from flask_socketio import SocketIO, emit, send
from flask_socketio import join_room, leave_room
app = Flask(__name__)
app.config['SECRET_KEY'] = 'casdcasdf'
socketio = SocketIO(app)


@app.route('/')
def index():
    return render_template('index.html')


@app.route('/chf')
def chf():
    return render_template('index2.html')


def ack():
    print('执行成功回调函数')

# 接收消息


@socketio.on('message')  # 路由
def handle_message(data):
    print('有人发送消息: ' + str(data))
    # send('我是message')
    emit('message', "server返回给client的数据",
         #  broadcast=True,     # 在不使用to的时候， True为广播
         callback=ack,          # 回调函数， 没有触发？？
         to='101')              # 房间号， 在这个房间都会广播数据


@socketio.on('message', namespace='/chf')  # 路由
def handle_message1(data):
    print('chf有人发送消息: ' + data)
    # send('我是message')
    emit('message', "chfserver返回给client的数据", namespace='/chf', broadcast=True)

# @socketio.on('message')  # 路由
# def handle_message(data):
#     print('my message: ' + data)
    # send('我是message')


@socketio.event
def my_custom_event(arg1, arg2, arg3):
    print('received args: ' + arg1 + arg2 + arg3)


@socketio.on('connect')
def handle_my_custom_event1():
    print('test有人来连接了:')
    emit('event', "test欢迎来连接使用聊天")


@socketio.on('connect', namespace='/chf')
def handle_my_custom_event2():
    print('chf有人来连接了')
    emit('event', "chf欢迎来连接使用聊天", namespace='/chf')


@socketio.on('my_event')
def handle_my_custom_event3(arg1):
    print('客户端连接成功后发送给我的消息: ' + str(arg1))


@socketio.on("disconnect")
def disconnect():
    print('有人断开连接了')

# 房间

# 加入房间


@socketio.on('join')
def on_join(data):
    id = request.sid
    username = data['username']
    room = data['room']
    join_room(room)
    send(username + ' has entered the room.', to=room)

# 退出房间


@socketio.on('leave')
def on_leave(data):
    username = data['username']
    room = data['room']
    leave_room(room)
    send(username + ' has left the room.', to=room)


if __name__ == '__main__':
    socketio.run(app)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>聊天拉</title>
</head>
<body>
    <h1>聊天时间</h1>
    <button onclick="sendMessageToServer('你好阿')">1发送</button>
    <button onclick="MessageToServer('你好阿')">2发送</button>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js" integrity="sha512-q/dWJ3kcmjBLU4Qc47E4A9kTB4m3wuTY7vkFJDTZKjTs8jhyGQnaUrxa0Ytd0ssMZhbNua9hE+E7Qv1j+DyZwA==" crossorigin="anonymous"></script>
    <script type="text/javascript" charset="utf-8">
        let namespace='/test';
        var socket = io.connect(location.protocol + '//' + document.domain + ':' + location.port,{transports: ['websocket']});


        // 添加一个连接监听器
        socket.on('connect', function() {
            socket.emit('my_event', {data: 'test I\'m connected!'});
        });

        // 添加一个接收监听器
        socket.on('message', function(message){
            console.log(message);
            // socket.emit('my message', {data: '你message'})
        })

        // 添加一个关闭连接的监听器
        socket.on('disconnect',function() {
            console.log('test 关闭连接!');
        }); 

        socket.on('event', function(message){
            console.log(message)
        })

        // socket.on('join', function(message){
        //     console.log(message)
        // })

        // 通过Socket发送一条消息到服务器
        function sendMessageToServer(message) {
            socket.emit('join',{username: 'chf', room: '101'});
        }
        function MessageToServer(message) {
            socket.emit('message', {data: message});
        }
    </script>
</body>
</html>