一.WebSocket 簡單介紹

1.HTTP和WebSocket的區(qū)別

http：通信只能由客戶端發(fā)起；
WebSocket：服務器可以主動向客戶端推送信息，客戶端也可以主動向服務器發(fā)送信息，是真正的雙向平等對話，屬于服務器推送技術(shù)的一種；在webSocket協(xié)議下客服端和瀏覽器可以同時發(fā)送信息。

2.WebSocket應用場景

數(shù)據(jù)推送：webSocket可以代替ajax輪詢（即客戶端通過一定的時間間隔不斷向服務器發(fā)起請求獲得數(shù)據(jù)，因此會占用許多帶寬和服務器資源），但是webSocket不一樣，當建立TCP連接后，服務器可以主動給客戶端傳遞數(shù)據(jù)，能夠更好的節(jié)省服務器資源和帶寬，實現(xiàn)更實時的數(shù)據(jù)通訊。

二.js使用WebSocket

Web Sockets能夠在客戶端和服務端之間發(fā)送非常少量的數(shù)據(jù)，而不必擔心HTTP那樣字節(jié)級的開銷，由于傳遞的數(shù)據(jù)包很小，因此WebSockets非常適合移動應用。
缺點：制定協(xié)議的時間比制定JavaScript API的時間還要長。

1.創(chuàng)建WebSocket實例

url：url之前需添加ws://（未加密）或wss://（已加密），類似http://、https://
protocol：與服務端定義的協(xié)議名稱相同，協(xié)議的參數(shù)例如XMPP（Extensible Messaging and Presence Protocol）、SOAP（Simple Object Access Protocol）或者自定義協(xié)議。

var ws = new WebSocket('ws://url');
var ws1 = new WebSocket('ws://url', 'myprotocol');
var ws2 = new WebSocket('ws://url', ['protocol_1','protovol_2']));

2.屬性

①readyState屬性：WebSocket當前連接狀態(tài)

通過 ws.readyState屬性查看當前連接狀態(tài)，例

alert('ws連接狀態(tài)：' + ws.readyState);

②bufferedAmount：檢查傳輸數(shù)據(jù)的大小，當客戶端傳輸大量數(shù)據(jù)時使用避免網(wǎng)絡飽和
③protocol：在構(gòu)造函數(shù)中使用，protocol參數(shù)讓服務端知道客戶端使用的WebSocket協(xié)議。而WebSocket對象的這個屬性就是指的最終服務端確定下來的協(xié)議名稱，可以為空

3.方法

①發(fā)送數(shù)據(jù)：send()

var message = {
	id: 1,
	title: '發(fā)送ws數(shù)據(jù)'
}
ws.send(JSON.stringify(message));    // 復雜的數(shù)據(jù)結(jié)構(gòu)要先進行序列化

②關(guān)閉連接：closed()

ws.close()

4.事件

WebSocket API是純事件驅(qū)動，建立連接之后，可自動發(fā)送狀態(tài)改變的數(shù)據(jù)和通知

5.使用示例

var ws = new WebSocket('ws://url');
// 獲取連接狀態(tài)
console.log('ws連接狀態(tài)：' + ws.readyState);
//監(jiān)聽是否連接成功
ws.onopen = function () {
    console.log('ws連接狀態(tài)：' + ws.readyState);
    //連接成功則發(fā)送一個數(shù)據(jù)
    ws.send('test1');
}
// 接聽服務器發(fā)回的信息并處理展示
ws.onmessage = function (data) {
    console.log('接收到來自服務器的消息：');
    console.log(data);
    //完成通信后關(guān)閉WebSocket連接
    ws.close();
}
// 監(jiān)聽連接關(guān)閉事件
ws.onclose = function () {
    // 監(jiān)聽整個過程中websocket的狀態(tài)
    console.log('ws連接狀態(tài)：' + ws.readyState);
}
// 監(jiān)聽并處理error事件
ws.onerror = function (error) {
    console.log(error);
}

到此這篇關(guān)于js實現(xiàn)WebSocket 連接的示例代碼的文章就介紹到這了,更多相關(guān)js WebSocket 連接內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論