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

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

时间: 2016-03-14

使用Angular和Nodejs、socket.io搭建聊天室及多人聊天室

一,利用Node搭建静态服务器 这个是这个项目的底层支撑部分.用来支持静态资源文件像html, css, gif, jpg, png, javascript, json, plain text等等静态资源的访问.这里面是有一个mime类型的文件映射. mime.js /** * mime类型的 map * @ author Cheng Liufeng * @ date 2014/8/30 * 当请求静态服务器文件的类型 html, css, gif, jpg, png, javascript,

socket.io实现在线群聊功能

我自己在用socket.io开发,对官方网站上的文档,进行简单的整理,然后自己写了一个简单的聊天程序.最最开始 先安装socket.io: npm install socket.io 利用Node的搭建Http服务 分为两个文件,服务端文件app.js和客户端index.html app.js var app = require('http').createServer(handler) io = require('socket.io').listen(app) fs = require('fs

基于Nodejs利用socket.io实现多人聊天室

socket.io简介 在Html5中存在着这样的一个新特性,引入了websocket,关于websocket的内部实现原理可以看这篇文章,这篇文章讲述了websocket无到有,根据协议,分析数据帧的头,进行构建websocket.虽然代码短,但可以很好地体现websocket的原理. ,这个特性提供了浏览器端和服务器端的基于TCP连接的双向通道.但是并不是所有的浏览器都支持websocket特性,故为了磨平浏览器间的差异,为开发者提供统一的接口,引入了socket.io模块.在不支持webs

vue + socket.io实现一个简易聊天室示例代码

vue + vuex + elementUi + socket.io实现一个简易的在线聊天室,提高自己在对vue系列在项目中应用的深度.因为学会一个库或者框架容易,但要结合项目使用一个库或框架就不是那么容易了.功能虽然不多,但还是有收获.设计和实现思路较为拙劣,恳请各位道友指正. 可以达到的需求 能查看在线用户列表 能发送和接受消息 使用到的框架和库 socket.io做为实时通讯基础 vuex/vue:客户端Ui层使用 Element-ui:客户端Ui组件 类文件关系图 服务端: 客户端: 服

Node.js websocket使用socket.io库实现实时聊天室

认识websocket WebSocket protocol 是HTML5一种新的协议.它实现了浏览器与服务器全双工通信(full-duple).一开始的握手需要借助HTTP请求完成. 其实websocket 并不是很依赖Http协议,它也拥有自己的一套协议机制,但在这里我们需要利用的socket.io 需要依赖到http . 之前用java jsp写过一个聊天,其实实现逻辑并不难,只是大部分时间都用在UI的设计上,其实现原理就是一个基于websocket的通信,要想做一个好的聊天室,我觉得大部

node.js中使用socket.io制作命名空间

如果开发者想在一个特定的应用程序中完全控制消息与事件的发送,只需要使用一个默认的"/"命名空间就足够了.但是如果开发者需要将应用程序作为第三方服务提供给其他应用程序,则需要为一个用于与客户端连接的socket端口定义一个独立的命名空间. io.of(namespace) 制作两个命名空间 chat和news然后在客户端相互发送信息. 复制代码 代码如下: var express=require("express"); var http=require("h

Node.js中使用socket创建私聊和公聊聊天室

先给大家展示效果图: 在上篇文章给大家介绍使用Angular和Nodejs.socket.io搭建聊天室及多人聊天室,本文继续介绍Node.js中使用socket创建私聊和公聊聊天室,具体详情请看下文吧. nodejs的应用中,关于socket应该是比较出彩的了,socket.io在github上有几万人的star,它的成功应该是不输于express的,为了方便了解整个socket.io的使用. 例子请点击http://chat.lovewebgames.com/ 源码下载https://git

node.js中使用socket.io的方法

使用socket.io的使用创建一个socket.io服务器即可.但是该服务器依赖于一个已经创建的http服务器. 在http服务器运行之后,使用listen方法为该http服务器附加一个socket.io服务器. 复制代码 代码如下: var sio=require("scoket.io"); var socket=sio.listen(server); socket就是在server基础上创建的一个socket.io服务器. 当客户端与服务器端建立连接时,触发socket.io服务

node.js中的socket.io入门实例

关于websocket等反向ajax技术介绍 在实时web应用中,常见的方法是反向Ajax.反向Ajax的定义: 反向Ajax(Reverse Ajax)本质上则是这样的一种概念:能够从服务器端向客户端发送数据.在一个标准的HTTP Ajax请求中,数据是发送给服务器端的,反向Ajax可以某些特定的方式来模拟发出一个Ajax请求,这些方式本文都会论及,这样的话,服务器就可以尽可能快地向客户端发送事件(低延迟通信). 反向Ajax技术主要有两点内容:一是服务器端保持住TCP连接直到其有数据发送给客

node.js中的Socket.IO使用实例

1. 简介 首先是Socket.IO的官方网站:http://socket.io 官网非常简洁,甚至没有API文档,只有一个简单的"How to use"可以参考.因为Socket.IO就跟官网一样简洁好用易上手. 那么Socket.IO到底是什么呢?Socket.IO是一个WebSocket库,包括了客户端的js和服务器端的nodejs,它的目标是构建可以在不同浏览器和移动设备上使用的实时应用.它会自动根据浏览器从WebSocket.AJAX长轮询.Iframe流等等各种方式中选择最

node.js中的socket.io的广播消息

在多个客户端与服务器端建立连接后,socket.io()服务器具有一个sockets属性,属性值为所有与客户端建立连接的socket对象.可以利用该对象的send方法或emit方法向所有客户端广播消息. io.sockets.send("user commected); io.socket.emit("login",names); 案例 server.js代码: 复制代码 代码如下: var express=require("express"); var

使用socket.io制做简易WEB聊天室

使用socket.io做一个简单的WEB聊天室,可消息私发,供大家参考,具体内容如下 1. 创建一个空的工程目录 空的目录命名为chat-web 2. 创建package.json 使用命令:npm init,会引导你设置package.json的内容. 3.安装依赖包 使用命令: npm install --save express npm install --save socket.io 安装完成后你会在工程目录看见有自动生成的node_modules文件夹 4.编写index.js脚本 v