时间戳

首页 > 解决方案 > 无法使用 Flask-socketio 和 Javascript 广播消息

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

问题描述

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

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

这是一些代码片段：

蟒蛇后端：

@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>

标签： javascriptpython-3.xflasksocket.io

解决方案

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

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

也许这会起作用。

推荐阅读