最近在學習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="發送"/>
|
四、運行效果
![websocket view]( "websocket view")
五、總結
上面的例子在chrome下測試開發，其他瀏覽器未進行測試~~。
有了websocket我們可以輕鬆的實現以前很難實現的功能。而nodejs也讓人眼前一亮，前後臺都用js的感覺相當的爽啊.真是非常喜歡nodejs，也推薦大家都試用一下，非常容易上手。
