多人聊天室包括单聊

相信上面的代码已经让你对socket.io的机制有所了解下面，开始真正的多人聊天室开发案例（部分）如果你socket基础不好，请看上一篇

功能

• 在线成员列表展示（实时的）
• 多人在线聊天
• 选择在线成员单聊

后端实现

var userList = []
io.on('connection', function (socket) {
  console.log('a user connected');

  //上线
  socket.on('login', (user) => {
    //user包括姓名，头像等，为了通知其他人也能看到
    user.id = socket.id //自动分配不重复的id
    userList.push(user)
    
    io.emit('userList', userList); //所有用户更新在线用户列表
    socket.broadcast.emit('loginInfo', user.name + '上线了') //除了该客户端，广播其它
    socket.emit('userInfo', user) //返回自己的信息
  });

  //单聊
  socket.on('toOne', {id, name, avatarUrl, toId, msg}) {
    // id 自身id，toId向谁发，msg内容
    var toSocket = io.sockets.sockets.findOne((sockets)=>{
      return sockets.id == toId
    })
    toSocket.emit('toOne', {id, name, avatarUrl, msg})
  }

  //群发
  socket.on('toAll', {id, name, avatarUrl, msg}) {
    toSocket.emit('toAll', {id, name, avatarUrl, msg})
  }



  //下线
  socket.on('outLogin', function ({id}) {
    return userIndex = userList.findIndex((user)=>{
      return user.id = id
    })
    userList.splice(userIndex, 1)
    //后续还是要关闭对于的socket
  });
});

前端实现 => js部分 + 思路

• 进入页面先登入，用户名，头像

$(function () {

  var groupMsgList = [];
  var userList = []

  var socket = io();
  //登入事件 => 向服务端说明在线
  $('login').click(()=>{
    socket.emit('login', {name, avatarUrl})
  })

  // 实时更新在线列表
  socket.on('userList', (userList)=>{
    // 接受到服务器的返回的单播
    //更新视图的userList
  })

  //其它用户上线了
  socket.on('loginInfo', ({id})=>{
    // 通知用户上线
  })

  socket.on('userInfo', ({id})=>{
    // 接受到服务器的返回的单播，包含id，用于日后的发送消息
  })

  //群聊发消息
  $('toAll').click(()=>{
    socket.emit('toAll', {id, name, avatarUrl, msg});
    
  })

  //单聊
  $('toOne').click(()=>{
    socket.emit('toOne', {id, name, avatarUrl, msg});
  })

  //页面卸载
  window.onunload(()=>{
    socket.emit('outLogin', {id});
  })
});

注意的几个点

• 用户群聊发消息，自己是不需要收到服务器广播，页面更新可以前端直接处理
• 用户点击在线其它成员头像进行单聊，创建一个新的弹窗进行交流，和数据列表数组。