基於WebSocet簡單聊天室（NodeJS + node-websocket-server）__Web

  基於WebSocet簡單聊天室（NodeJS + node-websocket-server） 3人收藏此文章， 收藏此文章 發表於24天前 , 已有 135次閱讀 共 2個評論 3人收藏此文章

最近在學習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的使用也非常簡單，詳細參見 ：猛擊

下面就開始貼代碼了......

二、服務端實現

 功能簡單描述：建立一個數組用來儲存所有串連到伺服器的連結，當收到一個來自用戶端的訊息後就把這條訊息發送給其他用戶端。 view source print ?

01	var conns = new Array();

02

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

04

05	var server = ws.createServer();

06

07	server.addListener('connection', function(conn){

08	console.log('connection....');

09

10	conns.push(conn);

11

12	conn.addListener('message',function(msg){

13

14	console.log(msg);

15

16	for(var i=0; i<conns.length; i++){

17	if(conns[i]!=conn){

18	conns[i].send(msg);

19

}

20

}

21

});

22

});

23

24	server.listen(8080);

25	console.log('running......');

三、用戶端實現

在收到訊息的時候會響起經典的那句：您有新短訊息，請注意查收 

view source print ?

01

<html>

02

<head>

03	<script type="text/javascript">

04	var host = '127.0.0.1';

05	var port = 8080;

06	var url = 'ws://'+host+':'+port+'/';

07

08	var w = new WebSocket(url);

09

10	var audioElement = document.createElement('audio');

11	audioElement.setAttribute('src', 'qqmsg.mp3');

12

13	w.onopen = function(){

14	$('chat-box').innerHTML = '已串連到伺服器......<br/>';

15

}

16

17	w.onmessage = function(e){

18	var msg = e.data;

19	var chatBox = $('chat-box');

20

21	audioElement.play();

22	chatBox.innerHTML = chatBox.innerHTML+msg+'<br/>';

23

}

24

25	function send(){

26	var talk = $('talk');

27	var nike = $('nike');

28

29	w.send('<strong style="color:red">'+nike.value+':</strong>'+talk.value);

30

}

31	function $(id){

32	return document.getElementById(id);

33

}

34

</script>

35

</head>

36

37

<body>

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="發送"/>

41

</body>

42

</html>

四、運行效果

 

 

五、總結

上面的例子在chrome下測試開發，其他瀏覽器未進行測試~~。

有了websocket我們可以輕鬆的實現以前很難實現的功能。而nodejs也讓人眼前一亮，前後台都用js的感覺相當的爽啊.真是非常喜歡nodejs，也推薦大家都試用一下，非常容易上手。