服務器主動推送新消息給客戶端瀏覽器

通常情況下,無論是瀏覽器還是移動端缴挖,與服務器之間的交互都是主動的袋狞,即客戶端向服務器端發(fā)發(fā)出請求后,服務器端將數(shù)據(jù)返回給客戶端醇疼,他們之間的對應模式為:客戶端請求--服務端響應硕并。

但若想要服務器端主動將信息推送給客戶端,例如實時金融證卷信息秧荆、訂閱新聞倔毙,天氣提醒、監(jiān)控系統(tǒng)等乙濒,都需要服務器主動推送消息給客戶端陕赃。

目前解決該問題的技術:

一、反向Ajax技術

反向Ajax技術即通過實用技術模擬服務器端和客戶端之間的響應通信來繞過Ajax只能從客戶端向服務器端發(fā)出請求的限制颁股。其說白了還是傳統(tǒng)的請求模式么库,這是在后臺做的,前臺看不出來甘有。

Http輪詢:

即定時的通過Ajax查詢服務器端诉儒,客戶端定時向服務器端發(fā)送ajax請求,服務器端接收到請求后馬上響應信息并關閉連接亏掀。要求兩次請求間隔時間必須盡可能的小忱反,但若時間間隔減小泛释,客戶端瀏覽器在相同時間內(nèi)就會發(fā)出更多的請求,這些請求中大部分都不會返回有用的數(shù)據(jù)温算,這會白白地浪費掉帶寬和處理資源怜校。

JSONP輪詢:

JSONP輪詢和HTTP輪詢類似,不同之處在于使用JSONP可以發(fā)送跨域請求(請求不屬于您所在的域)注竿,JSONP請求通城炎拢可以通過它的調(diào)用參數(shù)和返回內(nèi)容識別出來,其是可執(zhí)行的JavaScript代碼巩割。要想在 JavaScript 中實現(xiàn)輪詢裙顽,可以使用setInterval來定期地發(fā)出 Ajax 請求。

這種技術實現(xiàn)起來非常簡單喂分,但它不具有伸縮性锦庸,需要不斷地向服務器端發(fā)送消息,會對服務器造成極大的性能浪費蒲祈,加重網(wǎng)絡負載甘萧,拖累服務器。

Piggyback polling(捎帶輪詢):

捎帶輪詢是一種比輪詢更聰明的做法梆掸,它會刪除所有非必需的請求(沒有返回數(shù)據(jù)的那些)扬卷,且不存在時間間隔,客戶端在需要的時候向服務器端發(fā)送請求酸钦。不同之處在于響應的部分怪得,響應被分成兩個部分:對請求數(shù)據(jù)的響應和對服務器時間的響應。捎帶輪詢通常針對服務器端的所有 Ajax 請求可能會返回一個混合的響應卑硫。

這種方法因為客戶端控制了何時發(fā)送請求徒恋,所以沒有不返回數(shù)據(jù)的請求,對資源的消耗較少欢伏,可用在所有瀏覽器上入挣。但這仍然算是客戶端主動去請求服務器端,當服務器累積了事件想要傳送端戶端時硝拧,在客戶端沒有發(fā)送請求時也不能主動發(fā)送給客戶端径筏。

二、Comet

Comet基于HTTP長連接的“服務器推”技術障陶,是一個Web應用模型滋恬,能夠?qū)⒎掌鲗崟r地將更新信息傳送到客戶端,目前有兩種實現(xiàn)方式抱究,長輪詢和iframe流恢氯。

實現(xiàn)原理是客戶端發(fā)送請求到服務端,服務器端會阻塞請求直到有數(shù)據(jù)傳遞或超時才返回,之后客戶端 JavaScript 響應處理函數(shù)會在處理完服務器返回的信息后酿雪,再次發(fā)出請求遏暴,重新建立連接。當客戶端處理接收的數(shù)據(jù)指黎、重新建立連接時,服務器端可能有新的數(shù)據(jù)到達州丹;這些信息會被服務器端保存直到客戶端重新建立連接醋安,客戶端會一次把當前服務器端所有的信息取回。即還是要客戶端先貢獻它的“第一次”墓毒,只要客戶端先請求服務器端一次吓揪,以后兩端就熟了,服務器端想主動約客戶端就約所计。

