Question

我试图创建一个聊天应用程序。但是首先，我试图创建一个频道，以便当用户填写表格并单击“创建频道”按钮时，会创建一个频道并将其显示在已加入的频道列表中，但没有任何反应当我点击创建频道按钮时。 Javascript / HTML代码：


    <script>

        document.addEventListener('DOMContentLoaded',function(){
            if(!localStorage.getItem("displayname")){
            var displayname;
            while(!displayname){
                var displayname=prompt("Enter displayname","displayname");

            }
            localStorage.setItem("displayname",displayname);
            document.querySelector('.name').innerHTML=  'welcome '+ displayname;
            }
            else{
            document.querySelector('.name').innerHTML=  'welcome '+ displayname;

             }

            var socket = io.connect(location.protocol + '//' + document.domain + ':' + location.port);
            socket.on('connect', () => {
                document.querySelector('.createchannel-button').onclick=()=>{
                    const newchannel = document.querySelector('#creatingchannel-inputfield').value;
                    socket.emit('checkchannel',{'newchannel':newchannel});
                    return false;
                };

            });
            socket.on('channel status', data => {
                if (data.channelstatus==True) {
                    const div= document.createElement('div');
                    const channel=document.createElement('a');
                    channel.id=data.newchannel;
                    div.append(channel);
                    document.querySelector('.joinedchannel-list').append(div);
                }
                else{
                    alert(`${data.newchannel} already exists`);
                }

            });

        });




    </script>
<body>
<center><div class="name"> <div></center>

            <div class="joinedchannel-list">

            </div>
        </div>
        <form>
            <input type="text" name="createchannel" id="createchannel-inputfield" placeholder="enter channel name">
            <button  type="submit" class="createchannel-button">Create Channel</button>
        </form>
    </div>




    <div class="main">
        <div class="chat-head">
             heading
        </div>

        <div class="chat">

        </div>

        <div class="message">
            <form>
                <input type="text" name="message">
                <button onclick="send()" class="send-button">send </button>

            </form>

        </div>
    </div>
    <div style="float: right;">

    </div>



</body>
</html>

这是我的烧瓶代码：

import os
import requests
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)

channels=[]
@app.route("/")
def chat():
    return render_template("chat.html")

@socketio.on("checkchannel")
def checkchannel(data):
    newchannel = data["newchannel"]
    channelstatus=True
    for i in channels:
        if i==newchannel:
            channelstatus=False
            newchannel="name already exists ..select other name"
            emit("channel status", {"newchannel": newchannel,"channelstatus":channelstatus}, broadcast=False)

    channels.append(newchannel)
    emit("channel status", {"newchannel": newchannel, "channelstatus": channelstatus}, broadcast=True)


if __name__ == '__main__':
    socketio.run(app)

This what happens when i load the page and try to create a channel 'channel1'.Just the URL changes and nothing happens.Further the displayname also changes to undefined and it shows 'welcome undefined'

Answer 1

尝试使用此代码：

var person = prompt("Please enter your name", "Sample Name");

if (person != null) {
  document.getElementById("demo").innerHTML =
  "Hello " + person + "! How are you today?";
}

我认为您变得不确定，因为第一次本地存储没有任何价值。因此，将其放在onclick函数中

socketio webapp没有运行

1 个答案: