When I add a new element to my database the whole things stops to work

Question

I am still trying to build my website where people can text each other, send photos etc.
The chat thing works really well until I wanna add the functionality checking whether the second user in the chat is typing.

Here is my code without the typing thing, this works really well ;)

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

The problem appears when I want to check if the second user is typing. When I am adding the code that's below messages just stop to work. There is a random null in the database as a new user who sent a message to another null. The chat between users also stops to work, users don't see same messages, sometimes can't see any of them and always "undefined" types "undefined" when I refresh the website.

At least it correctly shows when someone is typing, but the rest of the functionalities (which used to work) just don't work anymore.

Here is the code of the typing thing, I also tried to check whether the username and receiver's name aren't null but it didn't reallly help.

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

I mostly wrote this by myself, I will appreciate any kind of help, just please use a straightforward language so I can easily understand the explanation of the problem, I am kind of new.

Answer 1

My experience showed that firestore has problem with undefined values. You can try adding a default value for undefined or null usernames. Maybe you can add zero (0) as the default value for this matter.

Answer 2

Change the path db.ref("messages/" + receiver + "/" + username) to db.ref("messages/" + username + "/" + receiver) at areTheyTyping . See if it works

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

The function

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

It fetches the chat whenever a child is added to the directory of your messages, so when you store the typing status in "messages/" + username + "/" + receiver + "/" the function .on knows that you've changed/added something, therefore posting a message. It's undefined because the message is in fact empty. You should create a new directory where you store the areTheyTyping status, something like "status/" + username + "/" + receiver + "/"
Hope I helped.