最近在学习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的使用也非常简单,详细参见 :猛击
下面就开始贴代码了......
二、服务端实现
功能简单描述:创建一个数组用来保存所有连接到服务器的链接,当收到一个来自客户端的消息后就把这条消息发送给其他客户端。
01 |
var
conns = new
Array(); |
03 |
var
ws = require( 'websocket-server' );
|
05 |
var
server = ws.createServer(); |
07 |
server.addListener( 'connection' ,
function (conn){
|
08 |
console.log( 'connection....' );
|
12 |
conn.addListener( 'message' , function (msg){
|
16 |
for ( var
i=0; i<conns.length; i++){ |
25 |
console.log( 'running......' ); |
三、客户端实现
在收到消息的时候会响起经典的那句:您有新短消息,请注意查收
03 |
< script
type = "text/javascript" >
|
04 |
var host = '127.0.0.1'; |
06 |
var url = 'ws://'+host+':'+port+'/';
|
08 |
var w = new WebSocket(url); |
10 |
var audioElement = document.createElement('audio');
|
11 |
audioElement.setAttribute('src', 'qqmsg.mp3');
|
13 |
w.onopen = function(){ |
14 |
$('chat-box').innerHTML = '已连接到服务器......< br />';
|
17 |
w.onmessage = function(e){ |
19 |
var chatBox = $('chat-box');
|
22 |
chatBox.innerHTML = chatBox.innerHTML+msg+'< br />';
|
29 |
w.send('< strong
style = "color:red" >'+nike.value+':</ strong >'+talk.value);
|
32 |
return document.getElementById(id);
|
38 |
< div
id = "chat-box"
style = "bordddder:1px solid #cccccc; width:400px; height:400px; overflow:scroll;" ></ div >
|
39 |
暱称:< input
type = "text"
id = "nike" />< br />
|
40 |
内容:< input
type = "text"
id = "talk" />< input
type = "button"
id = "send"
onClick = "send();"
value = "发送" />
|
四、运行效果
五、总结
上面的例子在chrome下测试开发,其他浏览器未进行测试~~。
有了websocket我们可以轻松的实现以前很难实现的功能。而nodejs也让人眼前一亮,前后台都用js的感觉相当的爽啊.真是非常喜欢nodejs,也推荐大家都试用一下,非常容易上手。