基于socket.io+express實(shí)現(xiàn)多房間聊天

更新時(shí)間：2016年03月17日 08:49:32 投稿：hebedich

本文給大家分享的是使用node.js，基于socket.io+express實(shí)現(xiàn)多房間聊天的代碼，非常的實(shí)用，有需要的小伙伴可以來(lái)參考下

socket.io簡(jiǎn)介

Socket.IO是一個(gè)開源的WebSocket庫(kù)，它通過Node.js實(shí)現(xiàn)WebSocket服務(wù)端，同時(shí)也提供客戶端JS庫(kù)。Socket.IO支持以事件為基礎(chǔ)的實(shí)時(shí)雙向通訊，它可以工作在任何平臺(tái)、瀏覽器或移動(dòng)設(shè)備。

Socket.IO支持4種協(xié)議：WebSocket、htmlfile、xhr-polling、jsonp-polling，它會(huì)自動(dòng)根據(jù)瀏覽器選擇適合的通訊方式，從而讓開發(fā)者可以聚焦到功能的實(shí)現(xiàn)而不是平臺(tái)的兼容性，同時(shí)Socket.IO具有不錯(cuò)的穩(wěn)定性和性能。

多房間聊天

socket.io提供rooms和namespace的API

用rooms的API就可以實(shí)現(xiàn)多房間聊天了，總結(jié)出來(lái)無(wú)外乎就是：join/leave room 和 say to room

// join和leave
io.on('connection', function(socket){
 socket.join('some room');
 // socket.leave('some room');
});

// say to room
io.to('some room').emit('some event'):
io.in('some room').emit('some event'):

代碼 github
新建文件夾chatapp-demo
chatapp-demo/package.json

{
 "name": "chatapp-demo",
 "version": "1.0.0",
 "description": "multi room chat app demo, powered by socket.io",
 "main": "app.js",
 "dependencies": {
  "express": "^4.13.3",
  "hbs": "^3.1.0",
  "path": "^0.11.14",
  "socket.io": "^1.3.6"
 },
 "devDependencies": {},
 "author": "wuyanxin",
 "license": "ISC"
}

執(zhí)行 npm install

服務(wù)端代碼

增加文件 chatapp-demo/app.js

var express = require('express');
var path = require('path');
var IO = require('socket.io');
var router = express.Router();

var app = express();
var server = require('http').Server(app);
app.use(express.static(path.join(__dirname, 'public')));
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'hbs');

// 創(chuàng)建socket服務(wù)
var socketIO = IO(server);
// 房間用戶名單
var roomInfo = {};

socketIO.on('connection', function (socket) {
 // 獲取請(qǐng)求建立socket連接的url
 // 如: http://localhost:3000/room/room_1, roomID為room_1
 var url = socket.request.headers.referer;
 var splited = url.split('/');
 var roomID = splited[splited.length - 1];  // 獲取房間ID
 var user = '';

 socket.on('join', function (userName) {
  user = userName;

  // 將用戶昵稱加入房間名單中
  if (!roomInfo[roomID]) {
   roomInfo[roomID] = [];
  }
  roomInfo[roomID].push(user);

  socket.join(roomID);  // 加入房間
  // 通知房間內(nèi)人員
  socketIO.to(roomID).emit('sys', user + '加入了房間', roomInfo[roomID]); 
  console.log(user + '加入了' + roomID);
 });

 socket.on('leave', function () {
  socket.emit('disconnect');
 });

 socket.on('disconnect', function () {
  // 從房間名單中移除
  var index = roomInfo[roomID].indexOf(user);
  if (index !== -1) {
   roomInfo[roomID].splice(index, 1);
  }

  socket.leave(roomID);  // 退出房間
  socketIO.to(roomID).emit('sys', user + '退出了房間', roomInfo[roomID]);
  console.log(user + '退出了' + roomID);
 });

 // 接收用戶消息,發(fā)送相應(yīng)的房間
 socket.on('message', function (msg) {
  // 驗(yàn)證如果用戶不在房間內(nèi)則不給發(fā)送
  if (roomInfo[roomID].indexOf(user) === -1) { 
   return false;
  }
  socketIO.to(roomID).emit('msg', user, msg);
 });

});

// room page
router.get('/room/:roomID', function (req, res) {
 var roomID = req.params.roomID;

 // 渲染頁(yè)面數(shù)據(jù)(見views/room.hbs)
 res.render('room', {
  roomID: roomID,
  users: roomInfo[roomID]
 });
});

