我一直在尝试下面代码的许多不同组合，以弄清楚如何使 Flask-SocketIO 从文本区域发出一个值。我需要使用 JavaScript，而不是 JQuery。我已经用一个按钮测试了我与服务器的连接和通用代码模板(它适用于传输按钮数据值)，但我还没有在网上找到任何适用于我的 textarea 表单的解决方案。
如何将表单值放入数据中，并将该值发回并发布到 <ul> 中HTML 页面的一部分？这是我所拥有的:
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>
最佳答案
我相信您的第一个 JS 代码片段应该是:
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 究竟是什么？
关于javascript - 无法让 socket.emit 处理表单值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58292567/