《圖解HTTP》學習筆記（附帶WebSocket知識點）

挖坑埋神經病發表於2018-07-13
圖解HTTP筆記Web

HTTP

超文字傳輸協議（超文字轉移協議）

TCP/IP

網際網路相關的各類協議族的總稱，協議存在各式各樣的內容。從電纜的規格到IP地址的選定方法、雙方建立通訊的順序，以及web頁面顯示需要處理的步驟，等等。
按層次分別為：應用層、傳輸層、網路層、資料鏈路層。

從客戶端傳送請求到服務端接收請求流程如圖：

《圖解HTTP》學習筆記（附帶WebSocket知識點）

IP

IP協議的作用是把各種資料包傳送給對方。而要確保傳送到對方那裡，則需要滿足各類條件。其中最重要的條件是IP地址和MAC地址（網路卡所屬的固定地址）

《圖解HTTP》學習筆記（附帶WebSocket知識點）

TCP

TCP位於傳輸層，提供可靠的位元組流服務。為了更容易傳達大資料把資料分割，確保資料能到達目標。
為了準確無誤的將資料送達到目標出，採用三次握手策略。

《圖解HTTP》學習筆記（附帶WebSocket知識點）

DNS

DNS位於應用層的協議。提供域名到IP地址之間的解析服務。

《圖解HTTP》學習筆記（附帶WebSocket知識點）

總結

《圖解HTTP》學習筆記（附帶WebSocket知識點）

告知伺服器意圖的HTTP方法

《圖解HTTP》學習筆記（附帶WebSocket知識點）

返回結果的HTTP狀態碼

《圖解HTTP》學習筆記（附帶WebSocket知識點）

200:OK 表示從客戶端發來的請求在伺服器端被正常處理了。
204:No Content 表示客戶端發來的請求處理成功，但是服務端沒有資源科返回。一般按在只需要從客戶端往伺服器傳送資訊，而對客戶端不需要傳送新內容的情況下使用。
206:Partical Content 表示客戶端進行了範圍請求，而伺服器成功執行了這一部分的GET請求。

301:Moved Permanently 永久性重定向。該狀態碼錶示請求的資源已被分配了新的URI，以後應使用資源現在所指的URI。
302:Found 臨時性重定向。表示請求的資源已被分配了新的URI，希望使用者（本次）能使用新的URI訪問。
303:See Other 表示由於請求對應的資源存摺另一個URI，應使用GET方法定向獲取請求的資源。
304:Not Modified 表示客戶端傳送附帶條件的請求時，伺服器端允許請求訪問資源，但為滿足條件的情況。
307:Temporary Redirect 臨時性重定向，和302一樣。只是它會遵守標準，不會從POST變成GET。

400:Bed Request 表示請求報文中存在語法錯誤。當錯誤發生時，需修改請求的內容後再次傳送請求。
401:Unauthorized 表示傳送的請求需要通過HTTP認證的認證資訊。另外若之前已進行過一次請求，則表示使用者認證失敗。瀏覽器初次接收到401響應，會彈出認證用的對話視窗。
403:Forbidden 表情對請求資源的訪問被伺服器拒絕了。
404:Not Found 表明伺服器上無法找到請求的資源。

500:Internal Server Error 表明伺服器端在執行請求時發生了錯誤。也有可能是web應用存在的BUG或某些臨時的故障。
503:Service Unavailable 表明伺服器暫時處於超負載或正在進行停機維護，現在無法處理請求。

HTTP首部欄位一覽

《圖解HTTP》學習筆記（附帶WebSocket知識點）

《圖解HTTP》學習筆記（附帶WebSocket知識點）

《圖解HTTP》學習筆記（附帶WebSocket知識點）
《圖解HTTP》學習筆記（附帶WebSocket知識點）

HTTPS

  • HTTP的缺點：
    • 通訊使用明文（不加密），內容可能會被竊聽
    • 不驗證通訊方的身份，因此有可能遭遇偽裝
    • 無法證明報文的額完整性，所以有可能已遭篡改

HTTPS（全稱：Hyper Text Transfer Protocol over Secure Socket Layer 超文字傳輸安全協議），是以安全為目標的HTTP通道，簡單講是HTTP的安全版。即HTTP下加入SSL層（Secure Socket Layer，安全巢狀層）或 TSL（Transport Layer Security，安全層傳輸協議）的組合使用，HTTPS的安全基礎是SSL，因此加密的詳細內容就需要SSL。

  • HTTPS和HTTP的區別 超文字傳輸協議HTTP協議被用於在Web瀏覽器和網站伺服器之間傳遞資訊。HTTP協議以明文方式傳送內容，不提供任何方式的資料加密，如果攻擊者擷取了Web瀏覽器和網站伺服器之間的傳輸報文，就可以直接讀懂其中的資訊，因此HTTP協議不適合傳輸一些敏感資訊，比如信用卡號、密碼等。 為了解決HTTP協議的這一缺陷，需要使用另一種協議：安全套接字層超文字傳輸協議HTTPS。為了資料傳輸的安全，HTTPS在HTTP的基礎上加入了SSL協議，SSL依靠證照來驗證伺服器的身份，併為瀏覽器和伺服器之間的通訊加密。

