2016-02-16 150 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()}); 

为了防止表单提交的上输入的默认行为。

相关问题