如何使用 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 => {
...
});
}