您好,登錄后才能下訂單哦!
這篇文章主要介紹“JS前端中的WebSocket如何使用”,在日常操作中,相信很多人在JS前端中的WebSocket如何使用問題上存在疑惑,小編查閱了各式資料,整理出簡單好用的操作方法,希望對大家解答”JS前端中的WebSocket如何使用”的疑惑有所幫助!接下來,請跟著小編一起來學(xué)習(xí)吧!
先來一個常用例子
// WebSocket構(gòu)造函數(shù),創(chuàng)建WebSocket對象 let ws = new WebSocket('ws://localhost:8888') // 連接成功后的回調(diào)函數(shù) ws.onopen = function (params) { console.log('客戶端連接成功') // 向服務(wù)器發(fā)送消息 ws.send('hello') }; // 從服務(wù)器接受到信息時的回調(diào)函數(shù) ws.onmessage = function (e) { console.log('收到服務(wù)器響應(yīng)', e.data) }; // 連接關(guān)閉后的回調(diào)函數(shù) ws.onclose = function(evt) { console.log("關(guān)閉客戶端連接"); }; // 連接失敗后的回調(diào)函數(shù) ws.onerror = function (evt) { console.log("連接失敗了"); };
下面詳細(xì)說明常用的屬性和方法
更全面的官網(wǎng)的文檔可以去這里看:點擊查看
下面是我總結(jié)的內(nèi)容
WebSocketWebSocket
對象提供了用于創(chuàng)建和管理 WebSocket
連接,以及可以通過該連接發(fā)送和接收數(shù)據(jù)的 API。
var ws= new WebSocket(url, protocols);
參數(shù)
url
:要連接的 URL;這應(yīng)該是 WebSocket 服務(wù)器將響應(yīng)的 URL。protocols(可選)
:一個協(xié)議字符串或者一個包含協(xié)議字符串的數(shù)組。這些字符串用于指定子協(xié)議,這樣單個服務(wù)器可以實現(xiàn)多個 WebSocket 子協(xié)議(可以通過一臺服務(wù)器根據(jù)指定的協(xié)議(protocol)處理不同類型的交互)。如果不指定協(xié)議字符串,則假定為空字符串。
屬性
1. readyState
屬性返回實例對象的當(dāng)前狀態(tài)
CONNECTING
:值為0,表示正在連接。OPEN
:值為1,表示連接成功,可以通信。CLOSING
:值為2,表示連接正在關(guān)閉。CLOSED
:值為3,表示連接已經(jīng)關(guān)閉,或者打開連接失敗。
示例
switch (ws.readyState) { case WebSocket.CONNECTING: // 也可以用0 // do something break; case WebSocket.OPEN: // 也可以用1 // do something break; case WebSocket.CLOSING: // 也可以用2 // do something break; case WebSocket.CLOSED: // 也可以用3 // do something break; default: // this never happens break; }
2. onopen
連接成功后的回調(diào)函數(shù)
當(dāng)WebSocket
的連接狀態(tài)readyState
變?yōu)?code>1時調(diào)用,這意味著當(dāng)前連接已經(jīng)準(zhǔn)備好發(fā)送和接受數(shù)據(jù)。
使用方法
ws.onopen = function () { ws.send('Hello Server!'); }
或者
ws.addEventListener('open', function (event) { ws.send('Hello Server!'); });
3. onmessage
從服務(wù)器接受到信息時的回調(diào)函數(shù)
message
事件會在 WebSocket
接收到新消息時被觸發(fā)
使用方法
ws.onmessage = function(event) { // 接收到的數(shù)據(jù) var data = event.data; // 其他代碼 };
或者
ws.addEventListener("message", function(event) { // 接收到的數(shù)據(jù) var data = event.data; // 其他代碼 });
注意:服務(wù)器推送的數(shù)據(jù)可能有多種格式,需要我們動態(tài)判斷,也可以通過 binaryType
屬性設(shè)置
判斷 / 設(shè)置 數(shù)據(jù)格式
// 判斷 ws.onmessage = function(event){ if(typeof event.data === String) { console.log("返回數(shù)據(jù)是字符串"); } } // binaryType 屬性設(shè)置 ws.binaryType = "arraybuffer"; ws.onmessage = function(e) { // 收到的是 ArrayBuffer 數(shù)據(jù) console.log(e.data.byteLength); };
4. onclose
連接關(guān)閉后的回調(diào)函數(shù)
onclose
在 WebSocket
連接的readyState
變?yōu)?CLOSED
或3
時被調(diào)用,它接收一個名字為close
的 CloseEvent
事件
使用方法
ws.onclose = function(event) { var code = event.code; // 表示服務(wù)端發(fā)送的關(guān)閉碼 var reason = event.reason; // 表示服務(wù)器關(guān)閉連接的原因 var wasClean = event.wasClean; // 表示連接是否完全關(guān)閉 // 其他代碼 };
或者
ws.addEventListener("close", function(event) { var code = event.code; // 表示服務(wù)端發(fā)送的關(guān)閉碼 var reason = event.reason; // 表示服務(wù)器關(guān)閉連接的原因 var wasClean = event.wasClean; // 表示連接是否完全關(guān)閉 // 其他代碼 });
關(guān)閉碼對照表:點擊查看
5. onerror
連接失敗后的回調(diào)函數(shù)
當(dāng)websocket
的連接由于一些錯誤事件的發(fā)生 (例如無法發(fā)送一些數(shù)據(jù)) 而被關(guān)閉時,一個error
事件將被引發(fā)。
使用方法
ws.onerror = function(event) { console.log('連接錯誤: ', event); };
或者
ws.addEventListener('error', function (event) { console.log('連接錯誤: ', event); });
6. bufferedAmount
未發(fā)送至服務(wù)器的字節(jié)數(shù)
bufferedAmount
是一個只讀屬性,用于返回已經(jīng)被send()
方法放入隊列中但還沒有被發(fā)送到網(wǎng)絡(luò)中的數(shù)據(jù)的字節(jié)數(shù)。一旦隊列中的所有數(shù)據(jù)被發(fā)送至網(wǎng)絡(luò),則該屬性值將被重置為 0
。但是,若在發(fā)送過程中連接被關(guān)閉,則屬性值不會重置為 0
。如果你不斷地調(diào)用send()
,則該屬性值會持續(xù)增長。
使用方法
// 創(chuàng)建數(shù)據(jù) var data = new ArrayBuffer(10000000); // 發(fā)送數(shù)據(jù) ws.send(data); // 判斷數(shù)據(jù)是否 if (socket.bufferedAmount === 0) { // 數(shù)據(jù)發(fā)送完成 } else { // 還有數(shù)據(jù)未發(fā)送完成 }
方法
1. send()
對要傳輸?shù)臄?shù)據(jù)進(jìn)行排隊
send()
方法將需要通過 WebSocket
鏈接傳輸至服務(wù)器的數(shù)據(jù)排入隊列,并根據(jù)所需要傳輸?shù)?data bytes
的大小來增加 bufferedAmount
的值。若數(shù)據(jù)無法傳輸(例如數(shù)據(jù)需要緩存而緩沖區(qū)已滿)時,套接字會自行關(guān)閉。
使用方法
ws.send('your message');
注意:用于傳輸至服務(wù)器的數(shù)據(jù)。它必須是以下類型之一:
USVString
:文本字符串。字符串將以 UTF-8 格式添加到緩沖區(qū),并且 bufferedAmount 將加上該字符串以 UTF-8 格式編碼時的字節(jié)數(shù)的值。ArrayBuffer
:您可以使用一有類型的數(shù)組對象發(fā)送底層二進(jìn)制數(shù)據(jù);其二進(jìn)制數(shù)據(jù)內(nèi)存將被緩存于緩沖區(qū),bufferedAmount 將加上所需字節(jié)數(shù)的值。Blob
:Blob 類型將隊列 blob 中的原始數(shù)據(jù)以二進(jìn)制中傳輸。 bufferedAmount 將加上原始數(shù)據(jù)的字節(jié)數(shù)的值。ArrayBufferView
:您可以以二進(jìn)制幀的形式發(fā)送任何 JavaScript 類數(shù)組對象 ;其二進(jìn)制數(shù)據(jù)內(nèi)容將被隊列于緩沖區(qū)中。值 bufferedAmount 將加上必要字節(jié)數(shù)的值。
2. close()
關(guān)閉當(dāng)前鏈接
close()
方法關(guān)閉 WebSocket
連接或連接嘗試(如果有的話)。如果連接已經(jīng)關(guān)閉,則此方法不執(zhí)行任何操作。
使用方法
// WebSocket.close(code, reason) ws.close();
參數(shù):
code(可選)
:一個數(shù)字狀態(tài)碼,它解釋了連接關(guān)閉的原因。如果沒有傳這個參數(shù),默認(rèn)使用 1005。reason(可選)
:一個人類可讀的字符串,它解釋了連接關(guān)閉的原因。這個 UTF-8 編碼的字符串不能超過 123 個字節(jié)。
到此,關(guān)于“JS前端中的WebSocket如何使用”的學(xué)習(xí)就結(jié)束了,希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習(xí),快去試試吧!若想繼續(xù)學(xué)習(xí)更多相關(guān)知識,請繼續(xù)關(guān)注億速云網(wǎng)站,小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。