Вывод не отображается должным образом в теге <li> - PullRequest
Новая
       92

Вывод не отображается должным образом в теге <li>

1 голос
/ 04 мая 2020

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)

Привет, поэтому в приведенном выше коде я не могу вывести мои значения переменных «text» и «name» в одном теге «li», вместо того, чтобы печатать значение обеих переменных в одном теге «li», значение переменной «name» отображается как «(введено name): undefined "в одном теге 'li', а значение переменной" text "отображается как" undefined: (введенный текст) "в другом теге 'li'. Пожалуйста, помогите мне решить эту проблему. Спасибо.

1 Ответ

1 голос
/ 04 мая 2020

Это происходит из-за того, что ваш дизайн разъема немного неисправен. Значения name и text возвращаются из отдельных передач socket, пока вы ожидаете, что они будут вместе. Я вижу, что ваши значения name & text доступны вместе в html, поэтому вы можете использовать один и тот же emit socket для отправки как 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)
...