javascript - 使用 $.get 调用文件时 socket.io 事件不起作用

Question

我一直在学习 express with socket，但我似乎无法让我的代码按照我想要的方式工作。基本上我正在做一个 $.get 调用，它通过并替换我的索引页面上的 HTML。这是在服务器确认添加的新用户满足正确要求后完成的。

$.get 完美地工作，它通过其他文件 html 拉取。但是套接字事件然后停止工作，我不明白为什么。它应该做的是在聊天框旁边添加该人的用户名，当有人输入内容时它也应该反射(reflect)出来。

似乎服务器不喜欢我调用不同的文件或类似的东西？

这是我的 GIT 的直接链接:https://github.com/factordog/letsGuess 因此，如果您需要查看所有设置的方式，您可以直接检查，我不确定需要什么。

这是有问题的代码:

        $.get("./pages/game.html" ,function(data){
            console.log(data);
            $("#test").html(data);
        });

这是实际的客户端js:

$(function($) {

    // Variables
    var socket          = io.connect(),// Creates the connection variable
        setUsername     = $("#setUsername"), //Form for when a user join
        newUser         = $("#username"), // Input for where user inputs a name
        userSuccess     = $(".successMessage"), // Success container for valid username
        userError       = $(".errorMessage"), // Error container for invalid username
        playerOne       = null, 
        playerTwo       = null;

    // Submit function for when a user submits their desired username
    setUsername.submit(function(e){
        // Prevent sumbit button default
        e.preventDefault();

        // Gets value of the username. function(data) allows us to reference the app.js
        // data which is the array of new users.
        socket.emit("new user", newUser.val(), function(data){
            // Checks if name is valid else displays an error
            if(data) {
                socket.on("full_lobby_check", function(data){
                    console.log(data.lobbyStatus);
                });
                // Fades out the login page
                userSuccess.removeClass("hide");
                setTimeout(function(){
                    $("#loginPage").fadeOut();
                }, 1000);
                // Create a smoother transition between pages

                $.get("./pages/game.html" ,function(data){
                    console.log(data);
                    $("#test").html(data);
                });

                setTimeout(function(){
                    $('#gamePage').fadeIn();
                }, 2000);
            } else {
                userError.removeClass("hide");
            }
        });

        newUser.val("");
    });

    // ===============================================
    // PLAYER VS PLAYER APPEND
    // ===============================================

    // Append player names to battle
    socket.on("event_new_user", function(data){
        playerOne = data.userOne;
        playerTwo = data.userTwo;
        $(".playerOne").append(playerOne);
        $(".playerTwo").append(playerTwo);
    });


    // ===============================================
    // MESSAGE BOX LOGIC
    // ===============================================
    var users           = $(".playersOnline"), // Area to append all users names
        messageForm     = $(".sendMessage"),
        messageBox      = $(".message"),
        chat            = $(".chat");

    // Display all the usernames in chat room area
    socket.on("usernames", function(data){
        var html ="";
        for(i=0 ; i < data.length; i++) {
            html += data[i] + "<br/>";
        }
        users.html(html);
    });

    // On sumbit sends message to server to be fufilled
    messageForm.click(function(e){
        // Prevent sumbit button default
        e.preventDefault();
        socket.emit("send message", messageBox.val());
        messageBox.val('');
    });

    // Appends the new message from the user to the chat box
    socket.on("new message", function(data){
        console.log(data.user);
        chat.append("<b>" + data.user + ": </b>" + data.msg + "<br/>");
    }); 
})

;

编辑:

包含当前的 pastebin:http://pastebin.com/WUzwuPrf

Answer 1

我看到的主要问题是代码中事件发生的顺序。 $.get 不应影响 socket.io 的性能，而是问题在于您正在异步获取 html 代码，因此您的页面可能仅在获取 socket.io 事件后获取 html 文件.

让我逐步了解您的代码中运行的内容:

1.

var users           = $(".playersOnline"), // Area to append all  users names
    messageForm     = $(".sendMessage"),
    messageBox      = $(".message"),
    chat            = $(".chat");

以上行在页面加载时运行。但是，在页面加载时，您还没有加载 html，因此 jquery 将无法找到这些元素中的任何一个。注意:它不会给出错误，因为 jquery 会很好地处理涉及 0 个元素的所有操作。

2。 表单提交后

// Display all the usernames in chat room area
socket.on("usernames", function(data){
    var html ="";
    for(i=0 ; i < data.length; i++) {
        html += data[i] + "<br/>";
    }
    users.html(html);
});

这个事件很可能会在表单提交后立即执行(但在 html 加载之前)。这是因为 socket.io 使用的 websocket 非常快!再次出现同样的问题，因为 users 仍然是 0 元素的 jquery 选择器，因为 html 还没有在 DOM 中。

3.

    $.get("./pages/game.html" ,function(data){
        console.log(data);
        $("#test").html(data);
    });

最后在其他一切运行之后，这很可能最后触发。回调函数将设置页面上的 html 并将所有元素插入到 DOM 中。但是，为时已晚，因为所有其他 socket.io 事件可能已经执行，而页面上没有任何元素来放置它们的所有数据。

TLDR:对于 socket.io 事件，你应该确保你的服务器在你的页面准备好之前不会发送它们(也许将“新用户”事件分成“新用户”和'page ready' 事件)，或者您可以全局存储数据并仅在 $.get 完成时将其放在页面上(不推荐使用第二个选项，因为它仍然存在时间问题)。

确保如果你做类似 var users = $(".playersOnline") 的事情，你只在 $.get 完成更新页面后运行的代码中做它(同样适用于事情像 users.html(html);)。我建议制作一个 function gamepage_ready(){...} 函数，它在插入 html 后由 $.get 调用，负责将数据从 socket.io 插入页面。