如何使用JavaScript和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');

但是消息仍然会被发送到channel/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

我可以通过创建两个不同的套接字来解决我的问题：一个与所有通道通信，另一个只向发出消息的通道is

@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 => {
            ...
        });
}