当我在数据库中添加新元素时，整个过程停止工作

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;
});

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

至少它正确地显示了某人打字的时间，但是其余的功能（曾经起作用）不再起作用。

这是打字内容的代码，我还试图检查用户名和接收器的名称是否没有空，但并没有真正的帮助。

// 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

功能

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;
});

只要将孩子添加到消息的目录中，它就会获取聊天的 ，因此，当您将打字状态存储在“ message/” + username +“/” + ceveriver +“ +”/“/”中时函数.on知道您已更改/添加了一些内容，因此发布了消息。这是不确定的，因为消息实际上是空的。您应该在存储aretheytyping状态的情况下创建一个新目录，例如“ status/status/ + username +”/“ +接收者 +”/“/”
希望我帮助。

Answer 2

我的经验表明，Firestore的价值不确定。您可以尝试为未定义或空用户名添加默认值。也许您可以将零（0）作为此问题的默认值添加。

Answer 3

更改路径db.ref（“消息/” +接收器 +“/” +用户名） db.ref（“ message/” +用户名 +“/”/“ + receiver）在aretheytyping。看看它是否有效

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 = "";
});