HTTPS和HTTP的區別主要為以下四點：

  • 一、https協議需要到ca申請證照，一般免費證照很少，需要交費。
  • 二、http是超文字傳輸協議，資訊是明文傳輸，https 則是具有安全性的ssl加密傳輸協議。
  • 三、http和https使用的是完全不同的連線方式，用的埠也不一樣，前者是80，後者是443。
  • 四、http的連線很簡單，是無狀態的；HTTPS協議是由SSL+HTTP協議構建的可進行加密傳輸、身份認證的網路協議，比http協議安全。

HTTPS = HTTP + 加密 + 認證 + 完整性保護

HTTPS採用混合加密機制

《圖解HTTP》學習筆記（附帶WebSocket知識點）

WebSocket

是HTML5開始提供的一種在單個 TCP 連線上進行全雙工通訊的協議.
在WebSocket API中，瀏覽器和伺服器只需要做一個握手的動作，然後，瀏覽器和伺服器之間就形成了一條快速通道。兩者之間就直接可以資料互相傳送。

瀏覽器通過 JavaScript 向伺服器發出建立 WebSocket 連線的請求，連線建立以後，客戶端和伺服器端就可以通過 TCP 連線直接交換資料。

當你獲取 Web Socket 連線後，你可以通過 send() 方法來向伺服器傳送資料，並通過 onmessage 事件來接收伺服器返回的資料。

在程式設計中，這種設計叫做回撥，即：你有資訊了再來通知我，而不是我傻乎乎的每次跑來問你。
Websocket只需要一次HTTP握手，所以說整個通訊過程是建立在一次連線/狀態中，也就避免了HTTP的非狀態性，服務端會一直知道你的資訊，直到你關閉請求，這樣就解決了接線員要反覆解析HTTP協議，還要檢視identity info的資訊。
同時由客戶主動詢問，轉換為伺服器（推送）有資訊的時候就傳送（當然客戶端還是等主動傳送資訊過來的。。），沒有資訊的時候就交給接線員（Nginx），不需要佔用本身速度就慢的客服（Handler）了

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

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

WebSocket屬性

  • Socket.readyState（只讀屬性， readyState 表示連線狀態）
    • 0 - 表示連線尚未建立。
    • 1 - 表示連線已建立，可以進行通訊。
    • 2 - 表示連線正在進行關閉。
    • 3 - 表示連線已經關閉或者連線不能開啟。
  • Socket.bufferedAmount（只讀屬性bufferedAmount 已被 send() 放入正在佇列中等待傳輸，但是還沒有發出的 UTF-8 文字位元組數。）

WebSocket 事件

以下是 WebSocket 物件的相關事件。假定我們使用了以上程式碼建立了 Socket 物件：

  • open
    • Socket.onopen 連線建立時觸發
  • message
    • Socket.onmessage 客戶端接收服務端資料時觸發
  • error
    • Socket.onerror 通訊發生錯誤時觸發
  • close
    • Socket.onclose 連線關閉時觸發

WebSocket 方法

以下是 WebSocket 物件的相關事件。假定我們使用了以上程式碼建立了 Socket 物件：

  • Socket.send() 使用連線傳送資料
  • Socket.close() 關閉連線

WebSocket 例項

目前大部分瀏覽器支援 WebSocket() 介面，你可以在以下瀏覽器中嘗試例項： Chrome, Mozilla, Opera 和 Safari。

 <script type="text/javascript">
         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!");
            }
         }
  </script> 
複製程式碼
安裝pywebsocket

在執行以上程式前，我們需要建立一個支援 WebSocket 的服務。從 pywebsocket 下載 mod_pywebsocket ,或者使用 git 命令下載：

git clone https://github.com/google/pywebsocket.git  
複製程式碼

mod_pywebsocket 需要 python 環境支援

mod_pywebsocket 是一個 Apache HTTP 的 Web Socket擴充套件，安裝步驟如下：

  • 解壓下載的檔案。
  • 進入pywebsocket目錄。
  • 執行命令：
$ python setup.py build
$ sudo python setup.py install  
複製程式碼
  • 檢視文件說明：
$ pydoc mod_pywebsocket  
複製程式碼

開啟服務

在 pywebsocket/mod_pywebsocket 目錄下執行以下命令：

$ sudo python standalone.py -p 9998 -w ../example/  
複製程式碼

以上命令會開啟一個埠號為 9998 的服務，使用 -w 來設定處理程式 echo_wsh.py 所在的目錄。

現在我們可以在 Chrome 瀏覽器開啟前面建立的 runoob_websocket.html 檔案。如果你的瀏覽器支援 WebSocket(), 點選"執行 WebSocket"，你就可以看到整個流程各個步驟彈出的視窗

相關文章