node实现聊天室功能

源代码下载

下载node包:

npm install express --save
npm install socket.io --save

先完成页面

html



    
        
        
        
        聊天室
        
    
    
        

成员 0


      css

      *{
          margin:0;
          padding:0;
          list-style: none;
      }
      html,
      body,
      .wrapper{
          width:100%;
          height:100%;
          overflow: hidden;
      }
      .banner{
          width:100%;
          height:50px;
          border-bottom: 1px solid #000;
      }
      h1{
          font-size: 20px;
          font-weight: 100;
          text-align: center;
          line-height: 50px;
      }
      .bottom{
          width:100%;
          height:calc(100% - 50px);
          position: relative;
          clear: both;
      }
      .left{
          width:calc(20% - 1px);
          height:100%;
          border-right:1px solid #000;
          float: left;
      }
      .right{
          width:80%;
          height:100%;
          float: left;
      }
      
      h2{
          height:30px;
          font-size:15px;
          font-weight: bold;
          text-align: center;
          line-height: 30px;
      }
      
      .left li{
          padding: 10px 0 10px 20px;
      }
      .left li:hover{
          background: #8eafea;
      }
      
      .right .content{
          height: calc(80% - 1px);
          border-bottom:1px solid #000;
          overflow: hidden;
          padding:0 20px;
      }
      .right .content ul{
          clear: both;
          overflow: auto;
          height:100%;
      }
      .right .content li{
          margin-bottom: 10px;
          overflow: auto;
      }
      .right .content .chat-left > div{
          float: left;
      }
      .right .content .chat-right > div{
          float: right;
      }
      .right .content .chat-content{
          margin-left:20px;
      }
      .right .controls{
          width:100%;
          height:20%;
      }
      textarea{
          width:100%;
          height:calc(100% - 50px);
      }
      #sendBtn{
          width:150px;
          height:35px;
      }
      
      .cover{
          width:100%;
          height:100%;
          position: fixed;
          top:0;
          left:0;
          background: #fff;
      }
      .cover > div{
          width:300px;
          /*height:200px;*/
          background: rgba(0, 161, 255, 0.83);
          position: absolute;
          top:50%;
          left:50%;
          margin-left: -150px;
          margin-top:-87px;
          padding: 50px 0;
          text-align: center;
      }
      .cover input{
          height: 30px;
          width:200px;
      }
      .cover button{
          margin-top:10px;
          width:50px;
          height:30px;
      }
      #info{
          color:#f00;
      }
      

      服务器

      var express = require('express'),
          app = express(),
          server = require('http').createServer(app),
          io = require('socket.io').listen(server); //引入socket.io模块并绑定到服务器
      server.listen(9999);
      
      var users = [];
      
      //socket部分
      io.on('connection', function(socket) {
          //在线统计,进入房间
          socket.on('login', function(nickname) {
              if (users.indexOf(nickname) > -1) {
                  socket.emit('nickExisted');
              } else {
                  socket.userIndex = users.length;
                  socket.nickname = nickname;
                  users.push(nickname);
                  socket.emit('loginSuccess');
                  io.sockets.emit('system', nickname, users.length, 'login',users);
              };
              console.log(nickname + '进入了房间')
              console.log(users)
          });
      
          //断开连接的事件
          socket.on('disconnect', function() {
              //将断开连接的用户从users中删除
              users.splice(socket.userIndex, 1);
              //通知除自己以外的所有人
              socket.broadcast.emit('system', socket.nickname, users.length, 'logout',users);
              console.log(socket.nickname + '退出了房间')
              console.log(users)
          });
      
          //接收新消息
          socket.on('postMsg', function(msg) {
              //将消息发送到除自己外的所有用户
              socket.broadcast.emit('newMsg', socket.nickname, msg);
              console.log(socket.nickname+'说:'+ msg)
          });
      });
      

      启动服务就可以了。

      ?safari解析时间报错
      node操作mongoDB 入门?
      上一篇:safari解析时间报错
      下一篇:node操作mongoDB 入门
      评论

      如果我的文章对你有帮助,或许可以打赏一下呀!

      支付宝
      微信
      QQ