使用node.js和socket.io实现多人聊天室
2015年01月24日 03:24:54 远古大猛犸 阅读数:2775
转自:
http://www.cnblogs.com/flyoung2008/archive/2012/07/19/2600132.html
http://blog.fens.me/nodejs-socketio-chat/
一、基本功能
1、用户随意输入一个昵称即可登录
2、登录成功后
1) 对正在登录用户来说,罗列所有在线用户列表,罗列最近的历史聊天记录
2) 对已登录的用户来说,通知有新用户进入房间,更新在线用户列表
3、退出登录
1)支持直接退出
2) 当有用户退出,其他所有在线用户会收到信息,通知又用户退出房间,同时更新在线用户列表
4、聊天
1) 聊天就是广播,把信息广播给所有连接在线的用户
5、一些出错处理
1) 暂时简单处理了系统逻辑错误、网络出错等特殊情况的出错提示
问题:功能不完善,有bug(退出后,新用户重新登录,还是原来的用户) 。抽空完善吧
二、技术介绍
socket.io(官网:http://socket.io/)是一个跨平台,多种连接方式自动切换,做即时通讯方面的开发很方便,而且能和expressjs提供的传统请求方式很好的结合,即可以在同一个域名,同一个端口提供两种连接方式:request/response, websocket(flashsocket,ajax…)。
这篇文章对socket.io的使用做了详细介绍:http://www.cnblogs.com/dxy1982/archive/2012/01/30/2328020.html
《用node.js和Websocket做个多人聊天室吧》http://www.html5china.com/HTML5features/WebSocket/20111206_3096.html
三、注意事项
(1)客户端这样引用socket.io.js:
<script src="/socket.io/socket.io.js"></script>
可能会加载失败(我在这里耗了不少时间)
可以改为:
<script src="http://ip:port/socket.io/socket.io.js"></script>
(对应服务器的ip地址和端口号,比如说localhost和80端口)
(2)实现广播的时候,参考官网的写法,竟然不起作用,如:
var io = require('socket.io').listen(80); io.sockets.on('connection', function (socket) { socket.broadcast.emit('user connected'); socket.broadcast.json.send({ a: 'message' }); });
后来看了这个:http://stackoverflow.com/questions/7352164/update-all-clients-using-socket-io
改为以下才起作用:
io.sockets.emit('users_count', clients);
四、效果图
五、源码下载
ps:
1、在命令行运行
node main.js
然后在浏览器中打开index.html,如果浏览器(ff、Chrome)不支持,请升级到支持WebSocket的版本.
2、推荐node.js的IDE WebStorm
=============================================================================================================================
前言
网络聊天室在web1.0的时代就出现了,但当时技术支持比较有限,大都是通过浏览器插件BHO,JavaApplet,Flash实现的。如今HTML5技术风起云涌,通过websocket实现的网络聊天室,被定义为websocket的第一个实验,就像Hello World一样的简单。
今天我也动手完成了这个实验,感觉真的很爽!
目录
- socket.io介绍
- 服务器端和客户端通信设计
- 服务器端实现
- 客户端实现
- 完整案例代码
1. socket.io介绍
socket.io一个是基于Nodejs架构体系的,支持websocket的协议用于时时通信的一个软件包。socket.io 给跨浏览器构建实时应用提供了完整的封装,socket.io完全由javascript实现。
基于Nodejs实现webscoket其他的框架,请参考文章:Nodejs实现websocket的4种方式
2. 服务器端和客户端通信设计
上图中client1 和 server 描述通信过程,client2描述对其他的客户端,通过广播进行消息通信。
- client1向server发起连接请求
- server接受client的连接
- client1输入登陆用户名
- server返回欢迎语
- server通过广播告诉其他在线的用户,client1已登陆
- client1发送聊天信息
- server返回聊天信息(可省略)
- server通过广播告诉其他在线的用户,client1的聊天消息
- client1关闭连接,退出登陆
- server通过广播告诉其他在线的用户,client1已退出
- 左边: aaa 登陆
- 右边: bbb 登陆
- 左边: aaa 收到 bbb登陆欢迎消息
- aaa 和 bbb 实现对话
- 右边: bbb 刷新浏览自动退出
- 左边: aaa 收到 bbb的退出消息
- 右边: CCC 登陆
- 左边: aaa 收到 CCC 登陆欢迎消息
- aaa 和 CCC 实现对话
3. 服务器端实现
我们这里使用socket.io和express3的混合模式,让HTTP请求和WebSocket请求都使用3000端口。
服务器端实现,只有一个核心文件app.js。
-
//引入程序包
-
var express = require('express')
-
, path = require('path')
-
, app = express()
-
, server = require('http').createServer(app)
-
, io = require('socket.io').listen(server);
-
//设置日志级别
-
io.set('log level', 1);
-
//WebSocket连接监听
-
io.on('connection', function (socket) {
-
socket.emit('open');//通知客户端已连接
-
// 打印握手信息
-
// console.log(socket.handshake);
-
// 构造客户端对象
-
var client = {
-
socket:socket,
-
name:false,
-
color:getColor()
-
}
-
// 对message事件的监听
-
socket.on('message', function(msg){
-
var obj = {time:getTime(),color:client.color};
-
// 判断是不是第一次连接,以第一条消息作为用户名
-
if(!client.name){
-
client.name = msg;
-
obj['text']=client.name;
-
obj['author']='System';
-
obj['type']='welcome';
-
console.log(client.name + ' login');
-
//返回欢迎语
-
socket.emit('system',obj);
-
//广播新用户已登陆
-
socket.broadcast.emit('system',obj);
-
}else{
-
//如果不是第一次的连接,正常的聊天消息
-
obj['text']=msg;
-
obj['author']=client.name;
-
obj['type']='message';
-
console.log(client.name + ' say: ' + msg);
-
// 返回消息(可以省略)
-
socket.emit('message',obj);
-
// 广播向其他用户发消息
-
socket.broadcast.emit('message',obj);
-
}
-
});
-
//监听出退事件
-
socket.on('disconnect', function () {
-
var obj = {
-
time:getTime(),
-
color:client.color,
-
author:'System',
-
text:client.name,
-
type:'disconnect'
-
};
-
// 广播用户已退出
-
socket.broadcast.emit('system',obj);
-
console.log(client.name + 'Disconnect');
-
});
-
});
-
//express基本配置
-
app.configure(function(){
-
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.methodOverride());
-
app.use(app.router);
-
app.use(express.static(path.join(__dirname, 'public')));
-
});
-
app.configure('development', function(){
-
app.use(express.errorHandler());
-
});
-
// 指定webscoket的客户端的html文件
-
app.get('/', function(req, res){
-
res.sendfile('views/chat.html');
-
});
-
server.listen(app.get('port'), function(){
-
console.log("Express server listening on port " + app.get('port'));
-
});
-
var getTime=function(){
-
var date = new Date();
-
return date.getHours()+":"+date.getMinutes()+":"+date.getSeconds();
-
}
-
var getColor=function(){
-
var colors = ['aliceblue','antiquewhite','aqua','aquamarine','pink','red','green',
-
'orange','blue','blueviolet','brown','burlywood','cadetblue'];
-
return colors[Math.round(Math.random() * 10000 % colors.length)];
-
}
4. 客户端实现
这里我们需要定义几个文件:chat.html, chat.js, jquery.min.js, main.css
1). views/chat.html
-
<!DOCTYPE html>
-
<html>
-
<head>
-
<meta charset="utf-8">
-
<title>Socket.io - Simple chat</title>
-
<link rel="stylesheet" type="text/css" href="css/main.css">
-
<script src="javascripts/jquery.min.js"></script>
-
<script src="/socket.io/socket.io.js"></script>
-
<script src="javascripts/chat.js"></script>
-
</head>
-
<body>
-
<h1>Socket.io - Simple chat room</h1>
-
<div>
-
<span id="status">Connecting...</span>
-
<input type="text" id="input"/>
-
</div>
-
<div id="content"></div>
-
</body>
-
</html>
2). public/javascript/chat.js
-
$(function () {
-
var content = $('#content');
-
var status = $('#status');
-
var input = $('#input');
-
var myName = false;
-
//建立websocket连接
-
socket = io.connect('http://localhost:3000');
-
//收到server的连接确认
-
socket.on('open',function(){
-
status.text('Choose a name:');
-
});
-
//监听system事件,判断welcome或者disconnect,打印系统消息信息
-
socket.on('system',function(json){
-
var p = '';
-
if (json.type === 'welcome'){
-
if(myName==json.text) status.text(myName + ': ').css('color', json.color);
-
p = '<p style="background:'+json.color+'">system @ '+ json.time+ ' : Welcome ' + json.text +'</p>';
-
}else if(json.type == 'disconnect'){
-
p = '<p style="background:'+json.color+'">system @ '+ json.time+ ' : Bye ' + json.text +'</p>';
-
}
-
content.prepend(p);
-
});
-
//监听message事件,打印消息信息
-
socket.on('message',function(json){
-
var p = '<p><span style="color:'+json.color+';">' + json.author+'</span> @ '+ json.time+ ' : '+json.text+'</p>';
-
content.prepend(p);
-
});
-
//通过“回车”提交聊天信息
-
input.keydown(function(e) {
-
if (e.keyCode === 13) {
-
var msg = $(this).val();
-
if (!msg) return;
-
socket.send(msg);
-
$(this).val('');
-
if (myName === false) {
-
myName = msg;
-
}
-
}
-
});
-
});
3). public/javascript/jquery.min.js
从jquery官方下载: http://jquery.com/
4). public/css/main.css
-
* {padding:0px; margin:0px;}
-
body{font-family:tahoma; font-size:12px;margin:10px;}
-
p {line-height:18px;padding:2px;}
-
div {width:500px;}
-
#content {
-
padding:5px;
-
background:#ddd;
-
border-radius:5px;
-
border:1px solid #CCC;
-
margin-top:10px;
-
}
-
#input {
-
border-radius:2px;
-
border:1px solid #ccc;
-
margin-top:10px;
-
padding:5px;
-
width:380px;
-
}
-
#status {
-
width:100px;
-
display:block;
-
float:left;
-
margin-top:15px;
-
}
5. 完整案例代码
项目已经上传到github: https://github.com/bsspirit/chat-websocket
下载,安装,启动服务器
-
git clone https://github.com/bsspirit/chat-websocket.git
-
npm install
-
node app.js
打开浏览器
可以多打开几个窗口,模拟不同用户有的对话。
http://localhost:3000
做完实验,感觉棒极了。技术创新的革命!!