WebSocket的原理與機制
WebSocket協議分爲兩部分：握手和數據傳輸
下面通過客戶端和服務端交互的報文對比WebSocket通訊與傳統HTTP的不同點，主要關注握手階段。
根據上面的例子，運行之後，new WebSocket實例化一個新的WebSocket客戶端對象，請求WebSocket URL爲ws://localhost:8000的服務器，打開控制檯的NetWork，客戶端WebSocket對象會自動解析並識別爲WebSocket請求，連接服務端端口，執行雙方握手過程，來自客戶端握手發送數據格式如下：
request.png
客戶端發起的WebSocket連接報文類似傳統HTTP報文，其中：
- Upgrade: websocket
Connection: Upgrade
這個是WebSocket的核心，告訴服務器，客戶端發起的是WebSocket類型請求。 - Sec-WebSocket-Key是WebSocket客戶端發送的一個 base64編碼的密文，瀏覽器隨機生成，要求服務端必須返回一個對應加密的Sec-WebSocket-Accept應答，否則客戶端會拋出Error during WebSocket handshake錯誤，並關閉連接。
- Sec-WebSocket-Version 是告訴服務器所使用的 Websocket 協議版本
服務端收到報文後會返回下列東西，表示已經接收到請求，WebSocket建立成功，來自服務器的握手如下：
response.png
- Upgrade: websocket
Connection: Upgrade
告訴客戶端即將升級的是WebSocket協議 - Sec-WebSocket-Accept的值是服務端採用與客戶端一致的密鑰計算出來後返回客戶端的
至此，HTTP已經完成它所有工作，接下來就是完全按照Websocket協議進行了。
通過查看WebSocket的原理，與HTTP對比，得出結論：
HTTP長連接中，每次數據交換除了真正的數據部分外，服務器和客戶端還要大量交換HTTP header，信息交換效率很低。Websocket協議通過第一個請求建立了TCP連接之後，之後交換的數據都不需要發送 HTTP header就能交換數據，這顯然和原有的HTTP協議有區別，所以它需要對服務器和客戶端都進行升級才能實現（主流瀏覽器都已支持HTML5）。此外還有 multiplexing、不同的URL可以複用同一個WebSocket連接等功能。這些都是HTTP長連接不能做到的。
WebSocket與Socket.io
我們在使用WebSocket協議時通常不會使用它的API來實現，而是藉助於Socket.io，Socket.io是一個WebSocket庫，包括客戶端的js和服務端的nodejs，它的目標是構建可以在不同瀏覽器和移動設備上使用的實時應用。它會自動根據瀏覽器從WebSocket、AJAX長輪詢等各種方式中選擇最佳的方式來實現網絡實時應用，也就是說如果瀏覽器對WebSocket兼容性差，Socket.io會自動選擇最佳方式實現實時通信，非常方便和人性化。
Socket.io官方文檔：https://socket.io/get-started/chat/
WebSocket兼容性
WebSocket兼容幾乎所有現代瀏覽器，IE 10+ Edge Firefox 4+ Chrome 4+ Safari 5+ Opera 11.5+
socket.io對瀏覽器做了很好的兼容。