好程序员带你认识HTML5中的WebSocket

好程序员带你认识HTML5中的WebSocket，在HTML5 规范中，我最喜欢的Web技术就是正迅速变得流行的 WebSocket API。WebSocket 提供了一个受欢迎的技术，以替代咱们过去几年一直在用的Ajax技术。这个新的API提供了一个方法，从客户端使用简单的语法有效地推进消息到服务器。让咱们看一看 HTML5 的 WebSocket API：它可用于客户端、服务器端。并且有一个优秀的第三方API，名为Socket.IO。

　　1、HTML5 中的 WebSocket API 是个什么东东?

WebSocket API是下一代客户端-服务器的异步通讯方法。该通讯取代了单个的TCP套接字，使用ws或wss协议，可用于任意的客户端和服务器程序。WebSocket目前由W3C进行标准化。WebSocket已经受到Firefox 四、Chrome 四、Opera 10.70以及Safari 5等浏览器的支持。

WebSocket API最伟大之处在于服务器和客户端能够在给定的时间范围内的任意时刻，相互推送信息。WebSocket并不限于以Ajax(或XHR)方式通讯，由于Ajax技术须要客户端发起请求，而WebSocket服务器和客户端能够彼此相互推送信息;XHR受到域的限制，而WebSocket容许跨域通讯。

Ajax技术很聪明的一点是没有设计要使用的方式。WebSocket为指定目标建立，用于双向推送消息。

　　2、HTML5 中的 WebSocket API 的用法

　　只专一于客户端的API，由于每一个服务器端语言有本身的API。下面的代码片断是打开一个链接，为链接建立事件监听器，断开链接，消息时间，发送消息返回到服务器，关闭链接。

　　代码以下:

// 建立一个Socket实例

var socket = new WebSocket('ws://localhost:8080');

// 打开Socket

socket.onopen = function(event){

// 发送一个初始化消息

socket.send('I am the client and I\'m listening!');

// 监听消息

socket.onmessage = function(event){

console.log('Client received a message',event);

};

// 监听Socket的关闭

socket.onclose = function(event){

console.log('Client notified socket has closed',event);

};

// 关闭Socket....

//socket.close()

};

　　让咱们来看看上面的初始化片断。参数为URL，ws表示WebSocket协议。onopen、onclose和onmessage方法把事件链接到Socket实例上。每一个方法都提供了一个事件，以表示Socket的状态。

onmessage事件提供了一个data属性，它能够包含消息的Body部分。消息的Body部分必须是一个字符串，能够进行序列化/反序列化操做，以便传递更多的数据。

WebSocket的语法很是简单，使用WebSockets是难以置信的容易……除非客户端不支持WebSocket。IE浏览器目前不支持WebSocket通讯。若是你的客户端不支持WebSocket通讯，下面有几个后备方案供你使用：

Flash技术 —— Flash能够提供一个简单的替换。 使用Flash最明显的缺点是并不是全部客户端都安装了Flash，并且某些客户端，如iPhone/iPad，不支持Flash。

AJAX Long-Polling技术 —— 用AJAX的long-polling来模拟WebSocket在业界已经有一段时间了。它是一个可行的技术，但它不能优化发送的信息。也就是说，它是一个解决方案，但不是最佳的技术方案。

　　因为目前的IE等浏览器不支持WebSocket，要提供WebSocket的事件处理、返回传输、在服务器端使用一个统一的API，那么该怎么办呢?幸运的是，Guillermo Rauch建立了一个Socket.IO技术。

　　3、带Socket.IO的WebSocket

Socket.IO是Guillermo Rauch建立的WebSocket API，Guillermo Rauch是LearnBoost公司的首席技术官以及LearnBoost实验室的首席科学家。Socket.IO使用检测功能来判断是否创建WebSocket链接，或者是AJAX long-polling链接，或Flash等。可快速建立实时的应用程序。Socket.IO还提供了一个NodeJS API，它看起来很是像客户端API。

　　创建客户端Socket.IO

Socket.IO能够从GitHub下载，能够把socket.io.js文件包含到页面中：

　　代码以下:

　　此时，Socket.IO在此页面上是有效的，是时候建立Socket了：

