webSocket原理及客戶端實(shí)戰(zhàn):接收實(shí)時(shí)消息

需求:

需求實(shí)現(xiàn)監(jiān)聽服務(wù)端推送過來的消息霹肝,效果見下圖:
用戶某一個(gè)動(dòng)作觸發(fā)消息發(fā)送瑟幕,在監(jiān)聽接口收到消息并展示出來。


接收實(shí)時(shí)消息.gif

解決方案:

ajax輪詢(短輪詢)

原理:客戶端每隔幾秒就發(fā)送一次請(qǐng)求创夜,服務(wù)器接到請(qǐng)求后馬上返回響應(yīng)信息并關(guān)閉連接溶耘。
優(yōu)點(diǎn):程序編寫比較容易。
缺點(diǎn):請(qǐng)求次數(shù)多鼻忠,請(qǐng)求中有大半是無用涵但,浪費(fèi)帶寬和服務(wù)器資源。

long poll (長(zhǎng)輪詢)

原理:跟ajax輪詢差不多帖蔓,都是采用輪詢的方式矮瘟,區(qū)別在于:服務(wù)端收到請(qǐng)求后,檢測(cè)數(shù)據(jù)是否有新數(shù)據(jù)塑娇,有則立即返回并關(guān)閉澈侠,無則掛起一直不返回Response直到超時(shí)關(guān)閉。關(guān)閉后客戶端再次發(fā)起請(qǐng)求建立連接埋酬,周而復(fù)始哨啃。
優(yōu)點(diǎn):客戶端的請(qǐng)求次數(shù)會(huì)大量減少
缺點(diǎn):服務(wù)端請(qǐng)求掛起同樣會(huì)導(dǎo)致資源的浪費(fèi)

小結(jié):
1.HTTP協(xié)議是基于請(qǐng)求/響應(yīng)模式的,因此只要服務(wù)端給了響應(yīng)写妥,本次HTTP連接就結(jié)束了拳球。
2.Ajax輪詢與long poll都屬于不斷發(fā)送http請(qǐng)求,然后等待服務(wù)器處理耳标,可以看到http協(xié)議一個(gè)特點(diǎn)醇坝,被動(dòng)性

webSocket

webSocket是html5一種新的協(xié)議次坡,實(shí)現(xiàn)了瀏覽器與服務(wù)器之間的全雙工通信呼猪,能很好的節(jié)省服務(wù)器資源與帶寬,并在服務(wù)器端與瀏覽器端實(shí)現(xiàn)實(shí)時(shí)通行砸琅,他建立在TCP之上宋距, 同http一樣,通過tcp來傳輸數(shù)據(jù)症脂。

WebSocket 使得客戶端和服務(wù)器之間的數(shù)據(jù)交換變得更加簡(jiǎn)單谚赎,允許服務(wù)端主動(dòng)向客戶端推送數(shù)據(jù)。在 WebSocket API 中诱篷,瀏覽器和服務(wù)器只需要完成一次握手壶唤,兩者之間就直接可以創(chuàng)建持久性的連接,并進(jìn)行雙向數(shù)據(jù)傳輸棕所。

image.png
image.png

webSocket客戶端實(shí)例

使用如下的代碼可以實(shí)現(xiàn)上面圖片收到實(shí)時(shí)消息的效果闸盔。

//實(shí)時(shí)消息
  startWebSocket(){
        let this_=this;
        let wsUrl=urlConfig.wsUrl+localStorage.getItem("access_token");//websocket接口地址
        let ws = new WebSocket(wsUrl);
        ws.onclose = function () {
            this_.reConnect(wsUrl);//重新連接
            console.log("連接已關(guān)閉 "+new Date());
        };
        ws.onerror = function () {
            this_.reConnect(wsUrl);//重新連接
            console.log("連接異常 "+new Date());
        };
        ws.onopen = function () {
            heartCheck.reset().start();//開始心跳檢測(cè)
            console.log("連接成功 "+new Date());
        };
        ws.onmessage = function (e) {
            heartCheck.reset().start();//開始心跳檢測(cè)
            let data = JSON.parse(e.data);
            this_.onMessageNotice(data);//獲取到數(shù)據(jù)的回調(diào)
        };

        /*心跳檢測(cè):
            1.如果當(dāng)前連接著(onopen或onMessage),就開始心跳檢測(cè)琳省,即設(shè)置定時(shí)器一段時(shí)間后發(fā)送一條數(shù)據(jù)迎吵,發(fā)送后再過一段時(shí)間關(guān)閉連接躲撰;
              如果在關(guān)閉之前,后端正常返回?cái)?shù)據(jù)(會(huì)觸發(fā)onMessage)击费,會(huì)重置心跳檢測(cè)就一直不會(huì)關(guān)閉連接拢蛋。
            2.如果當(dāng)前異常或關(guān)閉(onclose,onerror),就重新建立連接蔫巩;
        */
        let heartCheck = {
            timeout: 180000,        //3分鐘發(fā)一次心跳
            timeoutObj: null,//定時(shí)器:延時(shí)發(fā)送一次心跳
            serverTimeoutObj: null,//定時(shí)器:延時(shí)檢測(cè)后端是否返回?cái)?shù)據(jù)谆棱,如返回則還連著,如未返回則后端斷了
            reset: function(){
                clearTimeout(this.timeoutObj);
                clearTimeout(this.serverTimeoutObj);
                return this;
            },
            start: function(){
                let this_ = this;
                this.timeoutObj = setTimeout(function(){
                    ws.send("peng");
                    console.log("peng");
                    this_.serverTimeoutObj = setTimeout(function(){//如果超過一定時(shí)間還沒重置批幌,說明后端主動(dòng)斷開了
                        ws.close();     //如果onclose會(huì)執(zhí)行reconnect础锐,我們執(zhí)行ws.close()就行了.如果直接執(zhí)行reconnect 會(huì)觸發(fā)onclose導(dǎo)致重連兩次
                    }, this_.timeout)
                }, this.timeout)
            }
        };
  }

