WebSocket全雙工通訊入門教程

阿新 • • 發佈：2019-01-20

1. 什麼是WebSocket
         WebSocket protocol 是HTML5一種新的協議。它實現了瀏覽器與伺服器全雙工通訊(full-duplex)。一開始的握手需要藉助HTTP請求完成。
              1. 傳統的web通訊方式
                     1. 工作模式：客戶端請求-服務端響應
                     2. 適用場景：資訊變化不是特別頻繁的場合，如網頁重新整理
                     3. 不適用場景：線上遊戲，實時監控
                     4. 問題

                        佔用網路傳輸頻寬：每次請求和應答都帶有完整的Http頭，這就增加了每次傳輸的資料量。
                        實時性差：在全雙工通訊時常採用輪詢進行。

              2. 改進版web通訊方式
                     1. 輪詢

1. 基於polling（輪詢）技術：以頻繁請求方式來保持客戶端和服務端的同步
2. 問題：客戶端的頻繁的請求，服務端的資料無變化，造成通訊低效

2. 長輪詢

                              1. 當服務端沒有資料更新的時候，連線會保持一段時間週期知道資料或者狀態改變或者過期，依次減少無效的客戶端和服務端的互動
                              2. 當服務端資料變更頻繁的話，這種機制和定時輪詢毫無區別
                     3. 流技術

1. 在客戶端頁面通過一個隱藏的視窗向服務端發出一個長連線請求。服務端接到這個請求後作出迴應並不斷更新連結狀態以保證客戶端和服務端的連線不過期。

                              2. 瀏覽器設計相容和併發處理問題。
                     4. websocket
                              1. 概念：是html5開始提供的一種在單個TCP連線上進行全雙工通訊協議。Websocket通訊協議與2011年倍IETF定為標準RFC 6455，Websocket API被W3C定為標準。
                              2. 原理和TCP一樣，只需做一個握手動作，就可以形成一條快速通道。

1. 客戶端發起http請求，附加頭資訊為：“Upgrade Websocket”

2. 服務端解析，並返回握手資訊，從而建立連線

3. 傳輸資料（雙向）

                                    4. 斷開連線
                              3. 資料傳輸過程
                                    1. 以幀形式進行傳輸
                                             1. 大資料分片
                                             2. 支援邊生成資料，把你傳遞訊息
                                    2. 說明
                                             1. 客戶端到服務端的資料幀必須進行掩碼處理，服務端拖接收到未經掩碼處理的資料幀，須主動關閉連線
                                             2. 服務端到客戶端的資料一定不能加掩碼，客戶端接收到經過掩碼的實際幀，須主動關閉連線
                                             3. 發現錯誤的一方可以傳送close幀，關閉連線。
                              4. 優勢
                                    1. 資料傳輸量
                                    2. 穩定性
                              5. 支援瀏覽器
                                    1. Firefox 4、Chrome 4、Opera 10.70以及Safari 5等瀏覽器的支援

2. websocket案例說明
              1. 客戶端
                     1. 建立Websocket例項
ws = new WebSocket("ws://127.0.0.1:10000/Server_Test.php");
                              1. 伺服器IP：ws://127.0.0.1
                              2. 伺服器埠：10000
                              3. 服務程式：Server_Test.php
                     2. 建立連線後回撥函式
                        ws.onopen = function(event){}
                     3. 收到服務端訊息後回撥函式
                        ws.onmessage = function(event){}
                     4. 關閉連線後回撥函式
                        ws.onclose = function(event){}
                     5. 連線錯誤後回撥函式
ws.onerror = function(event)
                     6. 傳送資料
ws.send('伺服器，您好');
                     7. 檢視當前連線狀態
alert(ws.readyState)

            2. 服務端
                     1. 建立服務端WebSocket物件，等待客戶端接入
$master  = WebSocket("localhost",10000);
首先建立Websocket，然後服務端監聽相應埠，等待客戶端接入
function WebSocket($address,$port){
      $master=socket_create(AF_INET, SOCK_STREAM, SOL_TCP)    or die("socket_create() failed");
      socket_set_option($master, SOL_SOCKET, SO_REUSEADDR, 1)  or die("socket_option() failed");
      socket_bind($master, $address, $port)                   or die("socket_bind() failed");
      socket_listen($master,20)                               or die("socket_listen() failed");
      echo "Server Started : ".date('Y-m-d H:i:s')."\n";
     echo "Master socket  : ".$master."\n";
      echo "Listening on : ".$address." port ".$port."\n\n";
      return $master;
  }
                     2. 從WebSocket中讀取資料
$buffer = socket_read($socket,2048);
                     3. 當收到客戶端首次連線請求後，生成握手資訊並回復
$return_str = dohandshake($buffer);
socket_write($socket,$return_str,strlen($return_str));
                     4. 連線後，即可接收並解析出客戶端的資料
$buffer = socket_read($socket,2048);
$data_str = decode($buffer);
                     5. 接收到使用者資料後，直接回復客戶端
socket_write($socket,$return_str,strlen($return_str));
                     6. 斷開連線
socket_close($socket);
                     7. 以上6步完成全雙工通訊
  3. 本案例說明

                     1. 目前只可傳文字，byte傳輸還需進一步研究

3. 案例執行流程
首先需要安裝PHP study，然後將服務端程式碼放到PHP study可執行目錄下，最後使用瀏覽器開啟客戶端程式碼去訪問伺服器即可進行通訊。

            1. 安裝PHP study，然後將PHP檔案放到 D:\phpStudy\WWW

2. 設定PHP study埠：

3. 在客戶端程式中通過url去訪問伺服器：

      4. 除錯說明

            1. 客戶端程式碼
                     1. html程式碼使用Hbuilder編輯完成
                     2. 列印資訊使用
console.log("已經與伺服器建立了連線rn當前連線狀態：" + this.readyState);
                     3. 列印資訊可以實時輸出到控制檯
            2. 服務端程式碼
                     1. 服務端程式碼編輯同樣在Hbuilder中完成
                     2. 服務端程式碼除錯工具推薦使用Xdebug，我們目前使用的是列印錯誤日誌方式進行除錯
6. 原始碼
請到 http://www.dingwave.com/bbs/forum.php?mod=viewthread&tid=372&extra=page%3D1 下載

WebSocket全雙工通訊入門教程

WebSocket全雙工通訊入門教程

網路通訊-----使用瀏覽器進行全雙工通訊的 WebSocket

讓C/S進行全雙工通訊的WebSocket協議

Java網路程式設計，socket實現一對一全雙工通訊聊天功能

python寫基於c/s框架的即時聊天——（一）基於udp的全雙工通訊

USART串列埠全雙工與SPI全雙工通訊的區別！

Python socket實現多對多全雙工通訊

18 11 11 網路通訊相互互動單工半雙工全雙工

資料傳輸方式（並行/序列通訊；同步/非同步；單工、半雙工、全雙工）

JAVA入門到精通-第86講-半雙工/全雙工

通訊傳輸，全雙工、半雙工、單向

兩片STM32使用HAL完成SPI全雙工主從通訊

共享內存：全雙工匿名管道

長連接和短連接，單工、半雙工和全雙工

Python實現多用戶全雙工聊天(一對一)

半雙工全雙工

單工、半雙工和全雙工的區別

Linux 檢視網絡卡全雙工還是半雙工以及設定網絡卡為半雙工

全雙工、半雙工和單工

MT7688 坑爹的 SPI Master 半雙工全雙工問題

WebSocket全雙工通訊入門教程

相關推薦