无法让 socket.emit 处理表单值答案

【问题标题】：Can't get socket.emit to work on form value无法让 socket.emit 处理表单值
【发布时间】：2019-10-08 19:03:52
【问题描述】：

我一直在尝试以下代码的许多不同组合，以弄清楚如何使 Flask-SocketIO 从文本区域发出值。我需要使用 JavaScript，而不是 JQuery。我已经用一个按钮测试了我与服务器的连接和通用代码模板（它适用于传输按钮数据值），但我没有找到任何适用于我的 textarea 表单的在线解决方案。

如何将表单值放入数据中，并将该值返回并发布到 HTML 页面的 <ul> 部分？这是我所拥有的：

JavaScript：

socket.on('connect', function(data){
    document.querySelector('#newmessage').onsubmit=()=>{
        const text = document.querySelector('#shoutout').value;
        socket.emit('send message', {"text": data.text});
    };
});
socket.on('list message', data =>{
    const li = document.createElement('li');
    li.innerHTML = `Message: ${data.text}`;
    document.querySelector('#messages').append(li);
});

我还在代码的前半部分进行了尝试，将表单值放入 data.text，并使其在每次提交按钮单击时发出。它将来自 textarea 的消息放入 URL("/?shoutout=hello")，但它仍然没有在无序列表中发布任何内容。

socket.on('connect', function(data){
    document.querySelectorAll('#send').forEach(button=>{
        button.onclick = ()=>{
             document.querySelector('#shoutout').value = data.text;
             socket.emit('send message', {"text": data.text});
         };
    });
});

Python/Flask：

@socketio.on("send message")
def send(data):
    text = data["text"]
    emit("list message", {"text":text}, broadcast=True)

HTML：

<body>
    <ul id="messages"></ul>
        <br>
        <form id="newmessage">
            <textarea id="shoutout" placeholder ="Type your message" rows="3"></textarea>
            <input id="send" type="submit" value="Send">
        </form>
</body>

【问题讨论】：

标签： javascript python flask socket.io flask-socketio

【解决方案1】：

我相信你的第一个 JS 代码 sn-p 应该是：

socket.on('connect', function(data){
    document.querySelector('#newmessage').onsubmit=()=>{
        const text = document.querySelector('#shoutout').value;
        socket.emit('send message', {"text": text});  // <--- this should be text, not data.text!
    };
});

data.text 到底是什么？

【讨论】：

嘿！就像你建议的那样，我开始只是将其称为文本，但它不起作用。我真的觉得应该这样做，这就是为什么我仍然很难过。于是上网看了下，有人建议做data.text，因为text是一部分数据。但这也行不通。