NodeJS+(Node-WebSocket-Server)+HTML5 WebSocket实现websocket

 WebSocket是HTML5的新特性，也是HTML5中最强大的通信功能，利用HTML5 WebSocket我们可以开发出基于浏览器的客户端应用。

HTML5 WebSocket不仅仅是对常规的HTTP通信的增强，它也代表了Web领域的一次巨大进步！
过去如果想实现浏览器端全双工通信，必须要借助迂回的hacks来实现（比如web版QQ），且HTTP通信的数据非常大并且还有延迟性，相比之下的HTML5 WebSocket带来的改进是如此的巨大。
至于更详细的HTML5 WebSocket或websocket的介绍我在此不多说了，有举趣的朋友你可以Google一下。
NodeJS是一个服务端javascript框架(准确说，nodejs是一个服务端技术)，用nodejs可以实现javascript处理服务端逻辑，功能非常强大。感兴趣的朋友可以访问nodejs.org
Node-WebSocket-Server是nodejs的一个子模块，其主要作用是处理websocket通信，可以到它的官网了解更多详情。git:https://github.com/miksago/node-websocket-server
在你阅读本篇文章时，我默认你的机器上已经安装了nodejs和node-websocket-server以及拥有一个支持html5 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服务器也可以，你可以访问http://tools.ietf.org/id/websocket获取相关技术规范(比较麻烦)。
目前websocket的支持不是很好，仅safari4+chrome8+以及iOS4.2+中的safari支持HTML5 WebSocket。桌面版的opera和firefox都不支持。
掌握websocket后，开发者可以做很多以前HTTP通信无法做到的事情，我们可能开发股票监视系统＼数据实时监视系统，甚至我们可以开发基于浏览器的软件，当然你需要一台支持websocket连接的服务器。