当我向我的数据库添加一个新元素时，整个事情都停止工作了

Question

我仍在尝试建立我的网站，人们可以在其中互相发短信、发送照片等。
在我想添加检查聊天中的第二个用户是否正在打字的功能之前，聊天的东西真的很好用。

这是我没有打字的代码，这真的很好;）

firebase.initializeApp(firebaseConfig);
const db = firebase.database();

// temporary user and receiver's names
const username = prompt("Nickname:");
const receiver = prompt("Receiver's name:");

// sending a message
document.getElementById("send-message").addEventListener("submit", postChat);
function postChat(e)
{
    e.preventDefault();
    const timestamp = Date.now();
    const chatTxt = document.getElementById("chat-txt");
    const message = chatTxt.value;
    chatTxt.value = "";
    db.ref("messages/" + username + "/" + receiver + "/" + timestamp).set({
        usr: username,
        msg: message,
    });

    db.ref("messages/" + receiver + "/" + username + "/" + timestamp).set({
        usr: username,
        msg: message,
    });
}

// printing the message
const fetchChat = db.ref("messages/" + username + "/" + receiver + "/");
fetchChat.on("child_added", function (snapshot)
{
    const messages = snapshot.val();
    const msg = "<li>" + messages.usr + " : " + messages.msg + "</li>";
    document.getElementById("messages").innerHTML += msg;
});

当我想检查第二个用户是否正在输入时，就会出现问题。 当我添加消息下方的代码时，就会停止工作。 数据库中有一个随机空值作为新用户向另一个空值发送消息。 用户之间的聊天也停止工作，用户看不到相同的消息，有时看不到任何消息，并且在我刷新网站时总是“未定义”类型“未定义”。

至少它正确地显示了某人何时打字，但其余的功能（过去可以工作）只是不再工作了。

这是打字的代码，我还尝试检查用户名和接收者的姓名是否不为空，但它并没有真正帮助。

// showing whether the receiver is typing
function sendTyping(tmp)
{
    if(tmp)
    {
        db.ref("messages/" + username + "/" + receiver).set({
            tpg: "yes"
        });
    }
    else
    {
        db.ref("messages/" + username + "/" + receiver).set({
            tpg: "no"
        }); 
    }
}

var searchTimeout;
document.getElementById("chat-txt").onkeydown = function() {
    if (searchTimeout != undefined)
        clearTimeout(searchTimeout);
        
    searchTimeout = setTimeout(callServerScript, 1500);
    sendTyping(true);
}

function callServerScript() {
    sendTyping(false);
}

let areTheyTyping = db.ref("messages/" + receiver + "/" + username);
areTheyTyping.on("value", function(snapshot) {
    const typing = snapshot.val();
    const status = typing.tpg;
    if(status == "yes")
        document.getElementById("writing").innerHTML = "typing...";
    else
        document.getElementById("writing").innerHTML = "";
});

我主要是自己写的，我将不胜感激，请使用简单的语言，以便我可以轻松理解问题的解释，我是新手。

Answer 1

我的经验表明，firestore 存在未定义值的问题。 您可以尝试为未定义或空的用户名添加默认值。 也许您可以添加零 (0) 作为此问题的默认值。

Answer 2

在 areTheyTyping 将路径db.ref("messages/" + receiver + "/" + username)更改为areTheyTyping db.ref("messages/" + username + "/" + receiver) 。 看看它是否有效

function sendTyping(tmp)
{
    if(tmp) {
        db.ref("messages/" + username + "/" + receiver).set({
            tpg: "yes"
        });
    }
    else {
        db.ref("messages/" + username + "/" + receiver).set({
            tpg: "no"
        }); 
    }
}
var searchTimeout;
document.getElementById("chat-txt").onkeydown = function() {
    if (searchTimeout !== undefined)
        clearTimeout(searchTimeout);
        
    searchTimeout = setTimeout(callServerScript, 1500);
    sendTyping(true);
}

function callServerScript() {
    sendTyping(false);
}

let areTheyTyping = db.ref("messages/" + username + "/" + receiver);
areTheyTyping.on("value", function(snapshot) {
    const typing = snapshot.val();
    const status = typing.tpg;
    if(status === "yes")
        document.getElementById("writing").innerHTML = "typing...";
    else
        document.getElementById("writing").innerHTML = "";
});

Answer 3

功能

const fetchChat = db.ref("messages/" + username + "/" + receiver + "/");
fetchChat.on("child_added", function (snapshot)
{
    const messages = snapshot.val();
    const msg = "<li>" + messages.usr + " : " + messages.msg + "</li>";
    document.getElementById("messages").innerHTML += msg;
});

每当将孩子添加到您的消息目录时，它都会获取聊天，因此当您将输入状态存储在"messages/" + username + "/" + receiver + "/"中时，函数.on知道您已经更改/添加了一些东西，因此发布了一条消息。 它是未定义的，因为消息实际上是空的。 您应该创建一个新目录来存储areTheyTyping状态，例如"status/" + username + "/" + receiver + "/"
希望我有所帮助。