【Web微知識系列】雙向溝通的技術，什麼是Websocket？

• 【Web微知識系列】訂閱技術的基石，RSS Feed是什麼？
• 【Web微知識系列】系統之間的訂閱機制，Webhook是什麼？

簡介

Websocket與TCP、HTTP的關係

• Websocket與HTTP屬於應用層， 同樣都是基於TCP來進行傳輸， 而進行Handshake時也會透過HTTP進行， 但真正傳輸資料時就不必經過HTTP的方式。

• 與HTTP一樣可以進行加密傳輸， HTTP的部份為https， Websocket則為wss。

為什麼要使用Websocket？

Polling

Long-Polling

Server Sent Events

Websocket

建立連接

• 以javascript來說， 通常我們在建立Websocket物件的時候， Browser就開始進行Handshake的過程。

var socket = new WebSocket("ws://127.0.0.1:8080/ws")

• 建立連線成功後，會發送支援的版本號、主機地址...等資訊給Server端。

Accept-Encoding: gzip, deflate

Accept-Language: zh-TW,zh;q=0.9,en-US;q=0.8,en;q=0.7

Cache-Control: no-cache

Connection: Upgrade

Host: 127.0.0.1:8080

Origin: http:*//127.0.0.1:8080*

Pragma: no-cache

Sec-WebSocket-Extensions: permessage-deflate; client_max_window_bits

Sec-WebSocket-Key: sZrnswRjM0ZXxxmAIJhrvQ==

Sec-WebSocket-Version: 13

Upgrade: websocket

User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.141 Safari/537.36

• Server端收到後會回傳狀態碼101及相關資訊。

HTTP/1.1 101 Switching Protocols

Upgrade: websocket

Connection: Upgrade

Sec-WebSocket-Accept: 3zg/SIKvYpT51lJJKbF4WjFuCTY=

Access-Control-Allow-Origin: *

Access-Control-Allow-Headers: Accept, Content-Type, Content-Length, Accept-Encoding, X-CSRF-Token, Authorization

• 如果過程失敗的話就會進入onerror的handler， 成功的話就代表可以開始傳輸資料。

如何確保連線狀態

1. 長時間不發送訊息或者防火牆阻擋了連接， Server端無法得知。
2. Client端與Server端之間斷開網路， Server端也未感知。

1. 由發送端發送ping訊號給接收端。
2. 接收端成功收到之後， 回應pong訊號給發送端。
3. 成功接收到pong訊號， 代表連線正常。

發送端 -> ping -> 接收端

發送端 <- pong <- 接收端

📝 Web微知識系列文章

• 【Web微知識系列】 關於Web的同源政策(Same Origin Policy)
• 【Web微知識系列】 跨來源資源共用（Cross-Origin Resource Sharing, CORS）
• 【Web微知識系列】 你的資料如何被偷走？ Web安全篇 - 跨站請求偽造(CSRF )
• 【Web微知識系列】 潛藏的危機 - 跨網站指令碼(XSS)
• 【Web微知識系列】 關於Web的安全內容政策 - Content Security Policy (CSP)
• 【Web微知識系列】訂閱技術的基石，RSS Feed是什麼？
• 【Web微知識系列】系統之間的訂閱機制，Webhook是什麼？