1.web即時通信
-
描述:
即時通訊技術簡單的說就是實現(xiàn)這樣一種功能:服務器端可以即時(主動)地將數(shù)據(jù)的更新或變化反應到客戶端结洼,例如消息即時推送等功能都是通過這種技術實現(xiàn)的虏等。
-
問題點-瀏覽器限制:
在Web中通信都是瀏覽器先發(fā)送請求到服務器适荣,服務器再進行響應完成數(shù)據(jù)的即時更新腰奋。服務器端如果有了數(shù)據(jù)更新是沒有辦法主動向瀏覽器發(fā)送的脱惰。
2.解決瀏覽器限制實現(xiàn)web即時通信方案
1.短輪詢:
時序圖:
定義:
-
本質:
瀏覽器發(fā)送HTTP request從服務器獲取最新的數(shù)據(jù).
-
實現(xiàn):
特定的的時間間隔(如每1秒)轻绞,由瀏覽器對服務器發(fā)出HTTP request采记,服務器不管有沒有最新數(shù)據(jù)都直接響應,關閉連接
應用場景:
- 傳統(tǒng)的web通信模式。后臺處理數(shù)據(jù)政勃,需要一定時間唧龄,前端想要知道后端的處理結果,就要不定時的向后端發(fā)出請求以獲得最新情況奸远。
優(yōu)缺點:
-
優(yōu)點:
與普通HTTP請求無異既棺,前后端程序編寫較為容易
-
缺點:
1.請求中有大半是無用,難于維護懒叛,浪費帶寬和服務器資源丸冕;
2.響應的結果沒有順序(因為是異步請求,當發(fā)送的請求沒有返回結果的時候薛窥,后面的請求又被發(fā)送晨仑。而此時如果后面的請求比前面的請 求要先返回結果,那么當前面的請求返回結果數(shù)據(jù)時已經是過時無效的數(shù)據(jù)了).
2.長輪詢:
時序圖:
定義:
-
本質:
瀏覽器發(fā)送HTTP request從服務器獲取最新的數(shù)據(jù).
-
實現(xiàn):
客戶端向服務器發(fā)送Ajax請求拆檬,服務器接到請求后hold住連接洪己,直到有新消息才返回響應信息并關閉連接,客戶端處理完響應信息后再向服務器發(fā)送新的請求竟贯。
應用場景:
- 聊天網頁答捕,WebQQ,F(xiàn)acebookIM等.
優(yōu)缺點:
-
優(yōu)點:
在無新數(shù)據(jù)的情況下不會頻繁的請求屑那,耗費資源小拱镐。
-
缺點:
服務器阻塞連接會消耗資源,返回數(shù)據(jù)順序無保證持际,難于管理維護沃琅。
3.WebSocket協(xié)議:
協(xié)議出現(xiàn):
HTML5規(guī)范在傳統(tǒng)的web交互基礎上為我們帶來了眾多的新特性,隨著web技術被廣泛 用于web APP的開發(fā)蜘欲,這些新特性得以推廣和使用益眉,而websocket作為一種新的web通信,技術具有巨大意義。
時序圖:
定義:
-
websocket定義及與HTPP的關系:
1.WebSocket是HTML5下一種新的協(xié)議.它實現(xiàn)了瀏覽器與服務器全雙工通信(全雙工即雙方可同時向對方發(fā)送消息),能更好的節(jié)省服務器資源和帶寬并達到實時通信的目的.
2.WebSocket與Http協(xié)議一樣都是基于TCP的應用層協(xié)議。
3.WebSocket在建立握手連接時,數(shù)據(jù)是通過http協(xié)議傳輸?shù)模?01)郭脂,但是在建立連接之后,真正的數(shù)據(jù)傳輸階段是不需要http進行參與的.
WebSocket與HTTP.png
-
http 101 狀態(tài)碼:
101
狀態(tài)代碼被發(fā)送作為對包括一個請求的響應"Upgrade"
報頭信號年碘,該請求的接收方愿意升級到所期望的協(xié)議之一。如果"101 Switching Protocols"
返回了狀態(tài)碼展鸡,則標頭還必須包含Connection
和Upgrade
標頭屿衅,以描述所選協(xié)議。請參閱此機制的常用用法中的示例莹弊,以了解有關其工作原理的更多信息涤久。簡述: 告訴服務器我要升級請求協(xié)議
-
實現(xiàn):
瀏覽器向服務器發(fā)送握手請求(http101),協(xié)議由HTTP協(xié)議升級成WebSocket協(xié)議.
-
說明:
1.WebSocket未加密連接為ws://端口80,加密后的協(xié)議為wss://端口 443.
2.WebSocket是類似Socket的TCP長連接,一旦WebSocket連接建立后,服務器和瀏覽器之間可以自由的進行數(shù)據(jù)傳遞.
3.WebSocket協(xié)議中瀏覽器與服務器是完全平等的忍弛,可以相互發(fā)送請求亦可以主動斷開連接.
4.websocket握手需要借助于http協(xié)議拴竹,建立連接后通信過程使用websocket協(xié)議。
應用場景:
- 廣告推送剧罩、視頻推送、社交軟件開發(fā),替代輪詢和長輪詢座泳。
優(yōu)缺點:
-
優(yōu)點:
1.服務端和客戶端能相互的主動發(fā)送消息惠昔,建立平等對話。屬于一種服務器推送技術挑势。
2.客戶端和服務器之間交換數(shù)據(jù)簡單镇防,允許服務器直接向客戶端推送數(shù)據(jù)而不需要客戶端進行請求。
-
缺點:
主流瀏覽器支持的Web Socket版本不一致潮饱;服務端沒有標準的API来氧。
websocket實現(xiàn)原理:
-
說明:
1.WebSocket屬于HTML5的新特性
2.WebSocket基于HTTP協(xié)議(101狀態(tài)碼)來完成一部分握手.
3.瀏覽器發(fā)起協(xié)議升級請求,只支持GET方法.
WebSocket請求頭特殊內容:
1.Connection:
- 作用:
決定當前的事務完成后,是否會關閉網絡連接(tcp). - 參數(shù):
Upgrade:指示這是一個升級請求.(升級請求)
keep-alive: http1.1特性,指示網絡連接(tcp)是持久的香拉,不會關閉啦扬,使得對同一個服務器的請求可以繼續(xù)在該連接上完成。(輪詢)
其他參數(shù)詳見(https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Connection)
2.Upgrade: websocket,h2c
- 作用:
告訴服務端需要將通信協(xié)議升級到xxx.
頭指定一項或多項協(xié)議名凫碌,按優(yōu)先級排序扑毡,以逗號分隔。 - 參數(shù):
h2c:指示將協(xié)議升級為HTTP/2.0
websocket:指示將升級到WebSocket協(xié)議.
3.Sec-WebSocket-Extensions:
- 作用:
指定一個或多個協(xié)議級WebSocket擴展以要求服務器使用 - 參數(shù):
superspeed
colormode
depth=16
4.Sec-WebSocket-Key:
- 作用:
向服務器提供所需信息盛险,以確認客戶端有權請求升級到WebSocket瞄摊。當不安全的(HTTP)客戶端希望升級時,可以使用此標頭.
告訴服務器我要打開WebSocket連接. - 說明:
此標頭由選擇使用它的客戶端自動添加(瀏覽器隨機生成);不能使用XMLHttpRequest.setRequestHeader()
方法添加.
此請求升級的密鑰苦掘。如果客戶愿意换帜,可以添加它,并且服務器將在響應中包含它自己的密鑰鹤啡,在將升級響應提供給您之前惯驼,客戶將對其進行驗證。
5.Sec-WebSocket-Version
作用:
指定客戶端希望使用的WebSocket協(xié)議版本递瑰,以便服務器可以在其端確認是否支持該版本跳座。說明:
客戶端與服務器通信時希望使用的WebSocket協(xié)議版本端铛。該號碼應該是IANA WebSocket版本號注冊表中列出的最新版本。WebSocket協(xié)議的最新最終版本是版本13疲眷。
如果服務器無法使用指定版本的WebSocket協(xié)議進行通信禾蚕,它將以錯誤(例如426 Upgrade Required)響應,該錯誤的標Sec-WebSocket-Version
頭中包含帶有逗號分隔的受支持協(xié)議版本列表的標頭-
WebSocket響應
websocket響應頭.png
1.Sec-WebSocket-Accept:
說明:
1.當服務器愿意啟動WebSocket連接時狂丝,在打開握手過程中來自服務器的響應消息中將包含該消息换淆。在響應頭中,它只會出現(xiàn)一次几颜。
2.Sec-WebSocket-Accept的值解析請求頭中Sec-WebSocket-Key的數(shù)據(jù) 倍试,然后將數(shù)據(jù)加上一個魔幻字符串“258EAFA5-E914-47DA-95CA-C5AB0DC85B11”。使用SHA-1加密蛋哭,之后進行BASE-64編碼得到.