Не удается заставить socket.emit работать со значением формы - PullRequest
Новая
       51

Не удается заставить socket.emit работать со значением формы

1 голос
/ 08 октября 2019

Я пробовал много разных комбинаций кода ниже, чтобы выяснить, как заставить Flask-SocketIO генерировать значение из текстовой области. Мне нужно использовать JavaScript, а не JQuery. Я проверил свое соединение с сервером и общий шаблон кода с помощью кнопки (она работает для передачи значения кнопки), но я не нашел в сети ни одного решения, которое бы работало в моей текстовой форме.

Как сделатьЯ поместил значение формы в данные, и было ли это значение отправлено обратно и опубликовано в разделе <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);
});

Я также пробовал это для первой половины кода, помещая значение формы в данные. текст, и заставить его излучать при каждом нажатии кнопки отправки. Он помещает сообщение из 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>

1 Ответ

1 голос
/ 10 октября 2019

Я считаю, что ваш первый фрагмент кода 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 в любом случае?

...