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

時間 2019-11-10

標籤基於 websocet 簡單聊天室 nodejs node websocket server 简体版

原文原文鏈接

最近在學習HTML5相關的東西，看到WebSocket是個很強大的技術，因而乎就小試了一下，作了個簡單的聊天室。javascript

WebSocket的原理就很少介紹了，若是想本身實現WebSocket服務器的話具體協議看這裏：猛擊（不知道各位看官能不能看下去，反正我是沒有看！）html

1、運行環境java

一、服務端：前個階段看到OSChina上介紹NodeJS，感受是個很不錯的東東，先後臺都用js應該是個很不錯的感受吧，哈哈:P。既然要用到WebSocket，固然要看看如何讓NodeJS支持WebSocket了。通過搜索發現 node-websocket-server 是NodeJS的一個WebSocket實現，安裝好 node-websocket-server 咱們就能夠開工了。不過我安裝 node-websocket-server的時候但是費了點周折，爲其餘童鞋少走彎路我這裏就簡單說一下吧：node

Linux下安裝比較簡單，首先安裝NPM，命令（curl http://npmjs.org/install.sh | sh）；安裝完NPM後進入你的項目開發目錄而後執行npm install websocket-server便可安裝node-websocket-server。git

Windows下因爲沒法安裝NPM（除非使用cygwin......這樣豈不太麻煩？），並且不知道nodejs模塊的目錄結構，因此沒有辦法本身又在Arch用NPM方式安裝了一遍。安裝後發現其目錄結構以下：在項目目錄下生成一個node_modules目錄，打開node_modules能夠看到有個websocket-server目錄.......是否是按照這樣的目錄結構在Windows下也能夠呢？因而乎果斷到Windows中試驗，下載websocket-server插件（地址），解壓後按照上面的目錄放置後啓動nodejs，果真能夠 ;-)。node-websocket-server的使用也很是簡單，詳細參見：猛擊github

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

2、服務端實現chrome

功能簡單描述：建立一個數組用來保存全部鏈接到服務器的連接，當收到一個來自客戶端的消息後就把這條消息發送給其餘客戶端。npm

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......');

3、客戶端實現數組

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

<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>

4、運行效果

5、總結

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

有了websocket咱們能夠輕鬆的實現之前很難實現的功能。而nodejs也讓人眼前一亮，先後臺都用js的感受至關的爽啊.真是很是喜歡nodejs，也推薦你們都試用一下，很是容易上手。

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

========================= 華麗麗的分割線 ==========================

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

最近有人反應按照我文章中的代碼沒法運行，特此我找到了虛擬機中的的一實例並且解了一下圖：

下面在發一下代碼截圖：

最後說明一下運行環境：

操做系統：ArchLinux

NodeJs：v0.4.10