## 前端之websocket

前端面試之websocket

個人csdn：me.csdn.net/Chad97
我的博客：Ruoduan.cn

---

敲黑板 知識點:

websocket：

websocket是HTML5的一個新協議，它容許服務端向客戶端傳遞信息，實現瀏覽器和客戶端雙工通訊。websocket彌補了HTTP不支持長鏈接的特色，那麼在學習websocket以前咱們先來了解如下HTTP

HTTP

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

那麼HTTP請求響應的工做流程是什麼呢？

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

HTTPS

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

那麼HTTPS的加密究竟是怎麼一回事呢。

加密過程以下:

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

websocket

講了這麼多終於講到了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(){}
複製代碼

好了 就到這裏吧~

• 補充 一個 面試題

js內存泄露使用什麼工具 如何排除？

• 固然這個也是我後期補的 大天然的 搬運工

一、使用工具Heap Profiling

①、Heap Profiling能夠記錄當前的堆內存（heap）的快照，並生成對象的描述文件，該描述文件給出了當時JS運行所用的全部對象，以及這些對象所佔用的內存大小、引用的層級關係等等。

②、JS運行的時候，會有棧內存（stack）和堆內存（heap），當咱們new一個類的時候，這個new出來的對象就保存在heap裏，而這個對象的引用則存儲在stack裏。程序經過stack的引用找到這個對象。例如：var a = [1,2,3]，a是存儲在stack中的引用，heap裏存儲着內容爲[1,2,3]的Array對象。

③、打開調試工具，點擊Memory中的Profiles標籤，選中「Take Heap Snapshot」,點擊「start」按鈕，就能夠拍在當前JS的heap快照了。

右邊視圖中列出了heap裏的對象列表。

constructor：類名 Distance：對象到根的引用層級距離 Objects Count：該類的對象數 Shallow Size：對象所佔內存（不包含內部引用的其餘對象所佔的內存） Retained Size：對象所佔的總內存（包含····················································） 點擊上圖左上角的黑圈圈，會出現第二個內存快照

二、內存泄露的排查

將上圖框框切換到comparison（對照）選項，該視圖列出了當前視圖與上一個視圖的對象差別

#New：新建了多少對象 #Deleted：回收了多少對象 #Delta：新建的對象個數減去回收的對象個數 重點看closure（閉包），若是#Delta爲正數，則表示建立了閉包函數，若是多個快照中都沒有變負數，則表示沒有銷燬閉包

再度更新 EventSource

www.cnblogs.com/accordion/p…

打個連接先放在這 下班懟