快捷導(dǎo)航

websocket+node.js實(shí)現(xiàn)實(shí)時(shí)聊天系統(tǒng)問題咨詢

更新時(shí)間：2017年05月17日 14:32:56 作者：蘇黎世寶貝

最近新學(xué)習(xí)websocket，做了一個(gè)實(shí)時(shí)聊天。用Node.js搭建的服務(wù):serevr.js. 兩個(gè)相互通信頁面：client.html 和server.html 但是就是有很多問題，下面通過本文給大家分享下

1.最近新學(xué)習(xí)websocket。做了一個(gè)實(shí)時(shí)聊天。用Node.js搭建的服務(wù):serevr.js. 兩個(gè)相互通信頁面：client.html 和server.html

但是就是有很多問題，想讓知道的人幫我看看哈：

我先把代碼貼出來：

server.js：

var ws=require("nodejs-websocket");
 console.log("開始建立連接...");
 var str1=null,str2=null, clientReady=false,serverReady=false;
 var server=ws.createServer(function(conn){
   conn.on('text',function(str){
     console.log(str);
     /**
      * 用戶小雨第一次連接
      */
    if(str==="小雨"){
       str1=conn;
       clientReady=true;
       str1.sendText("歡迎"+str); 
    }
    /**
     * 用戶小喬第一次連接
     */
    if(str==="小喬"){
       str2=conn;
       serverReady=true;
      str2.sendText("歡迎"+str);
    }
    /**
     * 當(dāng)有第二個(gè)用戶連接時(shí)。
     */
     if(clientReady&&serverReady){
      str2.sendText(str);
      str1.sendText(str);
    }
   })
   conn.on("close",function(code,reason){
     console.log("關(guān)閉連接");
   })
   conn.on("error",function(code,reason){
     console.log("異常關(guān)閉")
   });
 }).listen(8082);
 console.log("websocket連接完畢")
client.html：
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .kuang{
      width: 600px;
      min-height: 50px;
      max-height:296px;
      border:1px solid;
      float: left;
      display: block;
      position:relative;
      overflow-y: scroll;
    }
    .value{ 
      width: 200px;
    }
    .input{
      display:block;
      position: absolute;
      left:0;
      margin-top: 300px;
    }
  </style>
</head>
<body>
  <label>連接用戶:</label>
  <input type="text" id="name" value="小雨" readonly/>
  <button id="conn">連接</button>
  <button id="close">斷開</button><br/><br/>
  <div class="kuang" id="mess"></div>
  <div class="input"> 
  <input type="text" class="value" id="value1" />
  <button id="send">發(fā)送</button>
  </div>
  <script>
    var name=document.getElementById("name").value;
    var mess=document.getElementById("mess");
    var value1=document.getElementById("value1");
    var conn= document.getElementById("conn");
    var close=document.getElementById("close");
    close.disabled=true;
    if(window.WebSocket){
     conn.onclick=function(){
      var ws=new WebSocket('ws://127.0.0.1:8082');
      conn.disabled=true;
      close.disabled=false; 
       ws.onopen=function(e){
          console.log("連接服務(wù)器成功"); 
           ws.send(name);
      } 
    ws.onmessage=function(e){
      var time=new Date();
      mess.innerHTML+=time.toUTCString()+":"+e.data+"<br>";
      document.getElementById("send").onclick=function(e){
        ws.send(name+"說:"+value1.value);
        value1.value=" ";
      }
      document.onkeydown = function(e) {
        e = e || window.event;
        if(e.keyCode == 13) {
           document.getElementById("send").onclick();
          return false;
        }
      }  
    }
    /**
     * 客戶端主動(dòng)斷開連接
     * 
     * **/ 
    close.onclick=function(){
      ws.onclose();
      conn.disabled=false;
      close.disabled=true; 
    }  
     ws.onclose = function(e){
       console.log("服務(wù)器關(guān)閉");
     } 
    ws.onerror = function(){
      console.log("連接出錯(cuò)");
    }
    }  
  }
  </script>
</body>
</html>

server.html 頁面和client.html的代碼一樣，就是用戶名字換成小喬啦。

接下來就是問題啦：

1.運(yùn)行界面：

client.html 連接以后：