认识HTML5的WebSocket

前言

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

一、什么是 WebSocket API?

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

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

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

二、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 技术。

三、带 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 文件包含到页面中：

<script src="http://cdn.socket.io/stable/socket.io.js"></script>  
[/code  
此时，Socket.IO 在此页面上是有效的，是时候创建 Socket 了：  
[code]  
// 创建 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 还提供了封装每个事件类型的方法。

四、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('<h1>Hello Socket Lover!</h1>');   
});   
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 秒推送消息到客户端！

五、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 版本早日发布。

六、实际应用和 WebSocket 资源

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

WebSocket 资源

Socket.IO 站点：

http://socket.io/

WebSocket 的 Wikipedia：

http://en.wikipedia.org/wiki/WebSockets

WebSockets.org 站点：

http://www.websockets.org/

Dojo WebSocket 站点：

http://www.sitepen.com/blog/2010/10/31/dojo-websocket/