前端WebSocket詳解

MasonEast發表於2019-03-15
前端Web
websocket是H5才開始提供的一種在單個TCP連線上進行全雙工通訊的協議。主要作用就是建立伺服器和客戶端的長連線能更好的節省伺服器資源和頻寬，伺服器向瀏覽器推流實現實時通訊。
複製程式碼

和http一樣，WebSocket也是應用層協議。瀏覽器和伺服器只要完成一次握手的動作，然後瀏覽器和伺服器之間就會脫離http協議，而是用WebSocket自己的ws協議。客戶端和伺服器端就可以通過tcp連線直接交換資料。

說了這麼多好處，接下來講講到到底怎麼用。 首先要建立一個WebSocket物件：

var Socket = new WebSocket(url,[protocol])
複製程式碼

以上程式碼中的第一個引數 url, 指定連線的 URL。第二個引數 protocol 是可選的，指定了可接受的子協議.

物件建立好了，接下來讓我們瞭解下

WebSocket都有哪些屬性

  • Socket.readyState：這是個只讀屬性，y用來表示連線狀態
  • 0：未連線 1：連線已建立 2.連線z正在關閉 3.連線已關閉或打不開連線
  • Socket.bufferedAmount：z也是隻讀屬性。主要是計算還沒有被send()發出的UTF-8文字位元組數。

WebSocket方法

  • Socket.send()：向伺服器傳送資料
  • Socket.close()：關閉連線

WebSocket事件

  • Socket.onopen:連線建立時觸發
  • Socke.onmessage：客戶端接受服務端資料時觸發
  • Socket.onerror:通訊錯誤時觸發
  • Socket.onclose：連線關閉時觸發

WebSocket例項

WebSocket 協議本質上是一個基於 TCP 的協議。 為了建立一個 WebSocket 連線，客戶端瀏覽器首先要向伺服器發起一個 HTTP 請求，這個請求和通常的 HTTP 請求不同，包含了一些附加頭資訊，其中附加頭資訊"Upgrade: WebSocket"表明這是一個申請協議升級的 HTTP 請求，伺服器端解析這些附加的頭資訊然後產生應答資訊返回給客戶端，客戶端和伺服器端的 WebSocket。連線就建立起來了，雙方就可以通過這個連線通道自由的傳遞資訊，並且這個連線會持續存在直到客戶端或者伺服器端的某一方主動的關閉連線。

相關文章