webSocket筆記

什麼是webSocket？

WebSocket 是 HTML5 開始提供的一種在單個 TCP 連線上進行全雙工通訊的協議。

webSocket的作用以及使用場景

WebSocket 使得客戶端和伺服器之間的資料交換變得更加簡單，允許服務端主動向客戶端推送資料。在 WebSocket API 中，瀏覽器和伺服器只需要完成一次握手，兩者之間就直接可以建立永續性的連線，並進行雙向資料傳輸,很多網站為了實現推送技術，所用的技術都是 Ajax 輪詢。輪詢是在特定的的時間間隔（如每1秒），由瀏覽器對伺服器發出HTTP請求，然後由伺服器返回最新的資料給客戶端的瀏覽器。這種傳統的模式帶來很明顯的缺點，即瀏覽器需要不斷的向伺服器發出請求，然而HTTP請求可能包含較長的頭部，其中真正有效的資料可能只是很小的一部分，顯然這樣會浪費很多的頻寬等資源。
HTML5 定義的 WebSocket 協議，能更好的節省伺服器資源和頻寬，並且能夠更實時地進行通訊。

AJAX對比webSocket

如何使用webSocket

瀏覽器通過 JavaScript 向伺服器發出建立 WebSocket 連線的請求，連線建立以後，客戶端和伺服器端就可以通過 TCP 連線直接交換資料。
當你獲取 Web Socket 連線後，你可以通過send()方法來向伺服器傳送資料，並通過onmessage事件來接收伺服器返回的資料。
以下 API 用於建立 WebSocket 物件。

var Socket = new WebSocket(url, [protocol] );

下面貼一段例項程式碼，僅供參考

function WebSocketTest()
         {
            if ("WebSocket" in window)
            {
               alert("您的瀏覽器支援 WebSocket!");
               
               // 開啟一個 web socket
               var ws = new WebSocket("ws://localhost:9998/echo");
                
               ws.onopen = function()
               {
                  // Web Socket 已連線上，使用 send() 方法傳送資料
                  ws.send("傳送資料");
                  alert("資料傳送中...");
               };
                
               ws.onmessage = function (evt) 
               { 
                  var received_msg = evt.data;
                  alert("資料已接收...");
               };
                
               ws.onclose = function()
               { 
                  // 關閉 websocket
                  alert("連線已關閉..."); 
               };
            }
            
            else
            {
               // 瀏覽器不支援 WebSocket
               alert("您的瀏覽器不支援 WebSocket!");
            }
         }

最後在文章的結尾還是提醒一下大家，webSocket作為H5的協議，在使用上要注意相容性問題