Comet 的一大優(yōu)點是柠辞,每個客戶端始終都有一個向服務器端打開的通信鏈路。服務器端可以通過在事件到來時立即提交(完成)響應來把事件推給客戶端主胧,或者它甚至可以累積再連續(xù)發(fā)送叭首。因為請求長時間保持打開的狀態(tài),故服務器端需要特別的功能來處理所有的這些長生存期請求踪栋。

HTTP長輪詢:

長輪詢(long polling)模式涉及了打開連接的技術焙格,連接由服務器端保持著打開的狀態(tài),只要已有事件發(fā)生夷都,響應就會被提交眷唉,然后關閉連接。而后一個新的長輪詢連接就會被正在等待新事件的客戶端重新打開囤官。實現(xiàn)可以使用 script 標簽或是單純的XMLHttpRequest對象來實現(xiàn) HTTP 長輪詢冬阳。

iframe流:

iframe流方式是在頁面中插入一個隱藏的iframe,利用其src屬性在服務器和客戶端之間創(chuàng)建一條長鏈接党饮,服務器向iframe傳輸數(shù)據(jù)(通常是HTML肝陪,內(nèi)有負責插入信息的javascript),來實時更新頁面劫谅。從技術上來講见坑,兩種常見的流技術包括 Forever Iframe(或者 hidden IFrame),或是被用來在 JavaScript 中創(chuàng)建 Ajax 請求的XMLHttpRequest對象的多部分 (multi-part) 特性捏检。

iframe流方式的優(yōu)點是瀏覽器兼容好荞驴,但沒有方法來實現(xiàn)可靠的錯誤處理或跟蹤連接的 狀態(tài),且有些在緩沖方面有問題贯城。

三熊楼、WebSocket

WebSocket是一種在單個TCP連接上進行全雙工通訊的協(xié)議,它允許服務器端主動向客戶端推送數(shù)據(jù),在WebSocket API中鲫骗,瀏覽器和服務器只需要完成一次握手犬耻,兩者之間就直接可以創(chuàng)建持久性的連接,并進行雙向數(shù)據(jù)傳輸执泰。

而比較新的技術去做輪詢的效果是Comet枕磁。這種技術雖然可以雙向通信,但依然需要反復發(fā)出請求术吝。而且在Comet中计济,普遍采用的長連接,也會消耗服務器資源排苍。在這種情況下沦寂,HTML5定義了WebSocket協(xié)議,能更好的節(jié)省服務器資源和帶寬淘衙,并且能夠更實時地進行通訊传藏。WebSocket 協(xié)議在2008年誕生,2011年成為國際標準彤守。所有瀏覽器都已經(jīng)支持了毯侦。它的最大特點就是,服務器可以主動向客戶端推送信息遗增,客戶端也可以主動向服務器發(fā)送信息叫惊,是真正的雙向平等對話,屬于服務器推送技術的一種做修。

其他特點包括:

(1)建立在 TCP 協(xié)議之上霍狰,服務器端的實現(xiàn)比較容易。

(2)與 HTTP 協(xié)議有著良好的兼容性饰及。默認端口也是80和443蔗坯,并且握手階段采用 HTTP 協(xié)議,因此握手時不容易屏蔽燎含,能通過各種 HTTP 代理服務器宾濒。

(3)數(shù)據(jù)格式比較輕量,性能開銷小屏箍,通信高效绘梦。

(4)可以發(fā)送文本,也可以發(fā)送二進制數(shù)據(jù)赴魁。

(5)沒有同源限制卸奉,客戶端可以與任意服務器通信。

(6)協(xié)議標識符是ws(如果加密颖御,則為wss)榄棵,服務器網(wǎng)址就是 URL。

如:ws://example.com:80/some/path


參考資料:

Ajax和Comet:https://www.ibm.com/developerworks/cn/web/wa-reverseajax1/index.html

https://www.ibm.com/developerworks/cn/web/wa-lo-comet/

WebSocket:http://www.ruanyifeng.com/blog/2017/05/websocket.html

