nodejs（2）
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的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'):
新建文件夹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');
var socketIO = IO(server);
var roomInfo = {};
socketIO.on('connection', function (socket) {
var url = socket.request.headers.
var splited = url.split('/');
var roomID = splited[splited.length - 1];
var user = '';
socket.on('join', function (userName) {
user = userN
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);
router.get('/room/:roomID', function (req, res) {
var roomID = req.params.roomID;
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&
lang=&en&&
charset=&UTF-8&&
&{{roomID}}&
#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;
color: #c1bfbf;
padding-right: 5px;
padding-left: 5px;
font-size: 12px;
width: 490px;
padding: 0 5px 5px;
id=&userName&&& /&
房间: {{roomID}} /&
当前在线人数:
id=&count&&{{users.length}}& /&
id=&users&&{{users}}&
id=&msglog&&
name=&message& id=&messageInput&&&
按Enter键发送
id=&joinOrLeave&&退出房间&
src=&/socket.io/socket.io.js&&&
src=&/js/jquery.js&&&
$(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&' +
$('#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&');
$(this).text('退出房间');
socket.emit('join', userName);
新增&chatapp/public/index.html
&!DOCTYPE html&
lang=&en&&
charset=&UTF-8&&
欢迎您,骚年
&房间列表&
id=&room_1&& href=&/room/room_1& target=&_blank&&1号房间&&
id=&room_2&& href=&/room/room_2& target=&_blank&&2号房间&&
id=&room_3&& href=&/room/room_3& target=&_blank&&3号房间&&
id=&room_4&& href=&/room/room_4& target=&_blank&&4号房间&&
id=&room_5&& href=&/room/room_5& target=&_blank&&5号房间&&
id=&room_6&& href=&/room/room_6& target=&_blank&&6号房间&&
id=&room_7&& href=&/room/room_7& target=&_blank&&7号房间&&
id=&room_8&& href=&/room/room_8& target=&_blank&&8号房间&&
id=&room_9&& href=&/room/room_9& target=&_blank&&9号房间&&
id=&room_10&& href=&/room/room_10& target=&_blank&&10号房间&&
代码已放在github&
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：8641次
排名：千里之外
原创：68篇
转载：14篇}