接下来，我们需要启动我们的WebSocket服务。首先，我们需要构建自己的HTTP服务器，在NodeJS中构建一个简单的HTTP服务器很简单，so easy。代码如下：

var app = http.createServer( onRequest ).listen( 8888 );

onRequest()作为回调函数，它的作用是处理请求，然后做出响应，实际上就是根据接收的URL，在服务器上查找相应的资源，最终返回给浏览器。
在构建了HTTP服务器后，我们需要启动WebSocket服务，代码如下：

var WebSocketServer = require('ws').Server; var wss = new WebSocketServer( { server : app } );

从代码中可以看出，在初始化WebSocket服务时，把我们刚才构建好的HTTP实例传递进去就好。到这里，我们的服务端代码差不多也就编写完成了。怎么样？很简单吧。

五、WebSocket API

上面我们介绍了WebSocket服务端的知识，接下来，我们需要编写客户端代码了。在前面我们说过，客户端的API也是一如既往的简单：

见上图：ready state中定义的是socket的状态，分为connection、open、closing和closed四种状态，从字面上就可以区分出它们所代表的状态。

上图描述的是WebSocket的事件，分为onopen、onerror和onclose；

上图为消息的定义，主要是接收和发送消息。注意：可以发送二进制的数据。

以上个图的具体的含义就不再一一赘述，详细描述请参考：

PS：由于WebSocket API（截止到2012年7月）还是草案，API文档和上文所描述的会有所不同，请以官方文档为主，这也是我为什么不详细描述API中各个属性的原因。

另外一点需要提醒大家的是：在前端开发中，浏览器兼容是必不可少的，而WebSocket在主浏览器中的兼容还是不错的，火狐和Chrome不用说，最新版的支持非常不错，而且支持二进制数据的发送和接收。但是IE9并不支持，对于国内的大多数应用场景，WebSocket无法大规模使用。

截图来自（），之所以选择百度的统计数据，是因为更加符合国内的实际情况。图中所展示的是2012年4月1日到2012年6月30日之间的统计数据，从图中不难看出IE6.0、奇虎360、IE7.0和IE8.0加起来一共占据了77%的市场，FireFox属于其他，chrome只有5.72%的份额，再一次告诉我们，我们的主战场依然是IE系。

既然是IE系，那么对于WebSocket在实际app中的应用就基本不可能了。但我们完全可以在chrome、FireFox、以及移动版的IOS浏览器中使用它。

六、实例解析

搭建好了服务端，熟悉了API，接下来，我们要开始构建我们的应用了。鉴于WebSocket自身的特点，我们的第一个demo选择了比较常见的聊天程序，我们暂且取名为chat。

说到聊天，大家最先想到的肯定是QQ，没错，我们所实现的应用和QQ类似，而且还是基于web的。因为是demo，我们的功能比较简陋，仅实现了最简单的会话功能。就是启动WebSocket服务器后，客户端发起连接，连接成功后，任意客户端发送消息，都会被服务器广播给所有已连接的客户端，包括自己。

既然需要客户端，我们需要构建一个简单的html页面，页面中样式和元素，大家可以自由发挥，只要能够输入消息，有发送按钮，最后有一个展示消息的区域即可。具体的样子大家可以看附件中的demo。

写玩HTML页面之后，我们需要添加客户端脚本，也就是和WebSocket相关的代码；前面我们说过，WebSocket的API本身很简单，所以，我们的客户端代码也很直接，如下：

var wsServer = 'ws://localhost:8888/'; var websocket = new WebSocket(wsServer); websocket.binaryType = "arraybuffer"; websocket.onopen = onOpen; websocket.onclose = onClose; websocket.onmessage = onMessage; websocket.onerror = onError;

首先，我们需要指定WebSocket的服务地址，也就是var wsServer = ‘ws://localhost:8888/’;

然后，我们实例化WebSocket，new WebSocket(wsServer)，
剩下的就是指定相应的回调函数了，分别是onOpen，onClose，onMessage和onError，对于咱们的实验应用来说，onopen、onclose、onerror甚至可以不管，咱们重点关注一下onmessage。

onmessage()这个回调函数会在客户端收到消息时触发，也就是说，只要服务器端发送了消息，我们就可以通过onmessage拿到发送的数据，既然拿到了数据，接下去该怎么玩，就随便我们了。请看下面的伪代码：

function onMessage(evt) { var json = JSON.parse(evt.data); commands[json.event](json.data); }

因为onmessage只接收字符串和二进制类型的数据，如果需要发送json格式的数据，就需要我们转换一下格式，把字符串转换成JSON格式。只要是支持WebSocket，肯定原生支持window.JSON，所以，我们可以直接使用JSON.parse()和JSON.stringify()来进行转换。
转换完成后，我们就得到了我们想要的数据了，接下来所做的工作就是将消息显示出来。实际上就是

Elements.innerHTML += data + '</br>';

上面展现了客户端的代码，服务器端的代码相对要简单一些，因为我们的服务器端使用的是第三方实现，我们只需要做一些初始化工作，然后在接收到消息时，将消息广播出去即可，下面是具体的代码：

var app = http.createServer( onRequest ).listen( 8888 ); var WebSocketServer = require('ws').Server, wss = new WebSocketServer( { server : app } ); wss.on('connection', function( ws ) { console.log('connection successful!'); ws.on('message', function( data, flags ) { console.log(data); //do something here }); ws.on('close', function() { console.log('stopping client'); }); });