摘要：服務器將資源復本寫到套接字，由客戶端讀取。釋放連接連接服務器主動關閉套接字，釋放連接客戶端被動關閉套接字，釋放連接。使用約定好的計算握手消息，并使用生成的隨機數對消息進行加密，最后將之前生成的所有信息發送給網站。

還是同以往一樣，面試會考到的地方，我都會做出標記，websocket如何在前端如何用的，這個得用，別這個都不知道，那這個教程就沒用了。如果你想對其原理進行深入了解，那么本教程將非常適合你，除此之外，我也把講解HTTP和HTTPS進行一起講解，讓你對照看著更加清除。
websocket是HTML5的一個新協議，它允許服務端向客戶端傳遞信息，實現瀏覽器和客戶端雙工通信。websocket彌補了HTTP不支持長連接的特點，那么在學習websocket之前我們先來了解以下HTTP。

HTTP是用于傳輸如HTML文件,圖片文件，查詢結果的應用層協議。它被設計于用于服務端和客戶端之間的通信。在工作的時候，客戶端打開一個連接以發出請求，然后等待服務端響應，服務端不能主動向客戶端發送請求。HTTP是無狀態協議，意味著服務器不會在兩個請求之間保留任何數據。那么這就帶來了一個問題，比如說在一個電商網站中，把某個物品加入了購物車，換了一個頁面后，在添加一個物品，兩次添加物品的請求沒有聯系，瀏覽器無法知道用戶選擇了那些商品。解決方法是在HTTP頭部中加入cookie信息這樣每次請求都能夠共享相同的狀態。

1、客戶端連接到web服務器，與web服務器的HTTP端口（默認是80）建立一個TCP套接字連接
2、發送HTTP請求 通過TCP套接字，客戶端向服務器發送一個文本的請求報文，一個請求報文由請求行，請求頭部，空行和請求數據四個部分構成
3、服務端接受請求并返回HTTP響應 web服務器解析請求，定位請求資源。服務器將資源復本寫到TCP套接字，由客戶端讀取。一個響應由狀態行、響應頭部、空行和響應數據4部分組成。
4、釋放連接TCP連接 Web服務器主動關閉TCP套接字，釋放TCP連接；客戶端被動關閉TCP套接字，釋放TCP連接。
5、客戶端瀏覽器解析HTML內容 客戶端瀏覽器首先解析狀態行，查看表明請求是否成功的狀態代碼。然后解析每一個響應頭，響應頭告知以下為若干字節的HTML文檔和文檔的字符集。客戶端瀏覽器讀取響應數據HTML，根據HTML的語法對其進行格式化，并在瀏覽器窗口中顯示。
關于HTTP內容不多講，太多了我也講不了。推薦大家去看《HTTP權威指南》很小的一本書，講的很清楚。

HTTPS是什么呢，他與HTTP的關系又是什么。在上一段講過HTTP是我們平時瀏覽網頁時使用的一種協議。HTTP協議傳輸的數據都是沒有加密的，也就是明文的，因此使用HTTP協議傳輸隱私信息非常的不安全。為了讓這些隱私數據能夠加密傳輸，便設計了SSL協議對HTTP傳輸的數據進行加密，從而誕生了HTTPS。而后對SSL進行不斷的升級，出現了TLS。但是呢，名字用久了也就產生了感情，所以也一直延續著SSL是HTTPS的代名詞的習慣。
下面這張圖能夠讓你很清晰的認識到HTTP和HTTPS之間的關系這兒有一張圖

那么HTTPS的加密到底是怎么一回事呢。

1、瀏覽器將自己支持的一套加密規則發送給網站。
2、網站從中選出一組加密算法與HASH算法，并將自己的身份信息以證書的形式發回給瀏覽器。證書里面包含了網站地址，加密公鑰，以及證書的頒發機構等信息。
3、獲得網站證書之后瀏覽器要做以下工作：
(1) 驗證證書的合法性（頒發證書的機構是否合法，證書中包含的網站地址是否與正在訪問的地址一致等），如果證書受信任，則瀏覽器欄里面會顯示一個小鎖頭，否則會給出證書不受信的提示。
(2) 如果證書受信任，或者是用戶接受了不受信的證書，瀏覽器會生成一串隨機數的密碼，并用證書中提供的公鑰加密。
(3) 使用約定好的HASH計算握手消息，并使用生成的隨機數對消息進行加密，最后將之前生成的所有信息發送給網站。
4、網站接收瀏覽器發來的數據之后要做以下的操作：
(1) 使用自己的私鑰將信息解密取出密碼，使用密碼解密瀏覽器發來的握手消息，并驗證HASH是否與瀏覽器發來的一致。
(2) 使用密碼加密一段握手消息，發送給瀏覽器。
5、瀏覽器解密并計算握手消息的HASH，如果與服務端發來的HASH一致，此時握手過程結束，之后所有的通信數據將由之前瀏覽器生成的隨機密碼并利用對稱加密算法進行加密。

講了這么多終于講到了websocket。websocket相對與HTTP協議來說是一個持久化的協議。下面是一個典型的websocket握手

GET /chat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
Sec-WebSocket-Protocol: chat, superchat
Sec-WebSocket-Version: 13
Origin: http://example.com

可以看到相對于HTTP的頭部多了一個頭部，其實我們就可以說，websocket借用了HTTP的握手，是HTTP的一個解決特定問題的補丁。 我們在看看上面的頭部相對HTTP頭部都有哪些變化。

Upgrade: websocket
Connection: Upgrade

這就是websocket的核心，告訴服務器這是websocket請求，而不是http請求

Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
Sec-WebSocket-Protocol: chat, superchat
Sec-WebSocket-Version: 13

Sec-WebSocket-Key是一個Base64 encod的值，是一個隨機生成的，用于驗證是否是真正的websocket
然后Sec-WebSocket-Protocol是一個用戶定義的字符串，用來區分同URL下，不同的服務需要不同的協議
Sec-WebSocket-Version這個不用說就是websocket的版本號。 那么服務端就會返回下列東西

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk=
Sec-WebSocket-Protocol: chat

Sec-WebSocket-Accept表示經過服務器確認，并且對客戶端的Sec-WebSocket-Key進行了加密。
Sec-WebSocket-Protocol表示最終使用的協議。
在工作的時候websocket和HTTP有哪些差異呢，下面這張圖很好的表示了區別。

可以看到HTTP獲取數據的時候，需要不斷的問服務端是否有我要的數據啊，如果有數據就返回數據，沒有就過一段時間再次詢問服務端是否有我需要的數據。那websocket呢，它只建立一次連接，那么這個連接就不會斷，服務端如果有數據的話，會自動返回數據給客戶端，還有一個問題，在HTTP中我們提到，HTTP是無狀態的，意思它健忘，上一次的請求和這次的請求都沒什么聯系，我們需要引用cookie才能解決。那么在websockt中，因為是一次長連接，那么這就不用一次次加入cookie，是不是方便很多了。 下面的代碼就是websocket在前端代碼中的應用

if ("WebSocket" in window) {
  websocket = new WebSocket("地址");
} else {
    // 不支持websocket
}
websocket.send = ("msg")
alert(websocket.readyState) // websocket的準備狀況
websocket.onerror = function(){}
websocket.onopen = function(){}
websocket.onmessage = function(){}
websocket.onclose = function(){}