當我向我的數據庫添加一個新元素時，整個事情都停止工作了

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 + "/"
希望我有所幫助。