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

浏览器版本：Chromium 12