WebSocket是HTML5的新特性,也是HTML5中最强大的通信功能,利用HTML5 WebSocket我们可以开发出基于浏览器的客户端应用。
HTML5 WebSocket不仅仅是对常规的HTTP通信的增强,它也代表了Web领域的一次巨大进步!
过去如果想实现浏览器端全双工通信,必须要借助迂回的hacks来实现(比如web版QQ),且HTTP通信的数据非常大并且还有延迟性,相比之下的HTML5 WebSocket带来的改进是如此的巨大。 至于更详细的HTML5 WebSocket或websocket的介绍我在此不多说了,有举趣的朋友你可以Google一下。 NodeJS是一个服务端javascript框架(准确说,nodejs是一个服务端技术),用nodejs可以实现javascript处理服务端逻辑,功能非常强大。感兴趣的朋友可以访问 Node-WebSocket-Server是nodejs的一个子模块,其主要作用是处理websocket通信,可以到它的了解更多详情。git: 在你阅读本篇文章时,我默认你的机器上已经安装了nodejs和node-websocket-server以及拥有一个支持 websocket的浏览器。因为在接下来的内容,我主要讲解如何搭建websocket echo以及websocket broadcast服务器\如何在本地做websocket测试,假如你的机器上没有安装nodejs和node-websocket-server或者你不知道如何安装,那么你可以到Google上搜一下或者访问我的如何安装nodejs以及如何安装node-websocket-server。 一切准备就绪,我们开始编写websocket echo服务器: 我的演示全部是在Mac OS 10.6操作系统下操作的,如读者发现个别nodejs的命令不一样的话,请查阅nodejs api。 JavaScript Code 复制内容到剪贴板
- //请求websocket-server模块
- var ws = require("websocket-server");
- //创建一个服务器
- var server = ws.createServer();
- //当websocket正常通信时,我们为其注册一个message事件,用于异步监视是否有消息发送到服务器
- server.addListener("connection", function(connection){
- //当有消息发往到socket echo服务器时
- connection.addListener("message", function(msg){
- //我们发送一个echo,请注意不是broadcast
- server.send(connection.id,msg);
- });
- });
- //监听一个websocket地址
- server.listen(8080,"127.0.0.1");
ok,我们的websocket echo服务器搭建完毕,简单吧?记住!这是用nodejs搭建的!我们把websocket echo服务器的脚存保存到任意一个位置,取名echo.js,接下来我们要用node来运行这个服务器。
在命令行中(windows)或终端里输入以下命令: Code 复制内容到剪贴板
- node echo.js
node空格再加你的echo.js路径名,即可启动你的websocket echo服务器了,echo.js改为b.js。
服务器启动后,看看页面中我们的javascript脚本如何处理。 JavaScript Code 复制内容到剪贴板
- //websocket支持
- if (!window.WebSocket) {
- alert('Your browser not support websocket!');
- }
- else {
- //创建一个socket连接
- var ws = new WebSocket('ws://127.0.0.1:8080');
- ws.onopen = function(e){
- console.log('WebSocket opened');
- };
- ws.onclose = function(e){
- console.log('WebSocket closed');
- };
- ws.onerror = function(e){
- console.log('WebSocket error');
- };
- //当socket服务器有消息更新时
- ws.onmessage = function(e){
- document.querySelector('#showData').innerHTML += e.data;
- };
- document.querySelector('body').addEventListener('click', function(e){
- e.preventDefault();
- if (e.target.nodeName) {
- //向socket服务器发送消息
- ws.send(e.target.nodeName);
- }
- }, true);
- }
OK,简单吧?我们页面上的javascript脚本完成了。值得注意的是在建立socket连接时,socket的协议不是http/https,而是ws/wss,然后加上地址及端口号。
至于ws和wss的区别,在此简单说一下。ws是标准的websocket接连,而wss则是使用了加密的SSL socket连接。 有些同学可能在想websocket echo服务器和websocket broadcast服务器有啥区别? websocket echo服务器只向给定的客户端ID发送数据,也就是说两个访问同一地址的浏览器窗口,当你在做socket处理时,它实时更新的数据只会反应在当前的页面(客户端),因为服务器只向单一的客户端发送数据。 而websocket broadcast则相反,它会向所有与这个服务器建立socket连接的客户端发送实时的数据。 我们演示一个用node-websocket-server建立一个broadcast服务器 JavaScript Code 复制内容到剪贴板
- //请求websocket-server模块
- var ws = require("websocket-server");
- //创建一个服务器
- var server = ws.createServer();
- //当websocket正常通信时,我们为其注册一个message事件,用于异步监视是否有消息发送到服务器
- server.addListener("connection", function(connection){
- //当有消息发往到socket echo服务器时
- connection.addListener("message", function(msg){
- //我们发送一个broadcast,请注意这个方法的使用,broadcast方法只接受消息数据
- server.broadcast(msg);
- });
- });
- //监听一个websocket地址
- server.listen(8080,"127.0.0.1");
按照上面的方法,通过nodejs启动broadcast.js
node broadcast.js 打开两个或多个浏览器窗口做演示ok,以上就是利用nodejs\node-websocket-server建立的简单的websocket echo和websocket broadcast服务器及演示。
如果你想利用websocket做项目,你的服务器必须要支持socket连接,我在此推荐大家勿必使用nodejs和node-websocket-server技术,它们非常简单,如果你要自己编写socket服务器也可以,你可以访问获取相关技术规范(比较麻烦)。 目前websocket的支持不是很好,仅safari4+chrome8+以及iOS4.2+中的safari支持HTML5 WebSocket。桌面版的opera和firefox都不支持。 掌握websocket后,开发者可以做很多以前HTTP通信无法做到的事情,我们可能开发股票监视系统\数据实时监视系统,甚至我们可以开发基于浏览器的软件,当然你需要一台支持websocket连接的服务器。