socket.io原理和實戰

因爲最近寫項目要使用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很簡潔，在不少實時場景下都頗有用。