基于socket.io+express实现多房间聊天

前端技术 2023/09/01 JavaScript

socket.io简介

Socket.IO是一个开源的WebSocket库，它通过Node.js实现WebSocket服务端，同时也提供客户端JS库。Socket.IO支持以事件为基础的实时双向通讯，它可以工作在任何平台、浏览器或移动设备。

Socket.IO支持4种协议：WebSocket、htmlfile、xhr-polling、jsonp-polling，它会自动根据浏览器选择适合的通讯方式，从而让开发者可以聚焦到功能的实现而不是平台的兼容性，同时Socket.IO具有不错的稳定性和性能。

多房间聊天

socket.io提供rooms和namespace的API

用rooms的API就可以实现多房间聊天了，总结出来无外乎就是：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\"
}

执行 npm install

服务端代码

增加文件 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\');

// 创建socket服务
var socketIO = IO(server);
// 房间用户名单
var roomInfo = {};

socketIO.on(\'connection\', function (socket) {
 // 获取请求建立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);  // 加入房间
  // 通知房间内人员
  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);
 });

 // 接收用户消息,发送相应的房间
 socket.on(\'message\', function (msg) {
  // 验证如果用户不在房间内则不给发送
  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;

 // 渲染页面数据(见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/>
 当前在线人数: <span id=\"count\">{{users.length}}</span> <br/>
 在线用户: <div id=\"users\">{{users}}</div>

 <div id=\"msglog\">

 </div>
 <textarea name=\"message\" id=\"messageInput\"></textarea>
 <br/>
 按Enter键发送
 <button id=\"joinOrLeave\">退出房间</button>

 <script src=\"/socket.io/socket.io.js\"></script>
 <script src=\"/js/jquery.js\"></script>
 <script>
  $(function () {
   // ----------设置昵称-------------
   var userName = \'\';
   while ($(\'#userName\').text().trim() === \'\') {
    userName = prompt(\"请设置你的昵称\",\"\");
    $(\'#userName\').text(userName);
   }


   // ---------创建连接-----------
   var socket = io();

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

   // 监听消息
   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);
    // 滚动条保持最下方
    $(\'#msglog\').scrollTop($(\'#msglog\')[0].scrollHeight); 
   });

   // 监听系统消息
   socket.on(\'sys\', function (sysMsg, users) {
    var message = \'<div class=\"sysMsg\">\' + sysMsg + \'</div>\';
    $(\'#msglog\').append(message);

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

   // 发送消息
   $(\'#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(\'进入房间\');
     socket.emit(\'leave\');
     var msg = \'你已经退出了房间,重新发言请点击\"进入房间\"\';
     $(\'#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号房间</a></li>
   <li id=\"room_2\"><a href=\"/room/room_2\" target=\"_blank\">2号房间</a></li>
   <li id=\"room_3\"><a href=\"/room/room_3\" target=\"_blank\">3号房间</a></li>
   <li id=\"room_4\"><a href=\"/room/room_4\" target=\"_blank\">4号房间</a></li>
   <li id=\"room_5\"><a href=\"/room/room_5\" target=\"_blank\">5号房间</a></li>
   <li id=\"room_6\"><a href=\"/room/room_6\" target=\"_blank\">6号房间</a></li>
   <li id=\"room_7\"><a href=\"/room/room_7\" target=\"_blank\">7号房间</a></li>
   <li id=\"room_8\"><a href=\"/room/room_8\" target=\"_blank\">8号房间</a></li>
   <li id=\"room_9\"><a href=\"/room/room_9\" target=\"_blank\">9号房间</a></li>
   <li id=\"room_10\"><a href=\"/room/room_10\" target=\"_blank\">10号房间</a></li>
  </ul>
 </div>

</body>
</html>

运行效果

代码已放在github https://github.com/wuyanxin/chatapp-demo.git

本文地址：https://www.stayed.cn/item/1234

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案