//重新連接websocket
    reConnect(url) {
        let this_=this;
        if(this.lockReconnect) return;
        this.setState({
            lockReconnect:true//上鎖
        });
        setTimeout(function () {     //沒連接上會(huì)一直重連,設(shè)置延遲避免請(qǐng)求過多
            this_.startWebSocket(url);
            this_.setState({
                lockReconnect:false//開鎖
            });
        }, 5000);
    }
//收到消息的回調(diào)
    onMessageNotice(data){
        notification.info({//antd 中的組件
            message: "這是一條消息",
            description: "消息描述",
        });
        //收到消息重新獲取消息列表
        this.getNewsList();
        //播放聲音
        this.refs.audio.play();
    }

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末荧缘,一起剝皮案震驚了整個(gè)濱河市皆警,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌截粗,老刑警劉巖信姓,帶你破解...
    沈念sama閱讀 218,546評(píng)論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異绸罗,居然都是意外死亡意推,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,224評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門珊蟀,熙熙樓的掌柜王于貴愁眉苦臉地迎上來菊值,“玉大人,你說我怎么就攤上這事育灸∧逯希” “怎么了?”我有些...
    開封第一講書人閱讀 164,911評(píng)論 0 354
  • 文/不壞的土叔 我叫張陵磅崭,是天一觀的道長(zhǎng)儿子。 經(jīng)常有香客問我,道長(zhǎng)砸喻,這世上最難降的妖魔是什么柔逼? 我笑而不...
    開封第一講書人閱讀 58,737評(píng)論 1 294
  • 正文 為了忘掉前任,我火速辦了婚禮割岛,結(jié)果婚禮上愉适,老公的妹妹穿的比我還像新娘。我一直安慰自己癣漆,他們只是感情好儡毕,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,753評(píng)論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般腰湾。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上疆股,一...
    開封第一講書人閱讀 51,598評(píng)論 1 305
  • 那天费坊,我揣著相機(jī)與錄音,去河邊找鬼旬痹。 笑死附井,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的两残。 我是一名探鬼主播永毅,決...
    沈念sama閱讀 40,338評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼人弓!你這毒婦竟也來了沼死?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,249評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤崔赌,失蹤者是張志新(化名)和其女友劉穎意蛀,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體健芭,經(jīng)...
    沈念sama閱讀 45,696評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡县钥,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,888評(píng)論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了慈迈。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片若贮。...
    茶點(diǎn)故事閱讀 40,013評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖痒留,靈堂內(nèi)的尸體忽然破棺而出谴麦,到底是詐尸還是另有隱情,我是刑警寧澤狭瞎,帶...
    沈念sama閱讀 35,731評(píng)論 5 346
  • 正文 年R本政府宣布细移,位于F島的核電站,受9級(jí)特大地震影響熊锭,放射性物質(zhì)發(fā)生泄漏弧轧。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,348評(píng)論 3 330
  • 文/蒙蒙 一碗殷、第九天 我趴在偏房一處隱蔽的房頂上張望精绎。 院中可真熱鬧,春花似錦锌妻、人聲如沸代乃。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,929評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽搁吓。三九已至原茅,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間堕仔,已是汗流浹背擂橘。 一陣腳步聲響...
    開封第一講書人閱讀 33,048評(píng)論 1 270
  • 我被黑心中介騙來泰國(guó)打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留摩骨,地道東北人通贞。 一個(gè)月前我還...
    沈念sama閱讀 48,203評(píng)論 3 370
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像恼五,于是被迫代替她去往敵國(guó)和親昌罩。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,960評(píng)論 2 355

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