前端面試之websocket
座標 濱江 *小白 2019-2-15 下午
我的csdn：me.csdn.net/Chad97
個人部落格：Ruoduan.top
崗位 web前端
約的下午4點 ，因為住的較遠，從住的地方到需要面試的公司 需要坐2趟公交換2趟地鐵
行程花費大概2小時左右，當天有下小雨，路上比較泥濘，我只身一人揹著電腦包前去。
3.30左右 到，我習慣性的提前一點到，到的時候樓下的保安小哥哥，不讓進，問我來幹嘛的，我答曰：“面試的”，
"登記" ，“好的”
我發現 登記要留電話就算了，還要留身份證號？ emmmm？ 我當然是發揮我的 草書啦~ 這種東西怎麼能亂寫
好了 進入正題：
情景再現
坐電梯 來到17樓，發現前臺沒人，剛好有一個小哥哥出來，我告訴他我是來面試的，他讓我坐一會
大概等了一會，5分鐘左右，又來了一哥們 ，我回首望去，氣宇軒昂，一看定不是池中之物，頭髮油油的，
棉服牛仔褲，此人定是 修道三年以上 金丹期 後端程式設計師也，只見這哥們入門直步身後，曰：“我是來面試”，
我略微有一點尷尬 emmmmm。。。 “額... 我也是來面試的”，此時hr小姐姐出來的 讓我們坐一會，ps：因為我有一個 未做完的 webapp 個人專案，想的可能需要展示，又怕 這邊 沒有nodejs環境 沒法npm i -S大法 ,還有就是我比較 粗暴直接 ，有些東西無法語言描述 我就直接 pilipala pilipala 給你敲出來 ——奈何最後也沒用到，而且場面也一度失去控制
和這個 做安卓的 小哥哥 聊了一會，尬聊, HR小姐姐過來了 給我們發簡歷，我一想 我的簡歷是做成 pages，掛在coding上 固然沒有的 PDF ，和小姐姐解釋了一會
大概又是8分鐘左右，剛HR小姐姐，來叫過去面試，我和哪哥們異口同聲答曰：是叫我嗎？
然後 “安卓還是前端” ，小姐姐遲疑了一會 “前端” 於是乎 我背起我電腦 進去了 會議室——入門乍一看 三人，一女二男，2個男的 一個 看起來 28-30左右 一個 30以上 ，一看就是5年以上的 元嬰 大成者， 一頓 相互問候 打招呼 入座，下面 我們就這麼稱呼吧 const 男1 男2 女1 = M1 M2 W1
W1: “介紹下自己吧~”
“bala bala bala....... 從實習到換工作”
W1：“你是辭職了，還是在職？”
“辭職了”
W1:“什麼原因呢？”
“bala bala.....” 這裡小端，提醒一般情況下說一下，自己想找更好的發展，不要吐槽上一家公司，也不要抱怨，也不要說什麼 錢不到位..... 當然吹是可以的 不要太過頭
M1：“對jquery 瞭解嗎”
“瞭解的”
M1: "講一下他的原理和實現吧"
“根元素 $ ...... balbalbal”
M1：“你除了，js和 還了解其他語言嗎？”
“大學時C入門，涉及一些PHP 做過一些 ，不過現在後端語言我主要是nodejs ps：但是它還是js”
M1：“平時做專案有遇到一些特別難解決的問題嗎？最後是怎麼解決的？”
“講 ，坑 ...........................”
重點來了 ：我在講的過程中 比較激動~ 手也有跟著筆畫嘛 ，就不小心吧 眼鏡打掉了 尷尬~！！
W1：“哎呦臥槽！狂笑 hahahhahahaahah ......” 然後走出去了
WO : MMP ,老子再講我涉及的問題和知識點，不小心 額。。。。 至於這樣嗎？ 尷尬到死 ~ 同時對這個女的沒什麼好感！ (⊙o⊙)… 不淡定 淡定 我 嘴上笑嘻嘻 心裡 MMP
然後一頓 尬聊......................
M2：“後端要主動向前端傳送資料如何實現？”
“額。。。。 後端主動傳送。。。 我不請求，他憑什麼發資料給我，這不亂套了麼” ps ：這不是後端的事嗎......
M2：“比如，有一個資料要持續性 的更新，你請求的話不能 設定定時器吧，這樣效能太損耗了”
“臥槽 ！ 問到我的知識盲點了，一下子沒底了 。之前的意氣風發，也沒有了”
“開始扯皮~。。。。。。。。。”
還好人家也沒有追問 M2給人的 感覺是真正做技術的，話不多，但是刀刀致命
接下來 聊了一下 HTTP協議 TCP/IP 3次握手4次揮手 .....
越扯越遠 我超級想說 我是前端啊 大哥 求求你問我一點 框架啊 JS啊 非同步啊 相容性啊 .....
後面 W1 又進來了 還有一箇中年男人 看樣子 應該是他們的領導
最後 M1 M2 我沒什麼 要問的了
W1：“你的期望薪資是？”
“因為我還不瞭解 貴公司的福利 ，我想先聽一聽 貴公司的 薪資結構和和福利制度”
W1: "說了一下上班時間，13薪等等 ......." ps:感覺極度不專業
“ 沉思了一會 給出來 我的期望薪資”
最後重點又來了 ：
這個女的 W1：“我就不送你了 ，你走吧 balabala ” 很豪放的說
極度不舒服，讓人感覺這個女人在菜市場買菜
最後我走了 小插曲 ：“手機還在 他們那邊。。。。。。。。。 又回去拿手機”
我的 尬面 到這裡差不多了 ~
敲黑板 知識點:
回去我，思考了一下 又問了一下 我做java 的朋友【約她出來燙頭】不要問我為什麼燙頭~
最後得知 以下是我 下網搜的 後面補課的
websocket：
websocket是HTML5的一個新協議，它允許服務端向客戶端傳遞資訊，實現瀏覽器和客戶端雙工通訊。websocket彌補了HTTP不支援長連線的特點，那麼在學習websocket之前我們先來了解以下HTTP
HTTP
HTTP是用於傳輸如HTML檔案,圖片檔案，查詢結果的應用層協議。它被設計於用於服務端和客戶端之間的通訊。在工作的時候，客戶端開啟一個連線以發出請求，然後等待服務端響應，服務端不能主動向客戶端傳送請求。HTTP是無狀態協議，意味著伺服器不會在兩個請求之間保留任何資料。那麼這就帶來了一個問題，比如說在一個電商網站中，把某個物品加入了購物車，換了一個頁面後，在新增一個物品，兩次新增物品的請求沒有聯絡，瀏覽器無法知道使用者選擇了那些商品。解決方法是在HTTP頭部中加入cookie資訊這樣每次請求都能夠共享相同的狀態。
那麼HTTP請求響應的工作流程是什麼呢？
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
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。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記憶體洩露使用什麼工具 如何排除？
- 當然這個也是我後期補的 大自然的 搬運工
1、使用工具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：物件所佔的總記憶體（包含····················································） 點選上圖左上角的黑圈圈，會出現第二個記憶體快照
2、記憶體洩露的排查
將上圖框框切換到comparison（對照）選項，該檢視列出了當前檢視與上一個檢視的物件差異
#New：新建了多少物件 #Deleted：回收了多少物件 #Delta：新建的物件個數減去回收的物件個數 重點看closure（閉包），如果#Delta為正數，則表示建立了閉包函式，如果多個快照中都沒有變負數，則表示沒有銷燬閉包
再度更新 EventSource
打個連結先放在這 下班懟