還是同以往一樣，面試會(huì)考到的地方，我都會(huì)做出標(biāo)記，websocket如何在前端如何用的，這個(gè)得用，別這個(gè)都不知道，那這個(gè)教程就沒用了。如果你想對其原理進(jìn)行深入了解，那么本教程將非常適合你，除此之外，我也把講解HTTP和HTTPS進(jìn)行一起講解，讓你對照看著更加清除。

**websocket是HTML5的一個(gè)新協(xié)議，它允許服務(wù)端向客戶端傳遞信息，實(shí)現(xiàn)瀏覽器和客戶端雙工通信。**websocket彌補(bǔ)了HTTP不支持長連接的特點(diǎn)，那么在學(xué)習(xí)websocket之前我們先來了解以下HTTP。

HTTP

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

那么HTTP請求響應(yīng)的工作流程是什么呢？

1、客戶端連接到web服務(wù)器，與web服務(wù)器的HTTP端口（默認(rèn)是80）建立一個(gè)TCP套接字連接

2、發(fā)送HTTP請求 通過TCP套接字，客戶端向服務(wù)器發(fā)送一個(gè)文本的請求報(bào)文，一個(gè)請求報(bào)文由請求行，請求頭部，空行和請求數(shù)據(jù)四個(gè)部分構(gòu)成

3、服務(wù)端接受請求并返回HTTP響應(yīng) web服務(wù)器解析請求，定位請求資源。服務(wù)器將資源復(fù)本寫到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)行，查看表明請求是否成功的狀態(tài)代碼。然后解析每一個(gè)響應(yīng)頭，響應(yīng)頭告知以下為若干字節(jié)的HTML文檔和文檔的字符集?？蛻舳藶g覽器讀取響應(yīng)數(shù)據(jù)HTML，根據(jù)HTML的語法對其進(jìn)行格式化，并在瀏覽器窗口中顯示。

關(guān)于HTTP內(nèi)容不多講，太多了我也講不了。推薦大家去看《HTTP權(quán)威指南》很小的一本書，講的很清楚。

HTTPS

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

下面這張圖能夠讓你很清晰的認(rèn)識到HTTP和HTTPS之間的關(guān)系這兒有一張圖

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

加密過程如下:

1、瀏覽器將自己支持的一套加密規(guī)則發(fā)送給網(wǎng)站。

2、網(wǎng)站從中選出一組加密算法與HASH算法，并將自己的身份信息以證書的形式發(fā)回給瀏覽器。證書里面包含了網(wǎng)站地址，加密公鑰，以及證書的頒發(fā)機(jī)構(gòu)等信息。

3、獲得網(wǎng)站證書之后瀏覽器要做以下工作：

(1) 驗(yàn)證證書的合法性（頒發(fā)證書的機(jī)構(gòu)是否合法，證書中包含的網(wǎng)站地址是否與正在訪問的地址一致等），如果證書受信任，則瀏覽器欄里面會(huì)顯示一個(gè)小鎖頭，否則會(huì)給出證書不受信的提示。

(2) 如果證書受信任，或者是用戶接受了不受信的證書，瀏覽器會(huì)生成一串隨機(jī)數(shù)的密碼，并用證書中提供的公鑰加密。

(3) 使用約定好的HASH計(jì)算握手消息，并使用生成的隨機(jī)數(shù)對消息進(jìn)行加密，最后將之前生成的所有信息發(fā)送給網(wǎng)站。

4、網(wǎng)站接收瀏覽器發(fā)來的數(shù)據(jù)之后要做以下的操作：

(1) 使用自己的私鑰將信息解密取出密碼，使用密碼解密瀏覽器發(fā)來的握手消息，并驗(yàn)證HASH是否與瀏覽器發(fā)來的一致。

(2) 使用密碼加密一段握手消息，發(fā)送給瀏覽器。

5、瀏覽器解密并計(jì)算握手消息的HASH，如果與服務(wù)端發(fā)來的HASH一致，此時(shí)握手過程結(jié)束，之后所有的通信數(shù)據(jù)將由之前瀏覽器生成的隨機(jī)密碼并利用對稱加密算法進(jìn)行加密。

websocket

講了這么多終于講到了websocket。websocket相對與HTTP協(xié)議來說是一個(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

可以看到相對于HTTP的頭部多了一個(gè)頭部，其實(shí)我們就可以說，websocket借用了HTTP的握手，是HTTP的一個(gè)解決特定問題的補(bǔ)丁。 我們在看看上面的頭部相對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是一個(gè)Base64 encod的值，是一個(gè)隨機(jī)生成的，用于驗(yàn)證是否是真正的websocket

然后Sec-WebSocket-Protocol是一個(gè)用戶定義的字符串，用來區(qū)分同URL下，不同的服務(wù)需要不同的協(xié)議

Sec-WebSocket-Version這個(gè)不用說就是websocket的版本號。 那么服務(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)過服務(wù)器確認(rèn)，并且對客戶端的Sec-WebSocket-Key進(jìn)行了加密。

Sec-WebSocket-Protocol表示最終使用的協(xié)議。

在工作的時(shí)候websocket和HTTP有哪些差異呢，下面這張圖很好的表示了區(qū)別。

可以看到HTTP獲取數(shù)據(jù)的時(shí)候，需要不斷的問服務(wù)端是否有我要的數(shù)據(jù)啊，如果有數(shù)據(jù)就返回?cái)?shù)據(jù)，沒有就過一段時(shí)間再次詢問服務(wù)端是否有我需要的數(shù)據(jù)。那websocket呢，它只建立一次連接，那么這個(gè)連接就不會(huì)斷，服務(wù)端如果有數(shù)據(jù)的話，會(huì)自動(dòng)返回?cái)?shù)據(jù)給客戶端，還有一個(gè)問題，在HTTP中我們提到，HTTP是無狀態(tài)的，意思它健忘，上一次的請求和這次的請求都沒什么聯(lián)系，我們需要引用cookie才能解決。那么在websockt中，因?yàn)槭且淮伍L連接，那么這就不用一次次加入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(){}