使用$ .get調用文件時，socket.io事件不起作用

Question

我一直在用socket學習express，我似乎無法讓我的代碼按照我想要的方式工作。基本上，我正在做一個$ .get調用，它將取代我的索引頁上的HTML。這是在服務器確認添加了新用戶並符合正確要求之後完成的。

$ .get完美地工作，它通過其他文件html。然而套接字事件然後停止工作，我不明白爲什麼。它應該做的是在聊天框旁邊添加用戶名，當某人鍵入某些內容時，它應該反映出來。

這似乎是服務器不喜歡我打電話給不同的文件或沿着這些行的東西？

這是我的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/>"); 
    }); 
}) 

;

編輯：

包括了當前引擎收錄：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個元素的所有操作。表單提交

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

2. 後最有可能本次活動將在表單提交後立即執行（但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事件，您應確保您的服務器在您的頁面準備好之前不會發送它們（也許將'新用戶'事件分爲'新用戶'和'已準備好頁面'事件），或者您可以全局存儲數據，並且只在$ .get完成時纔將其放在頁面上（不推薦使用第二個選項，因爲它仍然會導致計時問題）。

確保如果您執行類似var users = $(".playersOnline")的操作，您只能在$ .get完成更新頁面（在users.html(html);之類）之後運行代碼。我建議製作一個function gamepage_ready(){...}函數，它在插入html之後由$ .get調用，該函數負責將socket.io中的數據插入到頁面中。