socket.io原理和實戰

ivyzhang 發布于2019-08-22 13:59 / 2307人閱讀

摘要：就是為了解決這一問題產生的，現在已經寫入標準，主流瀏覽器基本支持。

由于最近寫項目要使用socekt.io技術，于是研究了一段時間，把自己早期學習階段寫的小游戲改造了一下，變成了一個比較完整的小程序。點擊這里可以體驗游戲,建議使用手機模式查看，也可以下載打包好的webapp，安卓版已上架酷安市場,掃碼可下載體驗：

整個東西其實很簡單，游戲界面使用canvas繪制，AI算法來自慕課網學習視頻，聯機對戰使用socket.io實現實時推送，完整代碼已經開源，點擊傳送，喜歡的給個star，歡迎fork，更歡迎指出不足，提出建議。

關于socket.io

在我接觸過的小型類庫框架中，socket.io絕對是最驚艷的一個，它可以只使用幾行代碼就能實現簡單的聊天小程序。一直以來我都在想找機會應用到開發中，最近在寫項目的時候剛好有需求了。在正式使用之前先做了一點小研究，又寫了一個小的demo，在此記錄一點心得。

什么是socket.io

Socket.IO是一個支持基于事件的實時雙向通信的類庫，它可以在任何平臺，瀏覽器或設備上工作，同時在可靠性和速度方面有保證，可以構建實時性很強的應用。它兼容性極好，對于不兼容的環境采用降級策略，支持的瀏覽器最低達IE5.5。

為什么要有socket.io，它是怎么工作的，為什么它能夠實現實時通訊。想要理解socket.io，還要從網絡基礎來談起。

從輪詢到websocket

先來看一個比較新的網絡應用層協議：websocket。在傳統網絡應用中，大多數場景下都在使用http協議，那么有沒有http處理不了或者不容易處理的問題呢？考慮一個場景，如果服務器想要給客戶端推送消息，應該如何實現。在http協議之下，網絡通信是只能由客戶端向服務端發起的，服務器是沒辦法主動向客戶端推送消息的，客戶端要想接收服務器的消息，就得不停地向服務器發送請求，這種方式叫輪詢。輪詢的方式開銷是很大的，因為不管有沒有消息，客戶端總是要去問服務器，不但低效還浪費資源，顯然這不是一個很好的解決方案。還有一種長輪詢，客戶端發送請求之后一直等，直到服務器有返回再建立新的連接。同樣也占用著不必要的資源。這一切的根源就是沒有客戶端的請求服務器是沒辦法和客戶端通信的，這就是單向通信的缺陷，我們需要一種能夠實現客戶端服務端雙向通信的技術。

websocket就是為了解決這一問題產生的，現在已經寫入標準，主流瀏覽器基本支持。websocket同樣是建立在TCP之上的，請求協議為ws或wss（加密）后面地址書寫和http基本沒區別，像下面這樣

ws://server.example.com/chat

這就是一次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很像，因為它握手階段是要借助http協議的，不過在請求中加入了Upgrade相關內容，而相應信息是這樣的：

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

服務端也響應了Upgrade，此時，已經和http沒什么關系了，協議升級后雙方建立的就是websocket連接了。只建立了一次連接，現在客戶端和服務端可以實現應用層全雙工通信了,整個過程如圖所示：

socket.io的實現

socket.io想實現雙向通信，當然websocket是必不可少的技術了，不過socket.io不僅僅是websocket的封裝，在不支持websocket的環境中，socket.io還有多種輪詢解決方案，確保它能夠正常運行。

socket.io把看起來很復雜，很難實現的工作變得很容易，它的api很簡潔，在很多實時場景下都很有用。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/92725.html

大前端2018現在上車還還得及么

摘要：面向對象三大特征繼承性多態性封裝性接口。第五階段封裝一個屬于自己的框架框架封裝基礎事件流冒泡捕獲事件對象事件框架選擇框架。核心模塊和對象全局對象，，，事件驅動，事件發射器加密解密，路徑操作，序列化和反序列化文件流操作服務端與客戶端。第一階段： HTML+CSS:HTML進階、CSS進階、div+css布局、HTML+css整站開發、 JavaScript基礎：Js基礎教程、js內置對...

stormgens 2019-08-01 18:25 評論0 收藏0
大前端2018現在上車還還得及么

摘要：面向對象三大特征繼承性多態性封裝性接口。第五階段封裝一個屬于自己的框架框架封裝基礎事件流冒泡捕獲事件對象事件框架選擇框架。核心模塊和對象全局對象，，，事件驅動，事件發射器加密解密，路徑操作，序列化和反序列化文件流操作服務端與客戶端。第一階段： HTML+CSS:HTML進階、CSS進階、div+css布局、HTML+css整站開發、 JavaScript基礎：Js基礎教程、js內置對...

mylxsw 2019-08-22 13:49 評論0 收藏0
Nodejs爬蟲實戰項目之鏈家

摘要：很基礎，不喜勿噴轉載注明出處爬蟲實戰項目之鏈家效果圖思路爬蟲究竟是怎么實現的通過訪問要爬取的網站地址，獲得該頁面的文檔內容，找到我們需要保存的數據，進一步查看數據所在的元素節點，他們在某方面一定是有規律的，遵循規律，操作，保存數據。說明作為一個前端界的小學生，一直想著自己做一些項目向全棧努力。愁人的是沒有后臺，搜羅之后且學會了nodejs和express寫成本地的接口給前端頁面調用...

noONE 2019-08-22 17:10 評論0 收藏0
Nodejs爬蟲實戰項目之鏈家

摘要：很基礎，不喜勿噴轉載注明出處爬蟲實戰項目之鏈家效果圖思路爬蟲究竟是怎么實現的通過訪問要爬取的網站地址，獲得該頁面的文檔內容，找到我們需要保存的數據，進一步查看數據所在的元素節點，他們在某方面一定是有規律的，遵循規律，操作，保存數據。說明作為一個前端界的小學生，一直想著自己做一些項目向全棧努力。愁人的是沒有后臺，搜羅之后且學會了nodejs和express寫成本地的接口給前端頁面調用...

MartinDai 2019-06-26 17:39 評論0 收藏0