1、WebSocket 通信,2017.10.26,背景,實(shí)時(shí)數(shù)據(jù) 游戲 聊天 SNS(社交網(wǎng)絡(luò)服務(wù)) 直播,年輕的年輕人啊,創(chuàng)新無(wú)限的未來(lái),常用web實(shí)時(shí)技術(shù),年輕的年輕人啊,創(chuàng)新無(wú)限的未來(lái),在客戶端的頁(yè)面使用隱藏窗口向服務(wù)端發(fā)出長(zhǎng)連接請(qǐng)求。服務(wù)器端接到這個(gè)請(qǐng)求后作出回應(yīng)并不斷更新連接狀態(tài)以保證客戶端和服務(wù)器端的連接不過(guò)期。,流,輪詢,年輕的年輕人啊,創(chuàng)新無(wú)限的未來(lái),輪詢,場(chǎng)景再現(xiàn)：客戶端：啦啦啦，有沒(méi)有新信息(Request)服務(wù)端：沒(méi)有（Response）客戶端：啦啦啦，有沒(méi)有新信息(Request)服務(wù)端：沒(méi)有。（Response）客戶端：啦啦啦，有沒(méi)有新信息(Request)服務(wù)端：你好

2、煩啊，沒(méi)有啊。（Response）客戶端：啦啦啦，有沒(méi)有新消息（Request）服務(wù)端：好啦好啦，有啦給你。（Response）客戶端：啦啦啦，有沒(méi)有新消息（Request）服務(wù)端：。沒(méi)。沒(méi)。沒(méi)有（Response）,年輕的年輕人啊,創(chuàng)新無(wú)限的未來(lái),長(zhǎng)輪詢,年輕的年輕人啊,創(chuàng)新無(wú)限的未來(lái),長(zhǎng)輪詢,場(chǎng)景再現(xiàn)：客戶端：啦啦啦，有沒(méi)有新信息，沒(méi)有的話就等有了才返回給我吧（Request）服務(wù)端：額。 等待到有消息的時(shí)候。來(lái) 給你（Response）客戶端：啦啦啦，有沒(méi)有新信息，沒(méi)有的話就等有了才返回給我吧（Request）,年輕的年輕人啊,創(chuàng)新無(wú)限的未來(lái),流,流技術(shù)方案通常就是使用一個(gè)隱藏的窗口向服

3、務(wù)器端發(fā)起一個(gè)長(zhǎng)連接的請(qǐng)求，服務(wù)端接收到這個(gè)請(qǐng)求以后做出回應(yīng)，并不斷跟新連接狀態(tài)以保證客戶端和服務(wù)端不過(guò)期，通過(guò)這種機(jī)制將服務(wù)端的信息源源不斷的推向客戶端,年輕的年輕人啊,創(chuàng)新無(wú)限的未來(lái),存在問(wèn)題,非真正實(shí)時(shí)技術(shù) 使用 Ajax 方式模擬實(shí)時(shí)效果，每次客戶端和服務(wù)器端交互，都是一次 HTTP 的請(qǐng)求和應(yīng)答過(guò)程，且每次的 HTTP 請(qǐng)求和應(yīng)答都帶有完整 HTTP 頭信息，增加傳輸?shù)臄?shù)據(jù)量,年輕的年輕人啊,創(chuàng)新無(wú)限的未來(lái),Websocket,Websocket是一種雙向通信協(xié)議，在建立連接后，websocket服務(wù)器和瀏覽器客戶端都能主動(dòng)向?qū)Ψ桨l(fā)送和接收數(shù)據(jù)，如同socket； websocket

