實現一個聊天功能的對話框

額。。。先來看下總效果吧==》

下面分別有三個用戶，他們都分別發了聊天信息；

步驟：

一、把基本的架構寫好，

<div class="wrapper">
    <!-- 聊天信息框 -->
    <div class="content" id="chat">
      <ul id="chat_conatiner">
          
      </ul>
    </div>

    <!-- 聊天輸入框 -->
    <div class="action">
      <textarea name="content" id="input"></textarea>
      <button class="btn btn-success" id="clear">清屏</button>
      <button class="btn btn-success" id="send">發送</button>
    </div>
  </div>
</body>

 

二、我們要像搭建node服務器那樣，重新封裝一下配置文件js ——也就是“server.js”,因為我們還是要用到node.js 服務器連接客戶端來建立一個實時聊天室。代碼如下：

 

//引入第三方模塊插件
var express = require('express'),
    io = require('socket.io');


//創建app
var app = express();

//給app綁定一個監聽的端口
var server = app.listen(3000,function(){
  console.log('程序已啟動');
});


//用socket來監聽當前服務
var ws = io.listen(server);


//socket事件

var checkUser = function(nickname)
{
  //ws.sockets.sockets 存放所有連接的用戶
  for(var k in ws.sockets.sockets)
  {
    if(ws.sockets.sockets[k].nickname == nickname)
    {
        //該用戶已經存在了
        return true;
    }
  }

  //用戶不存在
  return false;
}

//當有客戶端連接上來的時候會觸發到當前的事件函數
ws.on('connection',function(client){
  
  //給客戶端綁定一個事件用來接收昵稱
  client.on('join',function(nickname){
 
      //用戶不存在
      //給當前客戶端對象添加自定義屬性
      client.nickname = nickname;

      //調用客戶端的提醒事件
      ws.sockets.emit('notice','系統',`${nickname}已加入群聊(*^__^*) 嘻嘻……`);
    
  })

  client.on('message',function(content){

    //把他信息發給所有人，但是除了自己 廣播
    //調用客戶端的接收方法
    client.broadcast.emit('message',client.nickname,content);
  });


  client.on('disconnect',function(){
    
    if(client.nickname)
    {
      ws.sockets.emit('notice',"系統",`${client.nickname}已離開聊天室`);
    }
  })
})

 

 

 

三、這里要注意一下，要引進我們的 socket.io.js

     然后下面就是我們要寫的業務邏輯

 

 

 

<script>
  //先連接
  var ws = io.connect("http://localhost:3000");

  //客戶已存在的事件接收
  ws.on('checkUser',function(nickname){
    var nickname = prompt(`${nickname}已經存在了`);

    while(!nickname)
    {
      nickname = prompt('昵稱不能為空');
    }

    //將重新輸入的結果再給會服務器驗證是否存在
    ws.emit('join',nickname);

  })

  //在客戶端上面綁定事件
  ws.on('connect',function(){
    var nickname = prompt("請輸入你的昵稱");

    while(!nickname)
    {
      nickname = prompt('昵稱不能為空');
    }

    //將昵稱傳遞給服務器
    ws.emit('join',nickname);
  });


  //接收一個系統服務器通知的消息
  ws.on('notice',function(from,msg){
    addMessage(from,msg);
  });

  //將信息添加到頁面里面
  function addMessage(from,msg)
  {
    var li = document.createElement("li");

    li.innerHTML = `<span>${from}：</span>${msg}`;

    var chat = document.getElementById("chat_conatiner");

    chat.append(li);

    document.getElementById("chat").scrollTop = document.getElementById("chat").scrollHeight;
  }

  //清屏
  document.getElementById("clear").addEventListener('click',function(){
    document.getElementById("chat_conatiner").innerHTML = "";
  });

  //發送
  document.getElementById("send").addEventListener("click",function(){
    send();
  });



  document.getElementById("input").addEventListener("keydown",function(e){
    if(e.keyCode == 13 && e.ctrlKey)
    {
      send();
    }
  });


  function send()
  {
    var content = document.getElementById("input");

    if(content.value.trim().length > 0)
    {
      //添加到自己的區域里面
      addMessage("我",content.value);

      //發送給服務器
      ws.emit('message',content.value);

    }

    content.value = "";
    KindEditor.html("#input","");

    //產生焦點
    // KindEditor.focus();

    
  }

  //客戶端要接收服務器廣播回來的用戶信息
  ws.on("message",function(from,msg){
    addMessage(from,msg);
  });



  
</script>

 

 

 

//引入第三方模塊插件

var express = require( 'express'),

io = require( 'socket.io');

//創建app

var app = express();

//給app綁定一個監聽的端口

var server = app. listen( 3000, function(){

console. log( '程序已啟動');

});

//用socket來監聽當前服務

var ws = io. listen( server);

//socket事件

var checkUser = function( nickname)

{

//ws.sockets.sockets 存放所有連接的用戶

for( var k in ws. sockets. sockets)

{

if( ws. sockets. sockets[ k]. nickname == nickname)

{

//該用戶已經存在了

return true;

}

}

//用戶不存在

return false;

}

//當有客戶端連接上來的時候會觸發到當前的事件函數

ws. on( 'connection', function( client){

 

//給客戶端綁定一個事件用來接收昵稱

client. on( 'join', function( nickname){

 

//用戶不存在

//給當前客戶端對象添加自定義屬性

client. nickname = nickname;

//調用客戶端的提醒事件

ws. sockets. emit( 'notice', '系統', ` ${ nickname } 已加入群聊(*^__^*) 嘻嘻……`);

 

})

client. on( 'message', function( content){

//把他信息發給所有人，但是除了自己 廣播

//調用客戶端的接收方法

client. broadcast. emit( 'message', client. nickname, content);

});

client. on( 'disconnect', function(){

 

if( client. nickname)

{

ws. sockets. emit( 'notice', "系統", ` ${ client. nickname } 已離開聊天室`);

}

})

})