li 标签未使用 javascript 使用 socketio 生成值

Question

I am having difficulty to generate li tag with a javascript socket when I submit values to a text field and send nothing returned back and shown * no error . The js rendered correctly.The application integrated with python/flask, javascript, and HTML to give the desired output.

The desired output

• it should take text input and generate to the user

What I tried

        document.querySelector('#frm').onsubmit = () => {
                const message = document.querySelector('#txtMessage').value;
                socket.emit('submit chat', { 'message': message });
            };
    });

Take a look at the following code snippet from flask, javascript and HTML

index.js

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

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

    // When connected, configure textarea (listening)
    socket.on('connect', () => {

        // textarea should emit an  event
        document.querySelector('button').onclick = () => {
                const message = document.querySelector('#txtMessage').value;
                socket.emit('talk', { 'message': message });
            };
    });

    // When a new announce announced, add to the unordered list (trigger)
    socket.on('announce', data => {
        const li = document.createElement('li');
        li.innerHTML = `Eyasu Twitt: ${data.message}`;
        document.querySelector('#messages').append(li);
    });
});

from app.py

@app.route("/")
def index():
    return render_template("index.html")

@socketPlug.on("talk")
def chat(data):
    message = data["message"]
    emit("announce chat", {"message": message}, broadcast=True)

from index.html

        <ul id="messages">
        </ul>
        <hr>
    <form id="frm">
        <textarea id="txtMessage" type="text"></textarea>
        <button id="submit" type="submit">Send</button>
    </form>

Answer 1

Your page reloads on submit, that is why your page doesn't respond because it doesn't store it in server storage. To stop it from reloading you can add the type="button" to the button and add these two lines to the end of your js emit...

document.querySelector("#txtMessage").value = '';
return false;

Also I don't think your parenthesis are aligned in your js code.

For reference look at my code at Exception in thread error when updating my dict containing a list of messages in flask-socketio