如何使用JavaScript和Flask_socketio将消息广播到特定的URL？

Question

我正在构建在线消息传递服务（本质上与Slack相似，我只想在访问已发布消息的URL时查看广播消息。当前，一条消息被发送到所有通道（URL）。

我尝试添加一个名称空间：

@socketio.on('submit message', namespace='/channel/0')

但没有消息通过。

我也试图将'/ channel / 0'信息添加到套接字

var socket = io.connect(location.protocol + '//' + document.domain + ':' + location.port + '/channel/0');

但是消息仍将被发送到频道/ 1。

@app.route("/channel/<int:channel_id>")
def channel(channel_id):
    channel_name = channels[channel_id]
    messages = chat_messages[channel_id]
return render_template('channel.html', channel_name=channel_name, messages=messages, channel_id=channel_id)

@socketio.on('submit message')
def chat(data):
    # Retrieve data from form
    display_name = data['display_name']
    content_typed = data['content_typed']
    timestamp = datetime.now().strftime('%Y-%m-%d %H:%M:%S')
    channel_id = int(data['channel_id'])

    # Add message to list
    chat_messages[channel_id].append( {'display_name' : display_name,'content_typed':content_typed,
     'timestamp': timestamp } )

    # Display last message
    emit("All messages", chat_messages[channel_id][-1], broadcast=True)

document.addEventListener('DOMContentLoaded', () => {
// connect to websocket
        var socket = io.connect(location.protocol + '//' + document.domain + ':' + location.port);

 // when connected configure submit button to submit new messages
        socket.on('connect', () => {
            document.querySelector('#form_channel').onsubmit = () => {
                const content_typed = document.querySelector('#message').value;
                const display_name = localStorage.getItem('user');
                const channel_id = document.querySelector('#channel_id').value;
                socket.emit('submit message', {'display_name' : display_name,'content_typed':content_typed,'channel_id': channel_id});
                document.querySelector('#message').value = '';

                return false;
            };

            return false;
        });

        // // When a new message is created, add to the unordered list
        socket.on('All messages', data => {
            const p = document.createElement('p')
            p.innerHTML = `from ${data.display_name} on ${data.timestamp}: ${data.content_typed} `;
            document.querySelector('#chatroom').append(p)
        })
    });

[当用户在访问channel / 0 URL时发送消息时，我只希望在此URL上看到它，而在其他URL中（例如：channel / 1）。如果刷新页面，则消息将正确存储到正确的路由，问题出在广播。

Answer 1

我能够通过创建2个不同的套接字来解决我的问题：已经发出了一个与所有通道通信的套接字，而另一个只向该通道发送消息的套接字。]

@socketio.on('submit message')
def chat(data):
    # Retrieve data from socket

    # Add message to list

    # Display last message
    emit("All messages", chat_messages[channel_id][-1], namespace=f'/channel/{channel_id}', broadcast=True)

document.addEventListener('DOMContentLoaded', () => {

        var channel_id = document.querySelector('#channel_id').value;
        var socket2 = io.connect(location.protocol + '//' + document.domain + ':' + location.port + `/channel/${channel_id}`);
...
socket2.on('All messages', data => {
            ...
        });
}