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

1、Ajax

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

輪詢

輪詢是一種“拉”取信息的工作模式，設(shè)置一個(gè)定時(shí)器，定時(shí)詢問服務(wù)器是否有信息，每次建立連接傳輸數(shù)據(jù)之后，鏈接會(huì)關(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);
};
//定時(shí)器
var timer = setInterval(function(){
 polling();
}, 1000);

長(zhǎng)輪詢

長(zhǎng)輪詢其實(shí)也沒啥特殊的地方，就是在xhr對(duì)象關(guān)閉連接的時(shí)候馬上又發(fā)起請(qǐng)求，讓連接一直持續(xù)進(jìn)行，演示代碼如下：

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是前端一個(gè)神器，ajax用了這么久了，相關(guān)技術(shù)也是很成熟，不過實(shí)現(xiàn)數(shù)據(jù)的拉取非常不劃算。

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

而WebSocket協(xié)議是雙向通信協(xié)議，在建立連接之后，客戶端和服務(wù)器都可以主動(dòng)向?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();

新建一個(gè)WebSocket實(shí)例，一切就OK了，ws:// 是websocket的連接協(xié)議，8888為端口號(hào)碼。onmessage中提供了data這個(gè)屬性，相當(dāng)方便