文档章节

基于WebSocet简单聊天室(NodeJS + node-websocket-server)

lion_yang
 lion_yang
发布于 2011/08/28 00:22
字数 889
阅读 30593
收藏 32

最近在学习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的使用也非常简单,详细参见 :猛击

下面就开始贴代码了......

二、服务端实现

 功能简单描述:创建一个数组用来保存所有连接到服务器的链接,当收到一个来自客户端的消息后就把这条消息发送给其他客户端。

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

三、客户端实现

在收到消息的时候会响起经典的那句:您有新短消息,请注意查收 

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

四、运行效果

 websocket view

 

五、总结

上面的例子在chrome下测试开发,其他浏览器未进行测试~~。

有了websocket我们可以轻松的实现以前很难实现的功能。而nodejs也让人眼前一亮,前后台都用js的感觉相当的爽啊.真是非常喜欢nodejs,也推荐大家都试用一下,非常容易上手。

 

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

 =========================    华丽丽的分割线    ========================== 

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

 

最近有人反应按照我文章中的代码无法运行,特此我找到了虚拟机中的的一实例而且解了一下图:

下面在发一下代码截图:

 

最后说明一下运行环境:

操作系统:ArchLinux

NodeJs:v0.4.10 

浏览器版本:Chromium 12 

 

© 著作权归作者所有

lion_yang
粉丝 22
博文 13
码字总数 4040
作品 0
银川
程序员
私信 提问
加载中

评论(36)

alex.tong
alex.tong
大家不要由于啦,websocket-server兼容性的确存在问题,而且目前已经停止维护啦。
lion_yang
lion_yang 博主

引用来自“sorryvv”的评论

要实现这个,需要安装些什么哦???

这个文章中的代码现在不知道是否还可以使用,如果你现在要实现这样的功能推荐了解一下socket.io或者faye,当然node.js任然是其基础
sorryvv
sorryvv
要实现这个,需要安装些什么哦???
lion_yang
lion_yang 博主

引用来自“lfclive”的评论

node-websocket-server怎么下载啊,下载地址里面找不到下载的位置啊,能不能传上一个

这个文章很老了,现在推荐使用socket.io来实现聊天功能,会有意想不到的惊喜哦~~
lfclive
lfclive
node-websocket-server怎么下载啊,下载地址里面找不到下载的位置啊,能不能传上一个
lion_yang
lion_yang 博主

引用来自“施云”的评论

能把代码贴到github上吗?

这个东西太简单了,不好意思弄github上,抽空弄个完善的挂上去
candoudou
candoudou
能把代码贴到github上吗?
m
meigong568
这里的有实例,不错
http://www.biuman.com/?p=107
lion_yang
lion_yang 博主

引用来自“LiLarson”的评论

确定运行不了。我用的是 Ubuntu 12.04\chromium 12\Node.js 0.6.12

希望可以请教,我的QQ: 1326230900

不知道报什么错误?
L
LiLarson
确定运行不了。我用的是 Ubuntu 12.04\chromium 12\Node.js 0.6.12

希望可以请教,我的QQ: 1326230900
【求助】谁知道 node-websocket-server 框架怎么用,麻烦帮忙看一下

本人是名在校大三学生,刚接触nodejs不到一个星期,看了node入门 然后主要是想用nodejs结合websocket和WebGL搞一个小开发,正好在本站和其他地方都有许多讲nodejs与websocket结合的文章,其中在w...

冯焰
2012/02/04
1K
2
Node.js实现WebSocket聊天室的例子

对于聊天室,大家应该都不陌生,笔者也写过很多关于聊天室的例子。 本节,我们将演示如何通过Node.js来实现一个WebSocket聊天服务器的例子。 使用ws创建WebSokcet服务器 Node.js原生API并未提...

waylau
06/03
26
0
websocket与node.js的完美结合

本文为原创文章,出自http://cnodejs.org,转载请注明出处和作者 作者:kongwu 原文:http://cnodejs.org/blog/?p=273 之所以写下此文,是我觉得越是简单的技术往往能发挥越重要的作用,随着...

红薯
2011/03/20
10.1K
2
以中间件,路由,跨进程事件的姿势使用WebSocket--Node.js篇

上一篇文章介绍了在浏览器端以中间件,路由,跨进程事件的姿势使用原生WebSocket。这篇文章将介绍如何使用Node.js以相同的编程模式来实现WebSocket服务端。 Node.js中比较流行的两个WebSock...

若邪
2018/11/09
0
0
NODE.JS & HTML5 聊天室

最近学习了一下 HTML5 + node.js,一边学习一边做例子。 用 node.js 制作 Server 端,提供 http & webSocket 服务,其中 webSocket 使用的是 socket.io 前台采用的是 静态的html 页面,用 ht...

zTree
2012/08/14
2.9K
2

没有更多内容

加载失败,请刷新页面

加载更多

CSS--属性

一、溢出 当内容多,元素区域小的时候,就会产生溢出效果,默认是纵向溢出 横向溢出:在内容和容器之间再套一层容器,并且内部容器要比外部容器宽 属性:overflow/overflow-x/overflow-y 取值...

wytao1995
38分钟前
4
0
Confluence 6.15 使用附件宏

希望添加附件宏到一个页面中: 从编辑工具栏中,选择 插入(Insert) > 其他宏(Other Macros) 找到并且选择需要的宏。 可用使用自动完成加快这个过程:输入 { 然后开始输入你希望插入的宏的...

honeymoose
58分钟前
4
0
精华帖

第一章 jQuery简介 jQuery是一个JavaScript库 jQuery具备简洁的语法和跨平台的兼容性 简化了JavaScript的操作。 在页面中引入jQuery jQuery是一个JavaScript脚本库,不需要特别的安装,只需要...

流川偑
今天
6
0
语音对话英语翻译在线翻译成中文哪个方法好用

想要进行将中文翻译成英文,或者将英文翻译成中文的操作,其实有一个非常简单的工具就能够帮助完成将语音进行翻译转换的软件。 在应用市场或者百度手机助手等各大应用渠道里面就能够找到一款...

401恶户
今天
3
0
jenkins 插件下载加速最终方案

推荐做法 1、告诉jenkins 我哪些插件需要更新 jenkins插件清华大学镜像地址 https://mirrors.tuna.tsinghua.edu.cn/jenkins/updates/update-center.json 1.进入jenkins系统管理 2.进入插件管...

vasks
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部