<li> 标记中的输出未按预期显示

Question

html代码：

<html>
<head>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            var socket = io.connect(location.protocol + '//' + document.domain + ':' + location.port);
                socket.on('connect', () => {
                $('form#chat').submit(function(event) {
                const name = document.getElementById('name').innerHTML;
                const text = document.getElementById('words').value;
                socket.emit('submit value', {'text':text});
                socket.emit('submit name', {'name':name});
                return false;
                 });
            });
            socket.on('chatting', data  => {
                var name = (data.name);
                var text = (data.text);
                const li = document.createElement('li');
                li.innerHTML = name+':'+text;
                document.querySelector('#lists').append(li);
            });
        });
    </script>
    <title>chat room</title>
</head>
<body>
    <h1 style="font-family:verdana; font-style:italic;">Chat room!!!</h1>
    <hr>
    <p id="name">{{name}}</p>
    <hr>
    <ul id="lists">
    </ul>
    <hr>
    <form id="chat" action="">
        <input id="words" autocomplete="on" autofocus placeholder="enter text" type="text">
        <input type="submit">
    </form>
</body>

python代码：

import os

from flask import Flask, render_template, request
from flask_socketio import SocketIO, emit

app = Flask(__name__)
app.config["SECRET_KEY"] = os.getenv("SECRET_KEY")
socketio = SocketIO(app)


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

@app.route("/register", methods=["POST","GET"])
def login():
    name=request.form.get("name")
    return render_template("index.html", name=name)

@socketio.on("submit value")
def chatting(data):
    text=data["text"]
    emit("chatting", {"text":text},  broadcast=True)

@socketio.on("submit name")
def name(data):
    name=data["name"]
    emit("chatting", {"name":name}, broadcast=True)

你好，所以在上面的代码中，我无法在一个 'li' 标签中打印 "text" 和 "name" 变量的值，而不是打印 'li' 变量的值单个 'li' 标签中的两个变量，"name" 变量的值在单个 'li' 标签中显示为“（输入的名称）：未定义”，[=21] 的值=] 变量在另一个 'li' 标签中显示为 "undefined : (entered text)"。请帮我解决这个问题。谢谢。

Answer 1

出现这种情况是因为您的插座设计有点问题。 name 和 text 值从单独的 socket 广播中返回，而您希望它们在一起。我看到您的 name 和 text 值在 html 中一起可用，因此您可以使用相同的套接字发送将 name 和 text 发送到您的服务器这样它们也可以一起广播，从而为您提供想要的结果。

您可以进行以下修改：

html代码：

// Remove these 2
// socket.emit('submit value', {'text':text});
// socket.emit('submit name', {'name':name});

// and add this line
socket.emit('submit', {'text':text, 'name': name});

python代码：


# Remove following two methods chatting & name
'''
@socketio.on("submit value")
def chatting(data):
    text=data["text"]
    emit("chatting", {"text":text},  broadcast=True)

@socketio.on("submit name")
def name(data):
    name=data["name"]
    emit("chatting", {"name":name}, broadcast=True)
'''

# And add
@socketio.on("submit")
def name(data):
    name=data["name"]
    text=data["text"]

    emit("chatting", {"name":name, "text": text}, broadcast=True)

<li> 标记中的输出未按预期显示

Output not displayed as expected in <li> tag

html

javascript

flask

python-3.8