socket.io+express多房間聊天應用

roadtogeek 發布于2019-08-19 17:52 / 2698人閱讀

摘要：簡介是一個開源的庫，它通過實現服務端，同時也提供客戶端庫。支持以事件為基礎的實時雙向通訊，它可以工作在任何平臺瀏覽器或移動設備。

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




  
  {{roomID}}
  


  昵稱:  

  房間: {{roomID}} 

  當前在線人數: {{users.length}} 

  在線用戶:  {{users}}

  

  
  
  

  按Enter鍵發送

新增 chatapp/public/index.html




  
  demo


  歡迎您,騷年

  
    房間列表
    
      1號房間
      2號房間
      3號房間
      4號房間
      5號房間
      6號房間
      7號房間
      8號房間
      9號房間
      10號房間

運行效果

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

參考：

http://socket.io/docs/rooms-and-namespaces/
http://blog.fens.me/nodejs-socketio-chat/
http://www.jianshu.com/p/d9b1273a93fd

GPU云服務器云服務器 webrtc房間聊天服務器 socket.io webrtc房間聊天服務器原理 cdn socket.io

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/78919.html

vue+socket.io+express+mongodb 實現簡易多房間在線群聊

摘要：項目簡介主要是通過做一個多人在線多房間群聊的小項目來練手全棧技術的結合運用。編譯運行開啟服務，新建命令行窗口啟動服務端，新建命令行窗口啟動前端頁面然后在瀏覽器多個窗口打開，注冊不同賬號并登錄即可進行多用戶多房間在線聊天。項目簡介主要是通過做一個多人在線多房間群聊的小項目、來練手全棧技術的結合運用。項目源碼：chat-vue-node 主要技術： vue2全家桶 + socket....

android_c 2019-06-26 17:25 評論0 收藏0
基于express和socket.io的簡易版聊天室

摘要：簡易版聊天室技術棧功能實現實時聊天創建房間表情包完善私聊效果登錄服務端判斷之前是否登錄過聊天室，如果是則直接進入聊天室，否則跳轉到登錄頁面。客戶端發送創建房間和切換房間的事件給服務端。 Chat 簡易版聊天室技術棧 express socket.io 功能實現實時聊天創建房間表情包完善私聊效果登錄 showImg(https://segmentfa...

dendoink 2019-08-20 19:07 評論0 收藏0
前言項目開始是因為工作需要一個聊天室功能，但是因為某些原因最終選用的是基于xmpp協議的Strophe.js寫的。于是就想用node自己寫一套，本來只是想簡單的寫個聊天頁面，但是寫完了又不滿意，所以不斷的重構（似乎可以理解產品經理為什么老是改需求了?乛?乛?）。很多東西，比如mongodb，我也是第一次用，以前只接觸過mysql。所以都是一邊學一邊寫，利用工作之余的時間，斷斷續續的寫了幾個月（...

PAMPANG 2019-06-26 17:57 評論0 收藏0
前言項目開始是因為工作需要一個聊天室功能，但是因為某些原因最終選用的是基于xmpp協議的Strophe.js寫的。于是就想用node自己寫一套，本來只是想簡單的寫個聊天頁面，但是寫完了又不滿意，所以不斷的重構（似乎可以理解產品經理為什么老是改需求了?乛?乛?）。很多東西，比如mongodb，我也是第一次用，以前只接觸過mysql。所以都是一邊學一邊寫，利用工作之余的時間，斷斷續續的寫了幾個月（...

fireflow 2019-08-23 14:38 評論0 收藏0
vue2.0開發聊天程序(六) 服務端的webScoket

大吉大利，今晚吃雞！　　　　　　　　　　　　　　　　　　　- PUBG 時隔多日，終于再次拾起這個拖了很久的項目。并不是因為沒時間，也不是因為這個項目對于我來說有多困難，就是一個字————懶。此項目的后臺，當然是選擇node.js來實現。作為一個前端，node.js比起java、php簡單多了。 node支持的webSocket 在npm中有很多支持webSocket的模塊，包括socket.io...

hiyayiji 2019-08-22 11:06 評論0 收藏0