websocket以及nodejs联手打造的类qq群聊天室 教程 附 原代码
这次给大家分享的是我自己开发的多人聊天室，利用websocket 以及服务器端使用node.js 来让用户不需要刷新浏览器就可以获得实时更新。
如下面图所示的样子。开发出类QQ群聊天室的主界面，当然UI还是有点难看。。。
使用的技术要点罗列：nodejs 安装与使用 websocket 客户端以及nodejs 服务器端的 API接口调用 js,jq 的用法 包括设置cookie date函数使用，html5 本地存储方式 local storage 的使用方法 以及表情的选择与发送这几个方面。现在跟我一起来完成它吧。
第一步，先了解下 websocket 是什么，为什么在线聊天室 需要这样的方式来进行，而传统的http模式有什么弊端。可以参考下百度百科中的websocket定义http://baike.baidu.com/link?url=UdkmadppMSP7B0LpZU1VUhCXW0kKii1oRZ8o-Pn77IHs_3KyCp70FKethp3TBNpsSuSC6fZw3hMlV7_ZZ20BZ_。当然现在如日中天的node.js已经完全封装好了websocket API的所有内容 ，当然大家可以去http://www.open-open.com/lib/view/open1402479198587.html看看websocket 是怎么定义的，websocket协议与平常http 协议有什么不一样。现在把这块内容稍微消化下，我们就可以开始动手开始实现吧。
安装node.js 。大家还是可以去看这篇http://www.open-open.com/lib/view/open1402479198587.html ，
根据自己的操作系统，去Node.js官网下载安装即可。如果成功安装。在命令行输入node -v和npm -v应该能看到相应的版本号。
当出来以上信息时候，说明你的node.js已经安装成功了！
搭建自己的websocket 服务器。 接下来使用npm命令安装express和socket.io
安装成功后，会在该文件夹下生成了一个名为node_modules的文件夹，里面分别是express和socket.io相关的文件集，再这里新建个服务器的代码 server.js
就可以开始编写服务端的代码了。
server.js 最开始的代码
var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
app.get('/',function(req,res){
res.send('Welcome Realtime Server
');
});
http.listen(3000,function(){
console.log('listening on *:3000');
});
出现该截图内容 就说明websocket服务器已成功 运行了，你也可以打开浏览器 ，输入localhost:3000来看看3000端口上运行的websocket服务器是否启动
接下来，就可以开始着手前端的准备工作（包括界面图片样式等等的） 一开始 我是抱着学习的心态 使用了http://www.oschina.net/code/snippet_230665_21329这里面的UI设计，大家也可以使用。好，我们先要运行起来，完成用户登录完 就能在后台收到信息的功能
var my_websocket = io.connect('ws://localhost:3000');
//js获取当前时间
var NowDateTime = getNowFormatDate();
console.log(my_websocket);
my_websocket.on('connect',function()
{
my_websocket.emit("login",tourist);
my_websocket.on('login_message',function(message)
{
//刚进聊天室时候在聊天框显示某某进入聊天室
console.log(message);
//每次登陆先删除右边栏所有的用户
$("#userck").siblings().remove();
scrollWindow()
var self_content = "["+NowDateTime+"]";
self_content += " "+message.user_now+"来到了聊天室：
";
content_div.append(self_content);
//在右侧观众栏添加刚登陆的游客
var ParentTourist = $("#autors");
for (i in message.user_array)
{
var SonTourist = ""+message.user_array[i]+"";
ParentTourist.append(SonTourist);
}
var touristCount = "所有人－共 "+message.user_count+" 人";
$("#userck").text(touristCount);
});当然后台也要加上获取客户端发送消息的代码
var userArr = new Array();
var userCount = 0;
io.on('connection',function(socket)
{
console.log('a user connected');
socket.on('login',function(obj)
{
//判断是否是新用户登录 indexOf是js 判断数组是否包含一个元素的函数 大于0表示包含 －1表示不包含
if(userArr.indexOf(obj) == '-1')
{
userArr.push(obj);
userCount ++;
}
var login_message =
{
user_array : userArr,
user_count : userCount,
user_now : obj
}
console.log(login_message);
//将所有用户登录的信息发给所有用户
io.sockets.emit('login_message',login_message);
});
my_websocket.emit("login",tourist);
然后服务器端接收到单个客户端推送的信息时 ，他需要推送给所有在线的用户 所以需要使用
io.sockets.emit('login_message',login_message); my_websocket.on('message',function(msg)
{
//在聊天框添加聊天的记录
sendTime = msg.send_time;
username = msg.username;
tourist_message = replace_em(msg.content);
console.log(msg);
if(getcookie("tourist") == username)
{
var self_content = "";
self_content += "![](\"arclist/online_chat_face.jpg\")
";
self_content += "";
self_content += ""+username+"
";
self_content += ""+tourist_message+"";
self_content += "
";
self_content += "";
/*
var self_content = "["+sendTime+"]";
self_content += " "+username+"说：";
self_content += tourist_message+"
";
*/
}else
这样就说明传输成功了 ，当然到界面上就会有如下显示
当然完成这一步的时候。你就已经成功了一大半了，接下来就是不断调试，尝试着用虚拟机跟你对话吧，就像开头的截图一样。。。
附上源码链接 https://github.com/taweisuode/online_chat 大家可以去下载，我也会不定期去更新完善里面的内容。
好了。当大家把所有登录。发送消息。退出时候的消息都能够实时发送，并且右侧状态栏也能够实时显示在线人数以及在线人姓名时。我们就要对其进行完善以及优化了
可以添加以下内容 1. 按enter键发送消息；2.将一些用户信息存储在local storage 中；然后根据失效时间 是否删除所有的local Storage数据 ，这样可以判断你的上次登录时间；
3.当聊天内容多余div的高度时，我们需要使用滚动轴，源代码有简单使聊天框都在滚动轴最下方的代码；4.可以使用表情来发送；5.可以使用类QQ群聊天的气泡对话模式；
当然这些都放在源码中 。大家也可以去https://github.com/taweisuode/online_chat 下载。
大概就说这么多了，这是小弟我第一次发表博客，不足之处希望大家能够批评指正。如有不懂的问题。可以随时请教。我的联系方式[email protected]
以下贴出我的客户端 以及服务器端的源码。
客户端的代码
socket
鹏哥聊天室
请交流吧：
服务器端 的源码：
var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
app.get('/',function(req,res){
res.send('Welcome Realtime Server
');
});
var userArr = new Array();
var userCount = 0;
io.on('connection',function(socket)
{
console.log('a user connected');
socket.on('login',function(obj)
{
//判断是否是新用户登录 indexOf是js 判断数组是否包含一个元素的函数 大于0表示包含 －1表示不包含
if(userArr.indexOf(obj) == '-1')
{
userArr.push(obj);
userCount ++;
}
var login_message =
{
user_array : userArr,
user_count : userCount,
user_now : obj
}
console.log(login_message);
//将所有用户登录的信息发给所有用户
io.sockets.emit('login_message',login_message);
});
socket.on('message',function(msg)
{
console.log('接收到',msg);
io.sockets.emit('message',msg);
});
socket.on('logout',function(obj)
{
console.log(obj+'已退出');
//判断是否是新用户登录 indexOf是js 判断数组是否包含一个元素的函数 大于0表示包含 －1表示不包含
if(userArr.indexOf(obj) >= '0')
{
for(var i= 0;i