如何在 flask_socketio 中“留出空间”？

Question

我正在创建一个聊天应用程序，并试图让用户使用按钮离开房间。 我尝试了 socketio function leave_room ，但用户仍然留在房间里，尽管聊天说用户已经离开。 我的代码： application.py

import os
import requests

from flask import Flask, jsonify, render_template, request, redirect, url_for
from flask_socketio import SocketIO, emit, join_room, leave_room

app = Flask(__name__)
app.config["SECRET_KEY"] = os.getenv("SECRET_KEY")
socketio = SocketIO(app)
channels = {"1":0,"2":0,"3":0}

@app.route("/")
def home():
    return render_template('home.html', channels = channels)

@app.route("/chat")
def chat():
    username = request.args.get('username')
    channel_id = request.args.get("channel_id")
    if username and channel_id:
        channels[channel_id] +=1
        return render_template("index.html", username=username, channel_id=channel_id)
    print("Wait")
    return redirect(url_for('home'))


@socketio.on('join_room')
def join_room_event(data):
    app.logger.info("{} has joined channel {}. ".format(data['username'], data['channel']))
    join_room(data['channel'])
    socketio.emit('joined_room', data)

@socketio.on('leave_room')
def leave_room_event(data):
    app.logger.info("{} has left channel {}.".format(data['username'], data['channel']))
    leave_room(data['channel'])
    socketio.emit('left_room', data)

@socketio.on('self_leave_room')
def self_leave_room(data):
    channel_id = data['channel']
    channels[channel_id] -= 1


@socketio.on("send")
def vote(data):
    emit("announce message", data, broadcast=True)


if __name__ == '__main__':
    app.run(debug=True)

home.html

<!DOCTYPE HTML>
<html>
    <head>
        <title>Hello, world!</title>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet">
    </head>
    <body>
        {% if message != () %}
        <h4 class="text-danger">{{ message }}</h4>
        {% endif %}
        <form action="{{ url_for('chat') }}">
            <div>
                <label>Enter your name:</label>
                <label>
                    <input type="text" name="username">
                </label>
            </div>
            <div>
                <label>Enter Channel ID:</label>
                <select name="channel_id">
                    {% for channel in channels %}
                    <option value="{{ channel }}">{{ channel }}</option>
                    {% endfor %}
                </select>
            </div>
            <button type="submit">Enter Room</button>
        </form>
    </body>
</html>

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <script src="https://cdn.jsdelivr.net/npm/handlebars@latest/dist/handlebars.js"></script>
        <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/socket.io/1.3.6/socket.io.min.js"></script>
        <script>
            document.addEventListener('DOMContentLoaded', () => {

                // Connect to websocket
                var socket = io.connect(location.protocol + '//' + document.domain + ':' + location.port);

                socket.on('connect', () => {
                    socket.emit('join_room', {
                        'username': "{{ username }}",
                        'channel': '{{ channel_id }}'
                    })
                });

                // The button should emit the value of the textbox
                document.getElementById('send').onclick = e => {
                    e.preventDefault();
                    let message_input = document.getElementById('textbox');
                    const message = message_input.value.trim();
                    if(message.length){
                        socket.emit('send', {
                            'message': message,
                            'username': "{{ username }}",
                            'channel': "{{ channel_id }}"
                        });
                    }
                    message_input.value = '';
                    message_input.focus();

                };

                document.getElementById('leave').onclick = () =>{
                    const data = {
                        'username': '{{ username }}',
                        'channel': '{{ channel_id }}'
                    };
                    socket.emit('leave_room', data);
                    socket.emit('self_leave_room', data)

                };

                socket.on('left_room', data =>{
                    if (data.channel === "{{ channel_id }}"){
                        const inner = document.createElement('div');
                        inner.innerHTML = `<b>${data.username}</b> has left the room.`;
                        inner.style.backgroundColor = "#e1f3fb";
                        inner.style.fontFamily = "sans-serif";
                        inner.style.fontSize = "12px";
                        inner.style.borderColor = "#d5cec7";
                        inner.className = "rounded";
                        inner.style.display= "inline-block";
                        inner.style.border= '2px solid #d5cec7';
                        const div = document.createElement('div');
                        div.appendChild(inner);
                        div.style.width = "100%";
                        document.getElementById('message').appendChild(div);
                    }
                });


                socket.on('joined_room', data => {
                    if (data.channel === "{{ channel_id }}"){
                        const inner  = document.createElement('div');
                        if (data.username !== "{{ username }}"){
                            console.log('not me.');
                            inner.innerHTML = `<b>${data.username}</b> has joined the channel!`;
                        } else {
                            console.log('me.');
                            inner.innerHTML = `<b>You</b> joined the channel.`;
                        }
                        inner.style.backgroundColor = "#e1f3fb";
                        inner.style.fontFamily = "sans-serif";
                        inner.style.fontSize = "12px";
                        inner.style.borderColor = "#d5cec7";
                        inner.className = "rounded";
                        inner.style.display= "inline-block";
                        inner.style.border= '2px solid #d5cec7';
                        const div = document.createElement('div');
                        div.appendChild(inner);
                        div.style.width = "100%";
                        document.getElementById('message').appendChild(div);
                    }
                });

                socket.on('announce message', data => {
                    console.log(data.channel);
                    console.log("{{ channel_id }}");
                    if (data.channel === "{{ channel_id }}") {
                        const inner = document.createElement('div');
                        const div = document.createElement('div');
                        inner.innerHTML = `${data.username}: ${data.message}`;
                        inner.style.fontFamily = "sans-serif";
                        inner.style.fontSize = "12px";
                        inner.style.borderColor = "#d5cec7";
                        inner.className = "rounded";
                        inner.style.display = "inline-block";
                        inner.style.border = '2px solid #d5cec7';
                        if (data.username === "{{username}}") {
                            inner.style.backgroundColor = "#dcf8c7";
                            div.style.textAlign = "right";
                        } else {
                            inner.style.backgroundColor = "#ffffff";
                            div.style.textAlign = "left";
                        }
                        div.appendChild(inner);
                        div.style.width = "100%";
                        document.getElementById('message').appendChild(div);
                    }
                });
            });
        </script>
        <style>
           body{
                font-family: Arial, sans-serif;
           }
           div{
                padding: 2px 12px;
                text-align: center;
            }
        </style>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css">
        <title>Messages on Channel {{ channel_id }}</title>
    </head>
    <body>
        <h1>Welcome to Channel {{ channel_id }}</h1>
        <button id="leave" onclick="{{ url_for('home') }}">Leave Channel</button>
        <label for="textbox"></label><input id="textbox" placeholder="Message..." type="text">
        <button id="send">Send</button>
        <hr>
        <div id="message">
        </div>
    </body>
</html>

任何人都可以帮忙吗？

Answer 1

socketio.emit('left_room', data,room = data['channel'])

至少你需要指定论据室。 否则频道 x 的消息将被广播到每个其他房间您需要在 js 和 python 中执行此操作。

但是用户仍然留在房间里，虽然聊天说用户已经离开

有没有办法验证这一点？