var app = require('express')(); // 引入express模块
var http = require('http').Server(app);

app.get('/', function(req, res){ // 路由为localhost:3000时向客户端响应“hello world”
 res.send('
Hello world
'); // 发送数据
});

http.listen(3000, function(){ // 监听3000端口
 console.log('listening on *:3000'); 
}); 

#安装express模块
npm install --save express

var express = require('express');
var app = express();
var http = require('http').Server(app); 

// 路由为/默认www静态文件夹
app.use('/', express.static(__dirname + '/www'));

   
 
 
 
 
 
 
 
 

  

  
   
  确 定
  
  

  

   
   happy聊天室
  
  

   

    

    
     
 
     
     
     
     
 
      
 
      
      
 
      
     
     
     
     
     发送
     关闭
    
   
   

   
在线人员(0)
   

   
当前无人在线哟~
   
  
  
 
 
 
 

#安装socket.io模块
npm install --save socket.io

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);

app.use('/', express.static(__dirname + '/www'));

io.on('connection', function(socket){ // 用户连接时触发
 console.log('a user connected');
});

http.listen(3000, function(){
 console.log('listening on *:3000');
});

io.on('connection', (socket)=> {
 // 渲染在线人员
 io.emit('disUser', usersInfo);

 // 登录，检测用户名
 socket.on('login', (user)=> {
  if(users.indexOf(user.name) > -1) { // 昵称是否存在
   socket.emit('loginError'); // 触发客户端的登录失败事件
  } else {
   users.push(user.name); //储存用户的昵称
   usersInfo.push(user); // 储存用户的昵称和头像
   socket.emit('loginSuc'); // 触发客户端的登录成功事件
   socket.nickname = user.name;
   io.emit('system', { // 向所有用户广播该用户进入房间
    name: user.name,
    status: '进入'
   });
   io.emit('disUser', usersInfo); // 渲染右侧在线人员信息
   console.log(users.length + ' user connect.'); // 打印连接人数
  }
 });

io.emit(foo); //会触发所有客户端用户的foo事件
socket.emit(foo); //只触发当前客户端用户的foo事件
socket.broadcast.emit(foo); //触发除了当前客户端用户的其他用户的foo事件

$(function() {
  // io-client
  // 连接成功会触发服务器端的connection事件
  var socket = io();

  // 点击输入昵称
  $('#nameBtn').click(()=> { 
   var imgN = Math.floor(Math.random()*4)+1; // 随机分配头像
   if($('#name').val().trim()!=='')
     socket.emit('login', { // 触发服务器端登录事件
      name: $('#name').val(),
      img: 'image/user' + imgN + '.jpg'
     }); 
   return false; 
  });
  // 登录成功，隐藏登录层
  socket.on('loginSuc', ()=> { 
   $('.name').hide(); 
  })
  socket.on('loginError', ()=> {
   alert('用户名已存在，请重新输入！');
   $('#name').val('');
  }); 
});

// 系统提示消息
socket.on('system', (user)=> { 
 var data = new Date().toTimeString().substr(0, 8);
 $('#messages').append(`
${data}
${user.name} ${user.status}了聊天室
`);
 // 滚动条总是在最底部
 $('#messages').scrollTop($('#messages')[0].scrollHeight);
});

// chat-client.js
// 显示在线人员
socket.on('disUser', (usersInfo)=> {
 displayUser(usersInfo);
});
// 显示在线人员
function displayUser(users) {
 $('#users').text(''); // 每次都要重新渲染
 if(!users.length) {
  $('.contacts p').show();
 } else {
  $('.contacts p').hide();
 }
 $('#num').text(users.length);
 for(var i = 0; i 
   
   ${users[i].name}
  `;
  $('#users').append($html);
 }
}

 // server.js
  // 发送消息事件
  socket.on('sendMsg', (data)=> {
    var img = '';
    for(var i = 0; i 

// 点击按钮或回车键发送消息
  $('#sub').click(sendMsg);
  $('#m').keyup((ev)=> {
   if(ev.which == 13) {
    sendMsg();
   }
  });

  // 接收消息
  socket.on('receiveMsg', (obj)=> { // 将接收到的消息渲染到面板上
   $('#messages').append(` 
     

     
     

      ${obj.name}
      
${obj.msg}
     
    
   `);
   // 滚动条总是在最底部
   $('#messages').scrollTop($('#messages')[0].scrollHeight);
  });


  // 发送消息
  function sendMsg() { 
   if($('#m').val() == '') { // 输入消息为空
    alert('请输入内容！');
    return false;
   }
   socket.emit('sendMsg', {
    msg: $('#m').val()
   });
   $('#m').val(''); 
   return false; 
  }

// chat-client.js

  // 显示表情选择面板
  $('#smile').click(()=> {
   $('.selectBox').css('display', "block");
  });
  $('#smile').dblclick((ev)=> { 
   $('.selectBox').css('display', "none");
  }); 
  $('#m').click(()=> {
   $('.selectBox').css('display', "none");
  });

  // 用户点击发送表情
  $('.emoji li img').click((ev)=> {
    ev = ev || window.event;
    var src = ev.target.src;
    var emoji = src.replace(/\D*/g, '').substr(6, 8); // 提取序号
    var old = $('#m').val(); // 用户输入的其他内容
    $('#m').val(old+'[emoji'+emoji+']');
    $('.selectBox').css('display', "none");
  });

// chat-client.js

  // 接收消息
  socket.on('receiveMsg', (obj)=> { 
   // 提取文字中的表情加以渲染
   var msg = obj.msg;
   var cOntent= '';
   while(msg.indexOf('[') > -1) { // 其实更建议用正则将[]中的内容提取出来
    var start = msg.indexOf('[');
    var end = msg.indexOf(']');

    content += ''+msg.substr(0, start)+'';
    content += '';
    msg = msg.substr(end+1, msg.length);
   }
   content += ''+msg+'';
   
   $('#messages').append(`
    

     
     

      ${obj.name}
      
${content}
     
    
   `);
   // 滚动条总是在最底部
   $('#messages').scrollTop($('#messages')[0].scrollHeight);
  });

css：

.edit #file {
  width: 32.36px;
  height: 29px;
  opacity: 0;
  z-index: 5;
}
.edit #img {
  z-index: 0;
  margin-left: -43px;
}

// chat-client.js

  // 用户发送图片
  $('#file').change(function() {
   var file = this.files[0]; // 上传单张图片
   var reader = new FileReader();

   //文件读取出错的时候触发
   reader.Onerror= function(){
     console.log('读取文件失败，请重试！'); 
   };
   // 读取成功后
   reader.Onload= function() {
    var src = reader.result; // 读取结果
    var img = '';
    socket.emit('sendMsg', { // 发送
     msg: img,
     color: color,
     type: 'img' // 发送类型为img
    }); 
   };
   reader.readAsDataURL(file); // 读取为64位
  });

chat-client.js
  // 接收消息
  socket.on('receiveMsg', (obj)=> { 
   // 发送为图片
   if(obj.type == 'img') {
    $('#messages').append(`
     

      
      

       ${obj.name}
       
${obj.msg}
      
     
    `); 
    $('#messages').scrollTop($('#messages')[0].scrollHeight);
    return;
   }

   // 提取文字中的表情加以渲染
   // 下面不变
  });