基于WebSocet简单聊天室(NodeJS + node-websocket-server)

原创
2011/08/28 00:22
阅读数 3.2W

最近在学习HTML5相关的东西,看到WebSocket是个很强大的技术,于是乎就小试了一下,做了个简单的聊天室。

WebSocket的原理就不多介绍了,如果想自己实现WebSocket服务器的话具体协议看这里:猛击   (不知道各位看官能不能看下去,反正我是没有看!)

一、运行环境

    1、服务端:前个阶段看到OSChina上介绍NodeJS,感觉是个很不错的东东,前后台都用js应该是个很不错的感觉吧,哈哈:P。既然要用到WebSocket,当然要看看如何让NodeJS支持WebSocket了。经过搜索发现 node-websocket-server 是NodeJS的一个WebSocket实现,安装好 node-websocket-server 我们就可以开工了。不过我安装 node-websocket-server的时候可是费了点周折,为其他童鞋少走弯路我这里就简单说一下吧:

    Linux下安装比较简单,首先安装NPM,命令(curl http://npmjs.org/install.sh | sh);安装完NPM后进入你的项目开发目录然后执行npm install websocket-server即可安装node-websocket-server。

    Windows下由于无法安装NPM(除非使用cygwin......这样岂不太麻烦?),而且不知道nodejs模块的目录结构,所以没有办法自己又在Arch用NPM方式安装了一遍。安装后发现其目录结构如下:在项目目录下生成一个node_modules目录,打开node_modules可以看到有个websocket-server目录.......是不是按照这样的目录结构在Windows下也可以呢?于是乎果断到Windows中试验,下载websocket-server插件(地址),解压后按照上面的目录放置后启动nodejs,果然可以 ;-)。node-websocket-server的使用也非常简单,详细参见 :猛击

下面就开始贴代码了......

二、服务端实现

 功能简单描述:创建一个数组用来保存所有连接到服务器的链接,当收到一个来自客户端的消息后就把这条消息发送给其他客户端。

var conns = new Array();

var ws = require('websocket-server');

var server = ws.createServer();

server.addListener('connection', function(conn){
	console.log('connection....');
	
	conns.push(conn);
	
	conn.addListener('message',function(msg){
	
		console.log(msg);
		
		for(var i=0; i<conns.length; i++){
			if(conns[i]!=conn){
				conns[i].send(msg);
			}
		}
	});
});

server.listen(8080);
console.log('running......');

三、客户端实现

在收到消息的时候会响起经典的那句:您有新短消息,请注意查收 

<html>
<head>
<script type="text/javascript">
var host = '127.0.0.1';
var port = 8080;
var url = 'ws://'+host+':'+port+'/';

var w = new WebSocket(url);

var audioElement = document.createElement('audio');
audioElement.setAttribute('src', 'qqmsg.mp3');

w.onopen = function(){
	$('chat-box').innerHTML = '已连接到服务器......<br/>';
}

w.onmessage = function(e){
	var msg = e.data;
	var chatBox = $('chat-box');
	
	audioElement.play();	
	chatBox.innerHTML = chatBox.innerHTML+msg+'<br/>';
}

function send(){
	var talk = $('talk');
	var nike = $('nike');
	
	w.send('<strong style="color:red">'+nike.value+':</strong>'+talk.value);
}
function $(id){
	return document.getElementById(id);
}
</script>
</head>

<body>
<div id="chat-box" style="bordddder:1px solid #cccccc; width:400px; height:400px; overflow:scroll;"></div>
昵称:<input type="text" id="nike"/><br/>
内容:<input type="text" id="talk"/><input type="button" id="send" onClick="send();" value="发送"/>
</body>
</html>

四、运行效果

 websocket view

 

五、总结

上面的例子在chrome下测试开发,其他浏览器未进行测试~~。

有了websocket我们可以轻松的实现以前很难实现的功能。而nodejs也让人眼前一亮,前后台都用js的感觉相当的爽啊.真是非常喜欢nodejs,也推荐大家都试用一下,非常容易上手。

 

 =================================================================

 =========================    华丽丽的分割线    ========================== 

 =================================================================

 

最近有人反应按照我文章中的代码无法运行,特此我找到了虚拟机中的的一实例而且解了一下图:

下面在发一下代码截图:

 

最后说明一下运行环境:

操作系统:ArchLinux

NodeJs:v0.4.10 

浏览器版本:Chromium 12 

 

展开阅读全文
打赏
2
32 收藏
分享
加载中
大家不要由于啦,websocket-server兼容性的确存在问题,而且目前已经停止维护啦。
2014/03/21 11:43
回复
举报
lion_yang博主

引用来自“sorryvv”的评论

要实现这个,需要安装些什么哦???

这个文章中的代码现在不知道是否还可以使用,如果你现在要实现这样的功能推荐了解一下socket.io或者faye,当然node.js任然是其基础
2014/03/15 07:57
回复
举报
要实现这个,需要安装些什么哦???
2014/03/14 10:59
回复
举报
lion_yang博主

引用来自“lfclive”的评论

node-websocket-server怎么下载啊,下载地址里面找不到下载的位置啊,能不能传上一个

这个文章很老了,现在推荐使用socket.io来实现聊天功能,会有意想不到的惊喜哦~~
2013/06/13 11:15
回复
举报
node-websocket-server怎么下载啊,下载地址里面找不到下载的位置啊,能不能传上一个
2013/06/11 11:07
回复
举报
lion_yang博主

引用来自“施云”的评论

能把代码贴到github上吗?

这个东西太简单了,不好意思弄github上,抽空弄个完善的挂上去
2013/04/12 11:46
回复
举报
能把代码贴到github上吗?
2013/04/11 22:17
回复
举报
这里的有实例,不错
http://www.biuman.com/?p=107
2013/01/28 17:42
回复
举报
lion_yang博主

引用来自“LiLarson”的评论

确定运行不了。我用的是 Ubuntu 12.04\chromium 12\Node.js 0.6.12

希望可以请教,我的QQ: 1326230900

不知道报什么错误?
2012/09/22 16:16
回复
举报
该评论暂时无法显示,详情咨询 QQ 群:912889742
更多评论
打赏
36 评论
32 收藏
2
分享
返回顶部
顶部