大家经常浏览一些网站时候会弹出在线聊天窗口，点击后可以和客服人员聊天，非常方便，之前也做过一款简单的在线聊天工具，下面就说说在线聊天通讯的主要几种技术手段。

1、Ajax

在html5之前，这个是很主流的web通讯方式，通过ajax不断请求服务器获取数据，分为轮询和长轮询，主要写法上有点区别。

轮询

轮询是一种“拉”取信息的工作模式，设置一个定时器，定时询问服务器是否有信息，每次建立连接传输数据之后，链接会关闭，演示代码如下：

var polling = function(url, type, data){
 var xhr = new XMLHttpRequest(),
 type = type || "GET",
 data = data || null;
 xhr.onreadystatechange = function(){
 if(xhr.readyState == 4) {
 receive(xhr.responseText);
 xhr.onreadystatechange = null;
 }
 };
 xhr.open(type, url, true);
 xhr.send(type == "GET" ? null : data);
};
//定时器
var timer = setInterval(function(){
 polling();
}, 1000);

长轮询

长轮询其实也没啥特殊的地方，就是在xhr对象关闭连接的时候马上又发起请求，让连接一直持续进行，演示代码如下：

var longPoll = function(type, url){
 var xhr = new XMLHttpRequest();
 xhr.onreadystatechange = function(){
 // 状态为 4，数据传输完毕，重新递归连接
 if(xhr.readyState == 4) {
 receive(xhr.responseText);
 xhr.onreadystatechange = null;
 longPoll(type, url);
 }
 };
 xhr.open(type, url, true);
 xhr.send();
}

2、websocket

websocket是前端一个神器，ajax用了这么久了，相关技术也是很成熟，不过实现数据的拉取非常不划算。

ajax是基于HTTP协议，HTTP协议是单向通信协议，只有客户端发起HTTP请求,服务端才会返回数据。

而WebSocket协议是双向通信协议，在建立连接之后，客户端和服务器都可以主动向对方发送或接受数据。WebSocket协议建立的前提需要借助HTTP协议，建立连接之后，持久连接的双向通信就与HTTP协议无关了。

下面直接上代码，自从有了websocket，是不是感觉世界变得轻巧很多了。

var ws = new WebSocket("ws://www.example.com:8888");
ws.onopen = function(evt){};
ws.onmessage = function(evt){
 deal(evt.data);
};
ws.onclose = function(evt){};
//ws.close();

新建一个WebSocket实例，一切就OK了，ws:// 是websocket的连接协议，8888为端口号码。onmessage中提供了data这个属性，相当方便