2016-02-16 149 views
-1

這是代碼的主體。基本上我正在嘗試爲聊天服務器編寫客戶端頁面。假設服務器交互是正確的,頁面將永遠不能接收從服務器發回的消息,因爲每當我點擊輸入時頁面刷新。代碼應該向服務器發送消息,然後服務器將消息發送給所有連接的客戶端,客戶端將消息追加到列表的末尾。我正在嘗試爲網頁創建一個聊天功能,並且當我按下回車鍵時它會不斷重新加載。誰能告訴我爲什麼會發生這種情況?

<!DOCTYPE html> 
    <html> 
    <head> 
    <title>Chat</title> 
    <meta charset="UTF-8"> 
    <link rel="stylesheet" href="http://localhost:4000/static/_stylesGlobal.css"> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
    <script src="/socket.io/socket.io.js"></script> 
    <script> 

     function sendChat(msg) 
     { 
      socket.emit('newMessage', {message:msg}); 
      console.log("Sent by User: %s", msg); 

     } 

     function updateChatLog(msg) 
     { 
      $("#chatLog").append(msg.message + "<br>"); 
      console.log(msg.message); 
     } 

     function msgReceived(msg) 
     { 
      $("clientCount").html(msg.clients); 
     } 

     function clientUpdate (msg) 
     { 
      $("#clientCount").text(msg.clients); 
     } 


     $(document).ready(function() { 

      $("#clientCount").text("0"); 


      socket = io.connect('http://localhost:4000'); 

      socket.on('mUpdate',function(msg){updateChatLog(msg); msgReceived(msg);}); 
      socket.on('nClientUpdate',function(msg){clientUpdate(msg);}); 
      $("#enterChat").click(function() { 
      var messageValue = $("#chatMessage").val(); 
      console.log("Entered by User: %s", messageValue); 
      sendChat(messageValue); 

      }); 

      }); 




    </script> 
    </head> 


    <body> 
    <header role="banner" > 
     <h1>Chat</h1> 

     </header> 
    <nav role="navigation" id = "main_nav_bar"> 
    <ul> 
     <li id="homenav"><a href="http://localhost:4000/">Home</a></li> 
     <li id="calculatornav"><a href="http://localhost:4000/static/calculator.html">Calculator</a></li> 
     <li id="logbooknav"><a href="http://localhost:4000/static/logbook.html">Logbook</a></li> 
     <li id="gallerynav"><a href="http://localhost:4000/static/gallery.html">Gallery</a></li> 
     <li id="downloadnav"><a href="http://localhost:4000/static/download.html">Download</a></li> 
     <li id="chatnav"><a href="http://localhost:4000/static/chat.html">Chat</a></li> 
    </ul> 
    </nav> 

     <main> 
      <div id="chatWindow"> 
      <h3>Welcome To Chat</h3> 


      <div id="chatLog"></div> 

      </div> 
    <form id="chatInput"> 
    <p><span id="clientCount">0</span> Online Now</p> 
    <br> 
     <input type="text" id="chatMessage" value="Your Message Here !" style="width: 100%;"> 
     <br> 
     <input type="submit" value="Enter" href="#chatInput" id="enterChat"> 
    </form> 

     </main> 

    <footer role="contentinfo"> 
    </footer> 



    </body> 
    </html> 

對這個重載的主要罪魁禍首是進入聊天功能:

$("#enterChat").click(function() { 
      var messageValue = $("#chatMessage").val(); 
      console.log("Entered by User: %s", messageValue); 
      sendChat(messageValue); 

      }); 

如果任何人都可以點我朝着爲什麼頁面重新加載,我可以朝看是否來自服務器的消息是實際工作正確傳遞。最重要的是,我真的很感激它。

回答

2

你可以只添加此

$('#chatInput').submit(function(e) {e.preventDefault()}); 

爲了防止表單提交的上輸入的默認行爲。

相關問題