node.js+socket.io 实现一个web聊天室
来源：互联网 发布：js实现div隐藏 编辑：程序博客网 时间：2024/05/16 00:28
在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 environmentsapp.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 onlyif ('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'));});
- node.js+socket.io 实现一个web聊天室
- 使用node.js和socket.io实现多人聊天室
- Node.js+Socket.IO实现的WebSocket群聊天室源码
- Node.js websocket 使用 socket.io库实现实时聊天室
- Node.js websocket 使用 socket.io库实现实时聊天室
- Node.js websocket 使用 socket.io库实现实时聊天室
- Node.Js+Redis+Socket.IO 实现 聊天室或推送消息
- node.js+socket.io+聊天室源码
- Node.js+socket.io在线聊天室
- Node.js+Socket.IO搭建聊天室
- socket.io & Node.js搭建多聊天室
- socket.io & Node.js搭建多聊天室
- 使用node.js + socket.io + redis实现基本的聊天室场景
- node.js实现即时聊天室，使用模块（express+socket.io），附源码
- Node.js+Express+Socket.IO搭建在线聊天室
- 使用Node.js+Socket.IO搭建WebSocket实时应用(聊天室)
- Node.js 基于socket.io聊天室的BUG解决经过
- 使用node.js + socket.io 构建多个房间聊天室
- 用win7开启无线wifi热点，其实very simple啦~
- memcached网络层操作详解
- 语言的世界
- Oracle中TO_DATE,TO_CHAR
- gridPanel 动态隐藏列
- node.js+socket.io 实现一个web聊天室
- Vim中关于 cscope 的帮助
- UVa729 The Hamming Distance Problem
- ios渲染性能
- JavaScript内置对象
- 新浪 Cell
- maven学习总结
- linux内核定时器的使用例子
- 锦智源出纳管理系统
