nodejs+express搭建多人聊天室步骤(5)

日期：2020-05-11 栏目：程序人生浏览：次

上面代码大家需要了解以下几点：

socket.on 表示监听事件，后面接一个回调函数用来接收emit发出事件传递过来的对象。
socket.emit 用来触发事件，传递对象给on监听事件。
我们socket连接之后的监听触发事件都要写在io.on('connection'）的回调里面，因为这些事件都是连接之后发生的，就算是断开连接的事件 disconnect 也是在连接事件中发生的，没有正在连接的状态，哪来的断开连接呢？
理解虽然服务器端只有app.js一个文件，但是不同的客户端连接后信息是不同的，所以我们必须要将一些公用的信息，比如说，储存所有登录用户的数组，所有用户发送的所有信息存储在外部，一定不能存储在connecion里

效果展示：

群聊功能实现

写完简单的登录功能，现在我们来写这项目最重要的功能群聊。首先我们先来处理下页面，因为功能简单，所以不单独建立html来显示聊天室，就直接写在login页面，通过class名称的变化来切换登录后，聊天室的显示。

聊天室页面重构

下面我们对chat.html进行整改：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
 <meta charset="UTF-8"> 
 <title>聊天室</title>
 <script src="js/jquery-3.2.1.min.js"></script> 
 <script src="js/main.js"></script> 
 <script src="/socket.io/socket.io.js"></script> 
 <style>
  *{
   margin:0;
   padding:0;
   box-sizing: border-box;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
  }
  .container{
   position: absolute;
   top:0;
   left:0;
   right:0;
   bottom:0;
   background-color: darkgrey;
   padding: 50px;
   overflow-y: scroll;
  }
  .container .title{
   margin: 0 auto;
   font-size: 30px;
   font-family: 'Franklin Gothic Medium';
   font-weight: bold;
   text-align: center;
   margin-bottom:20px;
  }
  .container .login-wrap{
   width:400px;
   padding: 20px;
   border: 1px solid #000;
   margin: 0 auto;
   text-align: center;
  }
  .login-wrap .user-ipt{
   width:360px;
   text-align: center;
   vertical-align: middle;
  }
  .login-wrap .login-button{
  width:60px;
  height:24px;
  line-height:20px;
  font-size: 14px;
  padding: 2px 0;
  border-radius: 5px;
  margin-top:10px;
  }
  .chat-wrap .chat-content{
   width:100%;
   height:600px;
   background-color: whitesmoke;
   padding:10px;
  }
  .chat-wrap .send-wrap{
   margin-top: 20px;
  }
  .message-ipt{
   width: 200px;
   height: 100px;
   padding: 0 5px;
   vertical-align: bottom;
  }
  .chat-content p{
   display: block;
   margin-bottom: 10px;
  }
  .chat-content p .msg{
   display: inline-block;
   padding: 8px 11px;
   border-radius:6px;
  }
  .chat-content .self-message .msg{
   background-color:#d0e7ff;
   border: 1px solid #c9dfff;
  }
  .chat-content .other-message .msg{
   background-color:white;
   border: 1px solid #eee;
  }
  .chat-content .self-message{
   text-align:right;
  }
  .chat-content .other-message{
   text-align-last:left;
  }
 </style> 
</head> 
<body> 
 <div class="container">
  <div id="loginbox" class="login-wrap">
   <div class="title">登录</div>
   <div class="user-ipt">
    <span class="user-name">用户名：</span>
    <input id="name" class="name-ipt" type="text" />
   </div>
   <button id="loginbutton" class="login-button">登录</button>
  </div>
  <div id="chatbox" class="chat-wrap" style="display:none">
   <div id="content" class="chat-content">
    <!-- 聊天内容 -->
   </div>
   <div class="send-wrap">
    <textarea rows="3" cols="20" id="chatmessage" class="message-ipt" type="textarea" placeholder="请输入要发送的信息内容"></textarea>
   </div>
  </div>
 </div>
</body> 
</html>

转载注明出处：http://www.heiqu.com/365.html

nodejs+express搭建多人聊天室步骤(5)

相关推荐