javascript - 如何使用 JavaScript 和 Flask_socketio 将消息广播到特定 URL?
问题描述
我正在构建一个在线消息服务(在精神上类似于 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)。如果我刷新页面,消息将正确存储到正确的路线,问题出在广播上。
解决方案
我能够通过创建 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 => {
...
});
}
推荐阅读
- sql - 禁用 RPC 时如何在远程服务器上删除具有多个前缀的永久表
- android - 如何更改 jetpack compose 中的 TopAppBar 位置
- python-3.x - Pyside2 从按钮单击触发消息框关闭整个应用程序
- java - MongoDB:从具有特定键值对的文档中收集集合中的所有键(在 java 中)
- python - 创建散点图的最简洁方法,该散点图在标识线周围具有规则间隔的色带
- python - Python pip 重建要求
- c++ - eigen:设置/返回整列的表达式或函数
- python - 如何将数据平均分成二级类别
- python - pytest 收集测试用例但不执行脚本
- android - 在 Android 11 中的两个应用之间共享数据