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

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

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

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

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

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

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

講了這么多終于講到了websocket。websocket相對(duì)與HTTP協(xié)議來(lái)說(shuō)是一個(gè)持久化的協(xié)議。下面是一個(gè)典型的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

可以看到相對(duì)于HTTP的頭部多了一個(gè)頭部，其實(shí)我們就可以說(shuō)，websocket借用了HTTP的握手，是HTTP的一個(gè)解決特定問(wèn)題的補(bǔ)丁。 我們?cè)诳纯瓷厦娴念^部相對(duì)HTTP頭部都有哪些變化。

Upgrade: websocket
Connection: Upgrade

這就是websocket的核心，告訴服務(wù)器這是websocket請(qǐng)求，而不是http請(qǐng)求

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

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

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

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

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

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