WebSocket方法的對象特性
1. WebSocket方法
a. send方法
send方法用於在WebSocket連接建立后,客戶端向服務端發送消息。可分為發送兩種消息,一種是普通文本信息,一種是二進制數據。需注意的是,send方法必須在連接建立以后才能使用,也就是在onopen里使用才不會出錯。
發送普通消息
這個比較簡單,在上一篇學習WebSocket事件時就用到了,只需要send(message)即可。
發送二進制數據
在Web應用中,我們還需要發送圖片、音頻、視頻等二進制數據,這就需要Blob類的配合,Blod是二進制大對象。
下面是一個綜合示例:
ws = WebSocket("ws://echo.websocket.org/echo",[]); /* open事件觸發表明協議握手成功,WebSocket以及准備好接收和發送數據 */ ws.onopen = function(e){ console.log("start.."); //發送文本消息 ws.send("Hello World"); //發送二進制對象 var data = new Blob("blob object"); ws.send(data); } /* message消息在客戶端接收到消息時觸發 */ ws.onmessage = function(e){ console.log("收到信息如下:"); if(typeof e.data == "string"){ console.log("文本消息:",e,e.data); }else{ console.log("非文本消息:",e,e.data); } ws.close(); }
b. close方法|
close方法用於關閉連接,它可以不帶參數表示直接關閉,也可以帶上兩個參數(code,reason)向服務端提交關閉連接的原因:
1. ws.close()
2. ws.close(1000,"close normally")
2. 對象特性
在學習了WebSocket的方法后,接下來學習一下WebSocket提供的對象特性,這些特性提供了關於WebSocket對象的更多信息:readyState、bufferedCount
和protocol。英文稍好的話其實由字面就可知道這三個對象分別對應着WebSocket的什么特性。下面一一介紹一下:
a. readyState
WebSocket通過只讀特性readyState報告其連接狀態,連接狀態共有四個,使用者可以根據這個特性判斷此時的連接狀態,然后再進行下一步行動。下面是四個連接狀態列表:
特性常量 | 取值 | 狀態 |
---|---|---|
WebSocket.CONNECTING | 0 | 連接正在進行中,但還未建立 |
WebSocket.OPEN | 1 | 連接已建立,消息可以開始傳遞 |
WebSocket.CLOSING | 2 | 連接正在進行關閉 |
WebSocket.CLOSED | 3 | 連接已關閉 |
下面是示例:
var ws = new WebSocket("ws://echo.websocket.org/echo",[]);
if(ws.readyState == WebSocket.CONNECTING){ console.log("連接正在建立"); } ws.onopen = function(e){ if(ws.readyState == WebSocket.OPEN){ console.log("連接已打開!"); } }
b. bufferedAmount
當客戶端向服務端發送大量數據時,瀏覽器會先將數據緩存到瀏覽器的發送隊列里,然后逐段地向服務器發送,bufferedAmount這個特性就是告訴客戶端現在隊列里還有多少已經緩存了但沒發送的數據。示例如下:
var limit = 10240; var ws = new WebSocket("ws://echo.websocket.org",[]); /* open事件觸發表明協議握手成功,WebSocket以及准備好接收和發送數據 */ ws.onopen = function(e){ console.log("start.."); setInterval(function(){ if(ws.bufferedAmount < limit){ var a = [] for(var i=0;i<1000;i++){ a.push(1); } ws.send(a); } },10); setInterval(function(){ console.log(ws.bufferedAmount); },500) }
c. protocol
protocol特性包含在打開握手期間WebSocket服務器選擇的協議名,換句話說,protocol特性告訴你特定WebSocket上使用的協議。