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

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://");

ws.onopen = function(evt){};

ws.onmessage = function(evt){

deal(evt.data);

};

ws.onclose = function(evt){};

//ws.close();

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