基於express和socket.io的簡易版聊天室

Chat

簡易版聊天室

技術棧

1. express
2. socket.io

功能

1. 實現

   • 實時聊天
   • 建立房間
   • 表情包

2. 完善

   • 私聊

效果

登陸

服務端判斷以前是否登陸過聊天室，若是是則直接進入聊天室，不然跳轉到登陸頁面。

app.get('/', function (req, res, next) {
  if (req.cookies.name) {
    router.showIndex(req, res, next);
  } else {
    res.redirect('/login');
  }
});

聊天

客戶端發送消息，並接收服務端發來的消息

// 發送消息
$('.send_btn').click(sendMsg)

function sendMsg () {
  // 判斷消息消息是否爲空
  let content = info.text().trim();
  if (!content) {
    alert('請輸入內容')
    return;
  }

  // 發送消息後清空文本
  info.text('').focus();
  socket.emit('send msg', content);

  // 將本身發送的消息添加到消息列表當中
  let li_info = $('<li class="info mine_info"></li>');
  let span_time = $(`<span class="info_time mine_info_time">${getTime()}</span>`)
  let p_user = $('<p class="info_user mine_info_user"></p>').text($.cookie('name')).prepend(span_time);
  let p_content = $('<p class="info_content mine_info_content"></p>').text(content);

  li_info.append(p_user).append(p_content);
  msg.append(li_info);
}

// 監聽來自同一房間發來的消息
socket.on('send msg', function (info) {
  // 將發送過來的消息添加到消息列表中
  let li_info = $('<li class="info"></li>');
  let span_time = $(`<span class="info_time others_info_time">${info.time}</span>`)
  let p_user = $('<p class="info_user others_info_user"></p>').text(info.name).append(span_time);
  let p_content = $('<p class="info_content others_info_content"></p>').text(info.content);

  li_info.append(p_user).append(p_content);
  msg.append(li_info);
})

服務端監聽客戶端發來的消息，並將接受到的消息轉發給同一房間中的客戶端

socket.on('send msg', function (content) {
  // 發送消息給同一房間的客戶端
  socket.to(socket.room).emit('send msg', {
    name: socket.user,
    content: content,
    time: common.getTime()
  })
})

建立房間

建立房間能夠分爲兩步：用戶建立房間，用戶切換至新的房間。

客戶端發送建立房間和切換房間的事件給服務端。

// 添加房間
addRoom.click(function () {
  // 對房間的判斷之類省略...

  if (roomLen > 0 && !exist) {
    socket.emit('add room', room);
    socket.emit('change room', room);
  }
})

// 刷新用戶列表
socket.on('refresh users', function (usersName) {
  users.empty();
  for (let userName of usersName) {
    let li = $('<li></li>').text(userName);
    if (userName == $.cookie('name')) {
      li.addClass('me')
    }
    users.append(li)
  }
})

// 刷新房間列表
socket.on('refresh rooms', function ({rooms, active}) {
  roomsList.empty();
  for (let room of Object.keys(rooms)) {
    let li_room = $(`<li data-room="${room}"></li>`);
    let span_room = $('<span class="room"></span>').text(room)
    let span_num = $(`<span class="usersNum">${rooms[room].length}人</span>`);
    if (room == active) {
      li_room.addClass('active_room');
    }
    
    li_room.append(span_room).append(span_num);
    roomsList.append(li_room);
  }
  // 更改標題的名稱
  now.text(active);
})

服務端增長、切換房間，發送刷新房間列表、用戶列表的事件給客戶端

// 增長房間
socket.on('add room', function (room) {
  rooms[room] = [];
})

// 切換房間
socket.on('change room', function (to) {
  // 記錄用戶離開的房間
  let from = socket.room;
  common.removeItem(rooms[from], socket.user);

  // 將用戶傳送到新的房間
  rooms[to].push(socket.user);
  socket.room = to;
  
  // 發送刷新用戶列表的消息
  for (let i in users) {
    users[i].emit('refresh rooms', {
      rooms: rooms,
      active: users[i].room
    })
  }

  // 離開和加入新的房間
  socket.leaveAll();
  socket.join(socket.room);

  // 通知離開的房間刷新用戶列表
  socket.to(from)
    .emit('refresh users', rooms[from]);

  // 通知進入的房間刷新用戶列表
  io.to(socket.room)
    .emit('refresh users', rooms[socket.room]);
})

具體請看源碼，謝謝!

最後

貼出來主要但願能吸取建議。點擊查看源碼