web即時通信和websocket協(xié)議升級

1.web即時通信

  • 描述:

    即時通訊技術簡單的說就是實現(xiàn)這樣一種功能:服務器端可以即時(主動)地將數(shù)據(jù)的更新或變化反應到客戶端结洼,例如消息即時推送等功能都是通過這種技術實現(xiàn)的虏等。

  • 問題點-瀏覽器限制:

    在Web中通信都是瀏覽器先發(fā)送請求到服務器适荣,服務器再進行響應完成數(shù)據(jù)的即時更新腰奋。服務器端如果有了數(shù)據(jù)更新是沒有辦法主動向瀏覽器發(fā)送的脱惰。

2.解決瀏覽器限制實現(xiàn)web即時通信方案

1.短輪詢:

時序圖:

短輪詢示意.png

定義:

  • 本質:

    瀏覽器發(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.長輪詢:

時序圖:

長輪詢示意.png

定義:

  • 本質:

    瀏覽器發(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.png

定義:

  • 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)碼展鸡,則標頭還必須包含ConnectionUpgrade標頭屿衅,以描述所選協(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請求頭特殊內容:

WebSocket請求頭.png

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編碼得到.

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末县习,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子谆趾,更是在濱河造成了極大的恐慌躁愿,老刑警劉巖,帶你破解...
    沈念sama閱讀 217,509評論 6 504
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件沪蓬,死亡現(xiàn)場離奇詭異彤钟,居然都是意外死亡,警方通過查閱死者的電腦和手機跷叉,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,806評論 3 394
  • 文/潘曉璐 我一進店門逸雹,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人云挟,你說我怎么就攤上這事梆砸。” “怎么了园欣?”我有些...
    開封第一講書人閱讀 163,875評論 0 354
  • 文/不壞的土叔 我叫張陵辫樱,是天一觀的道長。 經常有香客問我俊庇,道長狮暑,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,441評論 1 293
  • 正文 為了忘掉前任辉饱,我火速辦了婚禮搬男,結果婚禮上,老公的妹妹穿的比我還像新娘彭沼。我一直安慰自己缔逛,他們只是感情好,可當我...
    茶點故事閱讀 67,488評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著褐奴,像睡著了一般按脚。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上敦冬,一...
    開封第一講書人閱讀 51,365評論 1 302
  • 那天辅搬,我揣著相機與錄音,去河邊找鬼脖旱。 笑死堪遂,一個胖子當著我的面吹牛,可吹牛的內容都是我干的萌庆。 我是一名探鬼主播溶褪,決...
    沈念sama閱讀 40,190評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼践险!你這毒婦竟也來了猿妈?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 39,062評論 0 276
  • 序言:老撾萬榮一對情侶失蹤巍虫,失蹤者是張志新(化名)和其女友劉穎彭则,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體垫言,經...
    沈念sama閱讀 45,500評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,706評論 3 335
  • 正文 我和宋清朗相戀三年倾剿,在試婚紗的時候發(fā)現(xiàn)自己被綠了筷频。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,834評論 1 347
  • 序言:一個原本活蹦亂跳的男人離奇死亡前痘,死狀恐怖凛捏,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情芹缔,我是刑警寧澤坯癣,帶...
    沈念sama閱讀 35,559評論 5 345
  • 正文 年R本政府宣布,位于F島的核電站最欠,受9級特大地震影響示罗,放射性物質發(fā)生泄漏。R本人自食惡果不足惜芝硬,卻給世界環(huán)境...
    茶點故事閱讀 41,167評論 3 328
  • 文/蒙蒙 一蚜点、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧拌阴,春花似錦绍绘、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,779評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽厂镇。三九已至,卻和暖如春左刽,著一層夾襖步出監(jiān)牢的瞬間捺信,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,912評論 1 269
  • 我被黑心中介騙來泰國打工悠反, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留残黑,地道東北人。 一個月前我還...
    沈念sama閱讀 47,958評論 2 370
  • 正文 我出身青樓斋否,卻偏偏與公主長得像梨水,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子茵臭,可洞房花燭夜當晚...
    茶點故事閱讀 44,779評論 2 354

推薦閱讀更多精彩內容