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

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

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

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

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

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

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

講了這么多終于講到了websocket。websocket相對與HTTP協(xié)議來說是一個持久化的協(xié)議。下面是一個典型的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的核心，告訴服務(wù)器這是websocket請求，而不是http請求

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

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

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

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

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

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(){}