WebSocket的使用

先來介紹一下webScoket,其實開始我也不知道是啥,所以搜了一下:

WebSocket protocol 是HTML5一種新的協議。它是實現了瀏覽器與服務器全雙工通信(full-duplex)。

現很多網站爲了實現即時通訊,所用的技術都是輪詢(polling)。輪詢是在特定的的時間間隔(如每1秒),由瀏覽器對服務器發出HTTP request,然後由服務器返回最新的數據給客服端的瀏覽器。這種傳統的HTTP request 的模式帶來很明顯的缺點 – 瀏覽器需要不斷的向服務器發出請求,然而HTTP request 的header是非常長的,裏面包含的數據可能只是一個很小的值,這樣會佔用很多的帶寬。

而最比較新的技術去做輪詢的效果是Comet – 用了AJAX。但這種技術雖然可達到全雙工通信,但依然需要發出請求。

在 WebSocket API,瀏覽器和服務器只需要要做一個握手的動作,然後,瀏覽器和服務器之間就形成了一條快速通道。兩者之間就直接可以數據互相傳送。在此WebSocket 協議中,爲我們實現即時服務帶來了兩大好處:

1. Header

互相溝通的Header是很小的-大概只有 2 Bytes

2. Server Push

服務器可以主動傳送數據給客戶端

做webSocket是由於項目需求,要求界面動態顯示實時數據,但是又不可能一秒就給服務器發送一個,這個太不切實際了,於是有了webSocket。雖然後來可以但是中間遇到了很多的問題,查資料的時候還發現ie到10的版本才支持,真是人艱不拆啊~~~

function start() {  //---2:到了這裏

var wsImpl = window.WebSocket||window.MozWebSocket;  //這應該是定義好的

window.ws = new wsImpl('ws://192.168.11.11:8180/');    //這裏是服務器地址

ws.binaryType = "arraybuffer";

ws.onmessage = function(evt) {    //---6:這裏就是用來接受數據的,想要怎麼處理就是自己的事啦

var mess = evt.data;

//對於數據的處理一是看服務器傳過來的是什麼數據;二是看你需要什麼樣式的數據

}

};

ws.onopen = function() {   //---3.1:打開服務器,並連接成功

$.ajax({     //---4:這裏我是用來第一次想服務器發送請求的內容

type:'POST',

url:ctx+'/do/xx/xx/xxx',

async : false,

data:{

        xx:xx

},

dataType:'text',

success:function(data){

   ws.send(data);     //-----5:獲取到ajax的內容之後,就可以將其發送給服務器,就是這個send的啦

}

});

};

ws.onclose = function() {    //---3.2:到了這裏應該是服務器關閉了

$.messager.alert('Warning','服務器已經關閉了~');

};

ws.onerror = function() {   //---3.3連接出現問題了,關閉也是錯誤哦~

$.messager.alert('error','出現錯誤,請重試~');

};

};

$(function(){

start(); //---1:開始

});


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章