https://www.cnblogs.com/study-everyday/p/6140498.html

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市疹鳄,隨后出現(xiàn)的幾起案子壳繁,更是在濱河造成了極大的恐慌叶沛,老刑警劉巖拴测,帶你破解...
    沈念sama閱讀 218,755評論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件壹将,死亡現(xiàn)場離奇詭異,居然都是意外死亡腺怯,警方通過查閱死者的電腦和手機月褥,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,305評論 3 395
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來瓢喉,“玉大人,你說我怎么就攤上這事舀透∷ㄆ保” “怎么了?”我有些...
    開封第一講書人閱讀 165,138評論 0 355
  • 文/不壞的土叔 我叫張陵愕够,是天一觀的道長走贪。 經(jīng)常有香客問我,道長惑芭,這世上最難降的妖魔是什么坠狡? 我笑而不...
    開封第一講書人閱讀 58,791評論 1 295
  • 正文 為了忘掉前任,我火速辦了婚禮遂跟,結(jié)果婚禮上逃沿,老公的妹妹穿的比我還像新娘。我一直安慰自己幻锁,他們只是感情好凯亮,可當我...
    茶點故事閱讀 67,794評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著哄尔,像睡著了一般假消。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上岭接,一...
    開封第一講書人閱讀 51,631評論 1 305
  • 那天富拗,我揣著相機與錄音,去河邊找鬼鸣戴。 笑死啃沪,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的葵擎。 我是一名探鬼主播谅阿,決...
    沈念sama閱讀 40,362評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了签餐?” 一聲冷哼從身側(cè)響起寓涨,我...
    開封第一講書人閱讀 39,264評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎氯檐,沒想到半個月后戒良,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,724評論 1 315
  • 正文 獨居荒郊野嶺守林人離奇死亡冠摄,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,900評論 3 336
  • 正文 我和宋清朗相戀三年糯崎,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片河泳。...
    茶點故事閱讀 40,040評論 1 350
  • 序言:一個原本活蹦亂跳的男人離奇死亡沃呢,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出拆挥,到底是詐尸還是另有隱情薄霜,我是刑警寧澤,帶...
    沈念sama閱讀 35,742評論 5 346
  • 正文 年R本政府宣布纸兔,位于F島的核電站惰瓜,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏汉矿。R本人自食惡果不足惜崎坊,卻給世界環(huán)境...
    茶點故事閱讀 41,364評論 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望洲拇。 院中可真熱鬧奈揍,春花似錦、人聲如沸呻待。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,944評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽蚕捉。三九已至奏篙,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間迫淹,已是汗流浹背秘通。 一陣腳步聲響...
    開封第一講書人閱讀 33,060評論 1 270
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留敛熬,地道東北人肺稀。 一個月前我還...
    沈念sama閱讀 48,247評論 3 371
  • 正文 我出身青樓,卻偏偏與公主長得像应民,于是被迫代替她去往敵國和親话原。 傳聞我的和親對象是個殘疾皇子夕吻,可洞房花燭夜當晚...
    茶點故事閱讀 44,979評論 2 355

推薦閱讀更多精彩內(nèi)容

  • 很多應用譬如監(jiān)控、即時通信繁仁、即時報價系統(tǒng)都需要將后臺發(fā)生的變化實時傳送到客戶端而無須客戶端不停地刷新涉馅、發(fā)送請求。本...
    40ab6525bf35閱讀 679評論 0 4
  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理黄虱,服務發(fā)現(xiàn)稚矿,斷路器,智...
    卡卡羅2017閱讀 134,659評論 18 139
  • 因為懂得,所以慈悲 讀到張愛玲的這句朱灿,一種默然的感覺昧识,理不清,道不明盗扒,是什么讓這個一代才女這樣豁達滞诺,這樣慈悲,卻奈...
    康家少年閱讀 572評論 0 0
  • 第十課 作業(yè)1: 三朝回門环疼,卑卑褪下了青狐大衣,里面穿著泥金緞短袖旗袍朵耕。人像金瓶里的一朵梔子花炫隶。淡白的鵝蛋臉,雖然...
    胖子荷包蛋蛋閱讀 256評論 2 2
  • 天山綿延近阎曹, 長路無盡頭伪阶。 金戈傲鐵骨, 惟念繞指柔处嫌。
    天山路遠閱讀 181評論 0 0