无法使用 Flask-socketio 和 Javascript 广播消息答案

【问题标题】：Unable to broadcast messages using Flask-socketio and Javascript无法使用 Flask-socketio 和 Javascript 广播消息
【发布时间】：2019-08-13 19:12:28
【问题描述】：

我正在尝试使用 Flask 和 socket-io 构建一个简单的聊天室应用程序。当用户键入消息并单击提交按钮时，应将消息广播给所有用户。但在我的情况下，单击提交按钮后，页面刷新并且什么都没有出现。请帮忙。

我尝试在 firefox 浏览器控制台中运行 Javascript 代码，它在那里运行良好（没有表单）。但是当我从网页提交表单时，问题就出现了。

这是一些代码 sn-p:

python 后端：

@socketio.on('send messages')
def vote(data):
    messages = data['messages']
    emit('announce messages', {"messages":messages}, broadcast=True)

javascript：

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

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

    // When connected, configure buttons
    socket.on('connect', () => {
        document.querySelector('#form').onsubmit = () => {
            const messages = document.querySelector('#messages').value;
            socket.emit('send messages', {'messages': messages});
        }
    });

    socket.on('announce messages', data => {
        const li = document.createElement('li');
        li.innerHTML = `${data.messages}`;
        document.querySelector('#push').append(li);
    });    
});

HTML 表单

<ul id="push">
    <!--filled by socket.io-->
</ul>
<form id="form">
    <label for="messages">Message:</label>
    <input id="messages" type="text" name="messages">
    <input type="submit" value="Submit">
</form>

【问题讨论】：

标签： javascript python-3.x flask socket.io

【解决方案1】：

当您提交表单时，您必须通过返回 False 来阻止它实际提交，这样连接就不会中断。在您的情况下，页面正在刷新，因此您看不到结果。

socket.on('connect', () => {
        document.querySelector('#form').onsubmit = () => {
            const messages = document.querySelector('#messages').value;
            socket.emit('send messages', {'messages': messages});
            return False
        }
    });

也许这会起作用。

【讨论】：