socket.io+express多房間聊天應(yīng)用

roadtogeek 發(fā)布于2019-08-19 17:52 / 2701人閱讀

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

socket.io簡(jiǎn)介

Socket.IO是一個(gè)開(kāi)源的WebSocket庫(kù)，它通過(guò)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ù)瀏覽器選擇適合的通訊方式，從而讓開(kāi)發(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ù)(見(jiàn)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




  
  {{roomID}}
  


  昵稱:  

  房間: {{roomID}} 

  當(dāng)前在線人數(shù): {{users.length}} 

  在線用戶:  {{users}}

  

  
  
  

  按Enter鍵發(fā)送

新增 chatapp/public/index.html




  
  demo


  歡迎您,騷年

  
    房間列表
    
      1號(hào)房間
      2號(hào)房間
      3號(hào)房間
      4號(hào)房間
      5號(hào)房間
      6號(hào)房間
      7號(hào)房間
      8號(hào)房間
      9號(hào)房間
      10號(hào)房間