使用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);

四、效果图

五、源码下载

　　Nodejs多人聊天室

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

做完实验，感觉棒极了。技术创新的革命！！