app.use('/', router);

server.listen(3000, function () {
 console.log('server listening on port 3000');
});

客戶端代碼

新增chatapp/views/room.hbs

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title>{{roomID}}</title>
 <style>
  #msglog, #messageInput {
   border: 1px solid #ccc;
   width: 500px;
   height: 350px;
   overflow-y: auto;
   font-size: 14px;
  }
  #messageInput {
   height: 80px;
  }
  .message {
   line-height: 22px;
  }
  .message .user {
   padding-right: 5px;
   padding-left: 5px;
   color: brown;
  }
  .sysMsg {
   color: #c1bfbf;
   padding-right: 5px;
   padding-left: 5px;
   font-size: 12px;
  }
  #users {
   width: 490px;
   padding: 0 5px 5px;
  }
 </style>
</head>
<body>
 昵稱: <span id="userName"></span> <br/>
 房間: {{roomID}} <br/>
 當(dāng)前在線人數(shù): <span id="count">{{users.length}}</span> <br/>
 在線用戶: <div id="users">{{users}}</div>

 <div id="msglog">

 </div>
 <textarea name="message" id="messageInput"></textarea>
 <br/>
 按Enter鍵發(fā)送
 <button id="joinOrLeave">退出房間</button>

 <script src="/socket.io/socket.io.js"></script>
 <script src="/js/jquery.js"></script>
 <script>
  $(function () {
   // ----------設(shè)置昵稱-------------
   var userName = '';
   while ($('#userName').text().trim() === '') {
    userName = prompt("請(qǐng)?jiān)O(shè)置你的昵稱","");
    $('#userName').text(userName);
   }


   // ---------創(chuàng)建連接-----------
   var socket = io();

   // 加入房間
   socket.on('connect', function () {
    socket.emit('join', userName);
   });

   // 監(jiān)聽消息
   socket.on('msg', function (userName, msg) {
    var message = '' +
      '<div class="message">' +
      ' <span class="user">' + userName + ': </span>' +
      ' <span class="msg">' + msg + '</span>' +
      '</div>';
    $('#msglog').append(message);
    // 滾動(dòng)條保持最下方
    $('#msglog').scrollTop($('#msglog')[0].scrollHeight); 
   });

   // 監(jiān)聽系統(tǒng)消息
   socket.on('sys', function (sysMsg, users) {
    var message = '<div class="sysMsg">' + sysMsg + '</div>';
    $('#msglog').append(message);

    $('#count').text(users.length);
    $('#users').text(users);
   });

   // 發(fā)送消息
   $('#messageInput').keydown(function (e) {
    if (e.which === 13) {
     e.preventDefault();
     var msg = $(this).val();
     $(this).val('');

     socket.send(msg);
    }
   });

   // 退出房間
   $('#joinOrLeave').click(function () {
    if ($(this).text() === '退出房間') {
     $(this).text('進(jìn)入房間');
     socket.emit('leave');
     var msg = '你已經(jīng)退出了房間,重新發(fā)言請(qǐng)點(diǎn)擊"進(jìn)入房間"';
     $('#msglog').append('<div class="sysMsg">'+msg+'</div>');
    } else {
     $(this).text('退出房間');
     socket.emit('join', userName);
    }

   });
  });
 </script>
</body>
</html>

新增 chatapp/public/index.html

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title>demo</title>
</head>
<body>
 歡迎您,騷年

 <div>
  <p>房間列表</p>
  <ul>
   <li id="room_1"><a href="/room/room_1" target="_blank">1號(hào)房間</a></li>
   <li id="room_2"><a href="/room/room_2" target="_blank">2號(hào)房間</a></li>
   <li id="room_3"><a href="/room/room_3" target="_blank">3號(hào)房間</a></li>
   <li id="room_4"><a href="/room/room_4" target="_blank">4號(hào)房間</a></li>
   <li id="room_5"><a href="/room/room_5" target="_blank">5號(hào)房間</a></li>
   <li id="room_6"><a href="/room/room_6" target="_blank">6號(hào)房間</a></li>
   <li id="room_7"><a href="/room/room_7" target="_blank">7號(hào)房間</a></li>
   <li id="room_8"><a href="/room/room_8" target="_blank">8號(hào)房間</a></li>
   <li id="room_9"><a href="/room/room_9" target="_blank">9號(hào)房間</a></li>
   <li id="room_10"><a href="/room/room_10" target="_blank">10號(hào)房間</a></li>
  </ul>
 </div>

</body>
</html>

運(yùn)行效果