4、需要類似tcp的客戶端和服務(wù)端通過(guò)握手連接，連接成功后才能相互通信。,年輕的年輕人啊,創(chuàng)新無(wú)限的未來(lái),Websocket,年輕的年輕人啊,創(chuàng)新無(wú)限的未來(lái),圖2. 傳統(tǒng)http客戶端服務(wù)器交互,圖1. websocket客戶端服務(wù)器交互,Websocket,年輕的年輕人啊,創(chuàng)新無(wú)限的未來(lái),Websocket類似socket的http長(zhǎng)連接通信方式，一旦連接建立，后續(xù)數(shù)據(jù)都以幀形式傳輸，在客戶端或服務(wù)器斷開(kāi)連接前，不需要客戶端和服務(wù)器重新發(fā)起連接請(qǐng)求，在高并發(fā)及負(fù)載流量大的情況下，可節(jié)省網(wǎng)絡(luò)帶寬資源，且客戶端發(fā)送和接收信息是在同一個(gè)持久連接上發(fā)起，實(shí)時(shí)性優(yōu)勢(shì)明顯。 傳統(tǒng)http每次請(qǐng)求-應(yīng)答都需要

5、客戶端服務(wù)器建立連接模式。,Websocket,年輕的年輕人啊,創(chuàng)新無(wú)限的未來(lái),客戶端到服務(wù)端,GET /chat HTTP/1.1 Host: Connection: Upgrade Sec-WebSocket-Key2: 12998 5 Y3 1 .P00 Upgrade: WebSocket Sec-WebSocket-Key1: 41 46546xW%0l 1 5 Origin: 8-byte security key,GET /chat HTTP/1.1 ：打開(kāi)階段握手，使用http協(xié)議。 Upgrade：websocket，表示請(qǐng)求為特殊http請(qǐng)求，請(qǐng)求的目的是要將客戶端和服務(wù)端

6、的通信協(xié)議從http上升為websocket； Sec-websocket-key、8-byte security key，客戶端向服務(wù)端提供的握手信息；,Websocket,年輕的年輕人啊,創(chuàng)新無(wú)限的未來(lái),HTTP/1.1 101 WebSocket Protocol Handshake Upgrade: WebSocket Connection: Upgrade WebSocket-Origin: WebSocket-Location: ws:/ 16-byte hash response,16-byte hash response：服務(wù)端解析客戶端頭信息，生成16位安全密鑰返回給客戶端，

7、以表明服務(wù)端獲取了客戶端的請(qǐng)求； 一旦連接建立，后續(xù)就可以通過(guò)tcp通信（雙向傳輸數(shù)據(jù)）。,服務(wù)端到客戶端,數(shù)據(jù)通信,年輕的年輕人啊,創(chuàng)新無(wú)限的未來(lái),WebSocket的數(shù)據(jù)在發(fā)送時(shí)，被組織為依次序的一串?dāng)?shù)據(jù)幀(data frame)，然后進(jìn)行傳送。 傳送的幀類型分為兩類：數(shù)據(jù)幀(data frame)和控制幀(Control frame)。數(shù)據(jù)幀可以攜帶文本數(shù)據(jù)或者二進(jìn)制數(shù)據(jù)；控制幀包含關(guān)閉幀(Close frame)和Ping/Pong幀,數(shù)據(jù)通信,年輕的年輕人啊,創(chuàng)新無(wú)限的未來(lái),MASK值:從客戶端進(jìn)行發(fā)送的幀必須置此位為1，從服務(wù)器發(fā)送的幀必須置為0。如果任何一方收到的幀不符合此要求，

8、則發(fā)送關(guān)閉幀(Close frame)關(guān)閉連接。 opcode的值： 0 x1代表此幀為文本數(shù)據(jù)幀, 0 x2代表此幀為二進(jìn)制數(shù)據(jù)幀, 0 x8為控制幀中的連接關(guān)閉幀(close frame), 0 x9為控制幀中的Ping幀, 0 xA(十進(jìn)制的10)為控制幀中的Pong幀。 Ping/Pong幀： Ping幀和Pong幀用于連接的?；?keepalive)或者診斷對(duì)端是否在線。這兩種幀的發(fā)送和接收不對(duì)WEB應(yīng)用公開(kāi)接口，由實(shí)現(xiàn)WebSocket協(xié)議的底層應(yīng)用(例如瀏覽器)來(lái)實(shí)現(xiàn)它。,瀏覽器支持情況,年輕的年輕人啊,創(chuàng)新無(wú)限的未來(lái),主流的瀏覽器（包括 PC 和移動(dòng)終端）現(xiàn)已都支持標(biāo)準(zhǔn)的 HTML5 的 WebSocket API，這意味著客戶端的 Web