具有多个实例的网站干扰运行 (JavaScript)

Question

我对 JavaScript 比较陌生，但我正在本地主机上创建一个简单的刽子手 Web 应用程序。游戏运行完美，如我所愿。然而，我意识到在不同的选项卡中同时加载游戏后，所有实例中的单词都变成了同一个单词。例如，我可以在一个选项卡中运行游戏，然后在另一个选项卡中。然后，当我返回第一个选项卡时，我试图猜测的单词已更改为第二个选项卡中的单词。我不知道如何描述我的问题。这是我的 JS 和后端代码：

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

后端（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);
    });

我包含了代码的所有相关部分。任何帮助将不胜感激。

Answer 1

您似乎只创建了一个游戏实例？所以是的，只有一次实例服务器端，你在所有客户端之间共享它。

HTTP 是无状态的，因此您首先需要一种方法来识别哪个客户端在发出请求时是哪个客户端。这通常是由某种会话 ID 完成的，它应该是随机生成的。

通常将此会话 ID 存储在 cookie 中，但实际上您只想在页面加载时在 JavaScript 中使用局部变量，因为您希望以不同方式对待每个选项卡。

从那里开始，当您发出 HTTP 请求时（您正在使用 $.get() 执行此操作），您需要包含此会话 ID。我建议将它放在 URL 中，例如：

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

最后，在服务器端，您需要跟踪多个游戏实例...一个用于每个正在进行的游戏，并将它们与会话 ID 相关联。

具有多个实例的网站干扰运行 (JavaScript)

Website Interference w/ Multiple Instances Running (JavaScript)

javascript

jquery

backend

crow

具有多个实例的网站干扰 运行 (JavaScript)

Website Interference w/ Multiple Instances Running (JavaScript)

javascript

jquery

backend

crow

具有多个实例的网站干扰运行 (JavaScript)