实现一个聊天功能的对话框

额。。。先来看下总效果吧==》

下面分别有三个用户，他们都分别发了聊天信息；

步骤：

一、把基本的架构写好，

<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}已离开聊天室`);

}

})

})