　　代码以下:

// 建立Socket.IO实例，创建链接

var socket= new io.Socket('localhost',{

port: 8080

});

socket.connect();

// 添加一个链接监听器

socket.on('connect',function(){

console.log('Client has connected to the server!');

});

// 添加一个链接监听器

socket.on('message',function(data){

console.log('Received a message from the server!',data);

});

// 添加一个关闭链接的监听器

socket.on('disconnect',function(){

console.log('The client has disconnected!');

});

// 经过Socket发送一条消息到服务器

function sendMessageToServer(message){

socket.send(message);

}

Socket.IO简化了WebSocket API，统一了返回运输的API。传输包括：

WebSocket

Flash Socket

AJAX long-polling

AJAX multipart streaming

IFrame

JSONP polling

　　你还能够设置任意的Socket.IO构造器的第二个选项，选项包括：

port - 待链接的端口

transports - 一个数组，包含不一样的传输类型

transportOptions - 传输的参数使用的对象，带附加属性

Socket.IO还提供了由本地WebSocket API提供的普通链接、断开链接、消息事件。Socket还提供了封装每一个事件类型的方法。

　　4、NodeJS和Socket.IO联合开发

Socket.IO提供的服务器端解决方案，容许统一的客户端和服务器端的API。使用Node，你能够建立一个典型的HTTP服务器，而后把服务器的实例传递到Socket.IO。从这里，你建立链接、断开链接、创建消息监听器，跟在客户端同样。

　　一个简单的服务器端脚本看起来以下：

　　代码以下:

// 须要HTTP 模块来启动服务器和Socket.IO

var http= require('http'), io= require('socket.io');

// 在8080端口启动服务器

var server= http.createServer(function(req, res){

// 发送HTML的headers和message

res.writeHead(200,{'Content-Type': 'text/html' });

res.end('Hello Socket Lover!');

});

server.listen(8080);

// 建立一个Socket.IO实例，把它传递给服务器

var socket= io.listen(server);

// 添加一个链接监听器

socket.on('connection', function(client){

// 成功!如今开始监听接收到的消息

client.on('message',function(event){

console.log('Received message from client!',event);

});

client.on('disconnect',function(){

clearInterval(interval);

console.log('Server has disconnected');

});

});

　　你能够运行服务器部分，假定已安装了NodeJS，从命令行执行：

node socket-server.js

　　如今客户端和服务器都能来回推送消息了!在NodeJS脚本内，可使用简单的JavaScript建立一个按期消息发送器：

　　代码以下:

// 建立一个按期(每5秒)发送消息到客户端的发送器

var interval= setInterval(function(){

client.send('This is a message from the server! ' + new Date().getTime());

},5000);

　　服务器端将会每5秒推送消息到客户端

　　5、dojox.Socket和Socket.IO

Persevere的建立者Kris Zyp建立了dojox.Socket。dojox.Socket以Dojo库一致的方式封装了WebSocket API，用于在客户端不支持WebSocket时，使用long-polling替代。

　　下面是怎样在客户端使用dojox.Socket和在服务器端使用Socket.IO的例子：

　　代码以下:

var args, ws= typeof WebSocket!= 'undefined';

var socket= dojox.socket(args= {

url: ws? '/socket.io/websocket' : '/socket.io/xhr-polling',

headers:{

'Content-Type':'application/x-www-urlencoded'

},

transport: function(args, message){

args.content = message;// use URL-encoding to send the message instead of a raw body

dojo.xhrPost(args);

};

});

var sessionId;

socket.on('message', function(){

if (!sessionId){

sessionId= message;

args.url += '/' + sessionId;

}else if(message.substr(0, 3)== '~h~'){

// a heartbeat

}

});

dojox.socket.Reconnect还建立了在套接字失去链接时自动重连。期待包含dojox.Socket的Dojo 1.6版本早日发布。

　　6、实际应用和WebSocket资源

　　有不少WebSocke的实际应用。WebSocket对于大多数客户机-服务器的异步通讯是理想的，在浏览器内聊天是最突出的应用。WebSocket因为其高效率，被大多数公司所使用。