socket.io+express多房间聊天应用

roadtogeek 发布于2019-08-19 17:52 / 2549人阅读

摘要：简介是一个开源的库，它通过实现服务端，同时也提供客户端库。支持以事件为基础的实时双向通讯，它可以工作在任何平台浏览器或移动设备。

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

云服务器混合云 webrtc房间聊天服务器 socket.io webrtc房间聊天服务器原理 cdn socket.io

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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