基于WebSocet简单聊天室(NodeJS + node-websocket-server)
2011-08-28 00:22
911 查看
最近在学习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的使用也非常简单,详细参见 :猛击
下面就开始贴代码了......
二、服务端实现
功能简单描述:创建一个数组用来保存所有连接到服务器的链接,当收到一个来自客户端的消息后就把这条消息发送给其他客户端。
三、客户端实现
在收到消息的时候会响起经典的那句:您有新短消息,请注意查收
四、运行效果
五、总结
上面的例子在chrome下测试开发,其他浏览器未进行测试~~。
有了websocket我们可以轻松的实现以前很难实现的功能。而nodejs也让人眼前一亮,前后台都用js的感觉相当的爽啊.真是非常喜欢nodejs,也推荐大家都试用一下,非常容易上手。
=================================================================
========================= 华丽丽的分割线 ==========================
=================================================================
最近有人反应按照我文章中的代码无法运行,特此我找到了虚拟机中的的一实例而且解了一下图:
下面在发一下代码截图:
最后说明一下运行环境:
操作系统:ArchLinux
NodeJs:v0.4.10
浏览器版本:Chromium 12
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>
四、运行效果
五、总结
上面的例子在chrome下测试开发,其他浏览器未进行测试~~。
有了websocket我们可以轻松的实现以前很难实现的功能。而nodejs也让人眼前一亮,前后台都用js的感觉相当的爽啊.真是非常喜欢nodejs,也推荐大家都试用一下,非常容易上手。
=================================================================
========================= 华丽丽的分割线 ==========================
=================================================================
最近有人反应按照我文章中的代码无法运行,特此我找到了虚拟机中的的一实例而且解了一下图:
下面在发一下代码截图:
最后说明一下运行环境:
操作系统:ArchLinux
NodeJs:v0.4.10
浏览器版本:Chromium 12
相关文章推荐
- 基于WebSocet简单聊天室(NodeJS + node-websocket-server)
- 基于node的websocket学习笔记二:一个简单的聊天室程序与优化方案
- (NodeJS学习文章收集三) node.js基于express框架搭建一个简单的注册登录Web功能
- 基于Server-Sent Event的简单聊天室 Web 2.0时代,即时通信已经成为必不可少的网站功能,那实现Web即时通信的机制有哪些呢?在这门项目课中我们将一一介绍。最后我们将会实现一个基于Server-Sent Event和Flask简单的在线聊天室。
- 基于websocket,使用node.js 做一个聊天室
- node.js基于express框架搭建一个简单的注册登录Web功能
- 基于Node.js+socket.IO创建的Web聊天室
- 基于Server-Sent Event的简单聊天室 Web 2.0时代,即时通信已经成为必不可少的网站功能,那实现Web即时通信的机制有哪些呢?在这门项目课中我们将一一介绍。最后我们将会实现一个基于Server-Sent Event和Flask简单的在线聊天室。
- 基于Node.js,Express,Socket.io创建简单聊天室
- HTML+CSS+JS+node.js实现websocket聊天室
- websocket聊天室,简单版本,基于swoole
- [Docker] Build a Simple Node.js Web Server with Docker
- 【最简单】Electron 怎么将网页打包成桌面应用(web前端页面怎么生成exe可执行文件) 标签: 跨平台node.js桌面应用electronelectron-packager 2017-04-
- Build Node.Js web server in Docker containers: nodejs+pm2+mongodb+redis
- 【深入浅出Node.js系列八】一个基于Node.js完整的Web应用实战
- node.js基于express使用websocket的方法
- 基于Server-Sent Event的简单在线聊天室
- 基于OSGi的Virgo Server最简单Spring web实例
- 【转载】Node.js + WebSocket 实现的简易聊天室
- HTML5 WebSocket(Client) + JavaWeb(Server)实现简单的聊天室功能