① WebSocket使用及在vue如何使用
WebSocket 使得客戶端和伺服器之間的數據交換變得更加簡單,允許服務端主動向客戶端推送數據。在 WebSocket API 中, 瀏覽器和伺服器只需要完成一次握手,兩者之間就直接可以創建持久性的連接,並進行雙向數據傳輸 。
在 WebSocket API 中,瀏覽器和伺服器只需要做一個握手的動作,然後,瀏覽器和伺服器之間就形成了一條快速通道。兩者之間就直接可以數據互相傳送。
現在,很多網站為了實現推送技術,所用的技術都是 Ajax 輪詢。輪詢是在特定的的時間間隔(如每 1 秒),由瀏覽器對伺服器發出 HTTP 請求,然後由伺服器返回最新的數據給客戶端的瀏覽器。這種傳統的模式帶來很明顯的缺點,即瀏覽器需要不斷的向伺服器發出請求,然而 HTTP 請求可能包含較長的頭部,其中真正有效的數據可能只是很小的一部分,顯然這樣會浪費很多的帶寬等資源。
HTML5 定義的 WebSocket 協議,能更好的節省伺服器資源和帶寬,並且能夠更實時地進行通訊。
瀏覽器通過 JavaScript 向伺服器發出建立 WebSocket 連接的請求,連接建立以後, 客戶端和伺服器端就可以通過 TCP 連接直接交換數據 。
當你獲取 Web Socket 連接後,你可以通過 send() 方法來向伺服器發送數據,並通過 onmessage 事件來接收伺服器返回的數據。
為了建立一個 WebSocket 連接,客戶端瀏覽器首先要向伺服器發起一個 HTTP 請求,這個請求和通常的 HTTP 請求不同,包含了一些附加頭信息,其中附加頭信息"Upgrade: WebSocket"表明這是一個申請協議升級的 HTTP 請求,伺服器端解析這些附加的頭信息然後產生應答信息返回給客戶端,客戶端和伺服器端的 WebSocket 連接就建立起來了,雙方就可以通過這個連接通道自由的傳遞信息,並且這個連接會持續存在直到客戶端或者伺服器端的某一方主動的關閉連接
socket.io 是一個類庫,內部封裝了 WebSocket,可以在瀏覽器與伺服器之間建立實時通信。
如果某些舊版本的瀏覽器不支持 WebSocket,socket.io 會使用輪詢代替。另外它還具有可發送二進制消息、多路復用、創建房間等特性,因此相比直接使用原生 WebSocket,socket.io 是更好的選擇。
開發一個實時應用主要分兩部分:服務端和客戶端,socket.io 分別提供了相應的 npm 包供我們方便地調用。
接下來就通過一個生動形象且有趣的栗子分別介紹這兩大塊。
現在假設李白張三,李四,王五 5 個人加入了一個叫 棋牌室 的房間,在文章結束時我們將擁有一個麻雀雖小五臟俱全的峽谷英雄在線聊天室。
客戶端的功能到這基本上也開發完了。核心 api 就是 on 和 emit 用於收發消息,既簡單又優雅。