Website Interference w/ Multiple Instances Running (JavaScript)

Question

I am relatively new to JavaScript but I am creating a simple hangman web app in local host. The game runs perfectly, just as I want it. However, I realized that after loading the game at the same time in different tabs, the words change in all instances to the same word. For example, I can run the game in one tab, then another. Then when I go back to the first tab, the word I am trying to guess has changed to the one in the second tab. I don't know how else to describe my issue. Here's my JS and backend code:

JS

function runHangmanInit(){
    $.get("/hangmanInit", {}, function(response){ //generates word
        term.write("RUNNING HANGMAN.cpp\r\n");
        guessedLetters = [];
        let json = JSON.parse(response);
        console.log(json);
        term.write(json["state"] + "\r\n");
        term.write("Category: " + json["category"] + "\t");
        for(let i = 0; i < json["dashes"]; i++){
            term.write(" _");
        }
        term.write("\r\nGuesses remiaining: "+ json["guesses"] + "\r\n");
        term.write(json["message"]);
    });
}

function checkLetterTerminal(letter){
    $.get("/hangman/" + letter, {}, function(response){
        let x = JSON.parse(response);
        //console.log(x);
        if(x["err"]){
            term.write(x["err"]);
        }
        else{
            term.write(x["state"] + "\r\n");
            term.write("Category: " + x["category"] + "\t");
            for(let i = 0; i < x.dashes.length; i++){
                term.write(x.dashes[i] + " ");
            }
            term.write("\r\nGuesses remiaining: "+ x["guesses"] + "\r\n");

            if(x["lettersGuessed"]){ //Incorrect guess
                guessedLetters.push(x["lettersGuessed"]);
            }
            term.write("Letters Guessed: ");
            for(let i = 0; i < guessedLetters.length; i++){
                term.write(guessedLetters[i] + " ");
            }
            term.write("\r\n");
        }
        if(x["message"]){
            term.write(x["message"] + "\r\n");
            check1 = 0;
            term.write("\r\n\x1B[1;3;31mdyaranon@DEKTOP-123:\x1B[0m/mnt/e$ ");
        }
        else{
            term.write("\r\nEnter your guess: ");
        }
    });
}

Backend (Crow C++)

int main(int argc, char* argv[]){

crow::SimpleApp app;
Game game = Game(1);

CROW_ROUTE(app, "/hangmanInit")([](const request& req, response& res){
        nlohmann::json x;
        game.init();
        x["word"] = game.getWord();
        x["state"] = game.board.hangman;
        x["category"] = game.categoryName;
        x["dashes"] = game.board.dashes.size();
        x["guesses"] = 6;
        x["message"] = "Enter your guess: ";
        res.sendJSON(x);
    });

CROW_ROUTE(app, "/hangman/<string>")([](const request &req, response &res, string letter){
        nlohmann::json x;
        x = game.playGame(letter);
        res.sendJSON(x);
    });

I included all the relative parts of the code. Any help would be appreciated.

Answer 1

It looks like you're only creating one game instance? So yes, there's only once instance server-side and you're sharing it among all clients.

HTTP is stateless, so you first need a way to identify which client is which when they make requests. This is normally done by a session ID of some sort, which should be randomly generated.

It's common to store this session ID in cookies, but you'll actually want to just use a local variable in your JavaScript when the page loads, since you want to treat each tab differently.

From there, when you make your HTTP requests (which you're doing with $.get()), you need to include this session ID. I suggest putting it in the URL, something like:

/hangman/<some-game-id-here>/<some-route>

Finally, on the server side, you need to track multiple game instances... one for each game going on, and associate them with the session IDs.