在cnode中看到一篇应用socket.io实现web聊天室的帖子,非常不错,然后就按照博主的教程去实现了一个web聊天室。
聊天室教程文档链接如下。
主要用到了socket.io的emit和on事件。
主要包括两个文件,即客户端的chat.js和服务器端的app.js.
chat.js的代码如下:主要包括了
socket.emit("online", {user: from})
socket.on("online", function(data){})
socket.on('say', function(data){})
socket.on('offline', function(data){})
socket.on('disconnect', function(data){})
$(function(){ var socket = io.connect(); var from = $.cookie('user'); var to = 'all'; socket.emit("online", {user: from}); socket.on("online", function(data){ if(data.user != from){ var sys = '<div style="color:#f00">系统(' + now() + '): 用户 ' + data.user + ' 进入了聊天室</div>'; } else { var sys = '<div style="color:#fff">系统(' + now() + '): 你进入了聊天室</div>'; } $('#contents').append(sys); flushUsers(data.users); showSayTo(); }); socket.on('say', function(data){ if(data.to == "all"){ $('#contents').append('<div>' + data.from + '(' + now() + ')对所有人说:<br/>' + data.msg + '</div><br/>'); } else if(data.to == from) { $('#contents').append('<div style="color:#00f">' + data.from + '( ' + now() + ')对你说:<br/> ' + data.msg + '</div><br/>'); } }); socket.on('offline', function(data){ var sys = '<div style="color:#f00">系统(' + now() + '): 用户' + data.user + '下线了!</div><br/>'; $('#contents').append(sys); flushUsers(data.users); if(data.user == to){ to = "all"; } showSayTo(); }); socket.on('disconnect', function(){ var sys = '<div style="color:#f00">系统连接服务器失败</div><br/>'; $('#contents').append(sys); $('#lists').empty(); }); socket.on('reconnect', function(){ var sys = '<div style="color:#f00">系统服务器重新启动</div><br/>'; $('#contents').append(sys); socket.emit("online", {user:from}); }) function flushUsers(users){ $('#list').empty().append('<li title="双击聊天" alt="all" class="sayingto" onselectstart="return false">所有人</li>'); for(var i in users){ $('#list').append('<li alt="' + users[i] + '" title="双击聊天" onselectstart="return false">' + users[i] + '</li>'); } $('#list > li').dblclick(function(){ if($(this).attr("alt") != from){ to = $(this).attr("alt"); $('#list > li').removeClass("sayingto"); $(this).addClass("sayingto"); showSayTo(); } }) }; function showSayTo(){ $('#from').html(from); $('#to').html(to == 'all'? "所有人": to); } function now(){ var date = new Date(); var time = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + ' ' + date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds(); return time; } $('#say').click(function(){ var $msg = $('#input_content').html(); if($msg == "") return; if(to == "all"){ $('#contents').append('<div>你(' + now() + ') 对所有人说:<br/>' + $msg + '</div><br/>'); } else { $('#contents').append('<div>你(' + now() + ') 对' + to + ' 说:<br/>' + $msg + '</div><br/>'); } socket.emit('say', {from: from, to:to, msg: $msg}); $('#input_content').empty().focus(); }) })
app.js内容如下:
/** * Module dependencies. */ var express = require('express') , routes = require('./routes') , user = require('./routes/user') , http = require('http') , path = require('path'); var app = express(); // all environments app.set('port', process.env.PORT || 3000); app.set('views', __dirname + '/views'); app.use(express.favicon()); app.use(express.logger('dev')); app.use(express.bodyParser()); app.use(express.cookieParser()); app.use(express.methodOverride()); app.use(app.router); app.use(express.static(path.join(__dirname, 'public'))); // development only if ('development' == app.get('env')) { app.use(express.errorHandler()); } var server = http.createServer(app); var io = require('socket.io').listen(server); var users = []; app.get('/', function(req, res){ if(req.cookies.user == null){ return res.redirect('/signin'); } res.sendfile('views/index.html'); }) app.get('/signin', function(req, res){ res.sendfile('views/signin.html'); }) app.post('/signin', function(req, res){ if(users.indexOf(req.body.name) != -1){ res.redirect('/signin'); } else { res.cookie("user", req.body.name, {maxAge: 1000*60*60*24*30}); res.redirect('/'); } }) io.sockets.on('connection', function(socket){ socket.on('online', function(data){ socket.name = data.user; if(users.indexOf(data.user) == -1){ users.unshift(data.user); } io.sockets.emit('online', {user: data.user, users:users}); }); socket.on('say', function(data){ if(data.to == "all"){ socket.broadcast.emit('say', data); } else { var clients = io.sockets.clients(); clients.forEach(function(client){ if(client.name == data.to){ client.emit('say', data); } }) } }); socket.on('disconnect', function(){ if(users.indexOf(socket.name) != -1){ users.splice(users.indexOf(socket.name), 1); socket.broadcast.emit('offline', {user:socket.name, users:users}); } }) }); server.listen(app.get('port'), function(){ console.log('Express server listening on port ' + app.get('port')); });