大家經(jīng)常瀏覽一些網(wǎng)站時候會彈出在線聊天窗口，點擊后可以和客服人員聊天，非常方便，之前也做過一款簡單的在線聊天工具，下面就說說在線聊天通訊的主要幾種技術(shù)手段。

1、Ajax

在html5之前，這個是很主流的web通訊方式，通過ajax不斷請求服務(wù)器獲取數(shù)據(jù)，分為輪詢和長輪詢，主要寫法上有點區(qū)別。

輪詢

輪詢是一種“拉”取信息的工作模式，設(shè)置一個定時器，定時詢問服務(wù)器是否有信息，每次建立連接傳輸數(shù)據(jù)之后，鏈接會關(guān)閉，演示代碼如下：

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對象關(guān)閉連接的時候馬上又發(fā)起請求，讓連接一直持續(xù)進行，演示代碼如下：

var longPoll = function(type, url){
 var xhr = new XMLHttpRequest();
 xhr.onreadystatechange = function(){
 // 狀態(tài)為 4，數(shù)據(jù)傳輸完畢，重新遞歸連接
 if(xhr.readyState == 4) {
 receive(xhr.responseText);
 xhr.onreadystatechange = null;
 longPoll(type, url);
 }
 };
 xhr.open(type, url, true);
 xhr.send();
}

2、websocket

websocket是前端一個神器，ajax用了這么久了，相關(guān)技術(shù)也是很成熟，不過實現(xiàn)數(shù)據(jù)的拉取非常不劃算。

ajax是基于HTTP協(xié)議，HTTP協(xié)議是單向通信協(xié)議，只有客戶端發(fā)起HTTP請求,服務(wù)端才會返回數(shù)據(jù)。

而WebSocket協(xié)議是雙向通信協(xié)議，在建立連接之后，客戶端和服務(wù)器都可以主動向?qū)Ψ桨l(fā)送或接受數(shù)據(jù)。WebSocket協(xié)議建立的前提需要借助HTTP協(xié)議，建立連接之后，持久連接的雙向通信就與HTTP協(xié)議無關(guān)了。

下面直接上代碼，自從有了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的連接協(xié)議，8888為端口號碼。onmessage中提供了data這個屬性，相當方便