大數(shù)據(jù)中如何實(shí)現(xiàn)在線聊天系統(tǒng)中的實(shí)時(shí)消息獲取

發(fā)布時(shí)間：2021-12-21 15:35:02 來(lái)源：億速云閱讀：180 作者：柒染欄目：云計(jì)算

這篇文章將為大家詳細(xì)講解有關(guān)大數(shù)據(jù)中如何實(shí)現(xiàn)在線聊天系統(tǒng)中的實(shí)時(shí)消息獲取，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。

序言

傳統(tǒng)web瀏覽器應(yīng)用采用客戶端主動(dòng)請(qǐng)求方式，只有在收到瀏覽器請(qǐng)求時(shí)服務(wù)端才返回消息，這種模式已經(jīng)不能滿足日益多樣化的web應(yīng)用需求，例如：

在線聊天系統(tǒng)：需要實(shí)時(shí)獲取聊天消息。

實(shí)時(shí)監(jiān)控系統(tǒng)：需要實(shí)時(shí)獲取監(jiān)控對(duì)象狀態(tài)。如儀表讀數(shù)、告警信息等。

隨著html技術(shù)演進(jìn)，發(fā)展出了多種服務(wù)器推送技術(shù)，用于服務(wù)器向?yàn)g覽器客戶端推送消息。

Ajax輪詢

采用Ajax定時(shí)向服務(wù)端發(fā)送請(qǐng)求檢查有無(wú)消息更新。網(wǎng)頁(yè)定時(shí)向服務(wù)器發(fā)送請(qǐng)求，若服務(wù)器有消息推送，則返回消息，否則返回空消息，如下圖所示：

大數(shù)據(jù)中如何實(shí)現(xiàn)在線聊天系統(tǒng)中的實(shí)時(shí)消息獲取

這種輪詢方式需要發(fā)送大量無(wú)效請(qǐng)求，大大消耗了服務(wù)器資源，且推送消息的實(shí)時(shí)性較低。

Ajax長(zhǎng)輪詢

Ajax長(zhǎng)輪詢對(duì)前面的Ajax輪詢方式做了改進(jìn)，服務(wù)端收到請(qǐng)求后，不再立即返回，而是等待有消息推送時(shí)返回。網(wǎng)頁(yè)收到服務(wù)端返回的消息后，立即發(fā)起一個(gè)新的請(qǐng)求，等待下一個(gè)推送消息。

大數(shù)據(jù)中如何實(shí)現(xiàn)在線聊天系統(tǒng)中的實(shí)時(shí)消息獲取

網(wǎng)頁(yè)調(diào)用EventSource接口向服務(wù)器發(fā)送請(qǐng)求：

var source = new EventSource('http://localhost:8080');

source.addEventListener('message', function(e) { console.log(e.data); }, false);

服務(wù)器返回的Content-Type頭必須為text/event-stream，且返回完一個(gè)消息后不關(guān)閉請(qǐng)求，后續(xù)消息仍然使用同一個(gè)請(qǐng)求返回。瀏覽器會(huì)自動(dòng)以換行符識(shí)別每個(gè)消息。

響應(yīng)頭

Content-Type: text/event-stream

X-Accel-Buffering: no

響應(yīng)體

event: userlogin

data: {"username": "John123"}

event: message

data: 123

如果服務(wù)端返回的消息通過(guò)nginx等代理服務(wù)器返回給客戶端時(shí)，可能受到nginx緩存機(jī)制的影響。某些情況下，nginx會(huì)將服務(wù)端返回體緩存起來(lái)，等待所有返回接受完畢后再統(tǒng)一返回給客戶端，在server-send event情況下將導(dǎo)致客戶端無(wú)法及時(shí)接收到消息。需要在返回頭中添加X(jué)-Accel-Buffering: no，以防止nginx做緩存。

使用華為API gateway提供

Server-Send Event類型的

API服務(wù)建立后端服務(wù)

登錄華為云https://console.huaweicloud.com/，創(chuàng)建彈性云服務(wù)器

大數(shù)據(jù)中如何實(shí)現(xiàn)在線聊天系統(tǒng)中的實(shí)時(shí)消息獲取

創(chuàng)建API

API網(wǎng)關(guān)提供從內(nèi)網(wǎng)訪問(wèn)云服務(wù)器的能力，不需要申請(qǐng)公網(wǎng)彈性IP，就可以通過(guò)VPC通道開(kāi)放API。

登錄華為云https://console.huaweicloud.com/apig/ ，首先創(chuàng)建VPC通道，端口為8080

大數(shù)據(jù)中如何實(shí)現(xiàn)在線聊天系統(tǒng)中的實(shí)時(shí)消息獲取

創(chuàng)建API，認(rèn)證類型選擇APP

“請(qǐng)求Path”填“/stream”，“開(kāi)啟跨域”選項(xiàng)選擇開(kāi)啟

大數(shù)據(jù)中如何實(shí)現(xiàn)在線聊天系統(tǒng)中的實(shí)時(shí)消息獲取

創(chuàng)建OPTIONS方法的API

OPTIONS方法的API是提供給瀏覽器發(fā)送跨域請(qǐng)求的預(yù)請(qǐng)求使用，同樣選擇開(kāi)啟跨域（CORS）,并將后端配置為Mock。

大數(shù)據(jù)中如何實(shí)現(xiàn)在線聊天系統(tǒng)中的實(shí)時(shí)消息獲取

點(diǎn)完成創(chuàng)建API后，發(fā)布API到RELEASE環(huán)境。

創(chuàng)建網(wǎng)頁(yè)，訪問(wèn)API

1.要訪問(wèn)APP認(rèn)證方式的API，需要通過(guò)APP的key和secret生成簽名，才能校驗(yàn)通過(guò)。生成簽名使用下面鏈接下載的javascript SDK

https://console.huaweicloud.com/apig/?agencyId=c65a0db86e514fe298cdc57c6273411a&region=cn-south-1&locale=zh-cn#/apig/manager/useapi/sdk

2.由于IE瀏覽器不支持Server Sent Event，需要從https://github.com/Yaffle/EventSource/下載瀏覽器兼容的Server Sent Event實(shí)現(xiàn)。

搜索并刪除下面四行代碼：

if (url.slice(0, 5) !== "data:" &&

url.slice(0, 5) !== "blob:") {

requestURL = url + (url.indexOf("?", 0) === -1 ? "?" : "&") + "lastEventId="+ encodeURIComponent(lastEventId);

}

3.創(chuàng)建index.html，內(nèi)容如下：

<html>

<head>

<title>SSE APP test</title>

</head>

<body>

SSE APP test

<div id="a"></div>

<script src="js/eventsource.js"></script> 09 <script src="js/hmac-sha256.js"></script>

<script src="js/moment.min.js"></script>

<script src="js/moment-timezone-with-data.min.js"></script>

<script src="signer.js"></script>

<script>

var req = new signer.HttpRequest()

req.method = "GET">

req.host = "d3da6a917a844df3bd02896496b1b75b.apigw.cn-south-1.huaweicloud.com"

req.uri = "/stream"

var sig = new signer.Signer();

sig.AppKey = "<your app key>"

sig.AppSecret = "<your app secret>"

var opts = sig.Sign(req);

var source = new EventSourcePolyfill("http://d3da6a917a844df3bd02896496b1b75b.apigw.cn-south-1.huaweicloud.com" + req.uri, {

headers: opts.headers

});

source.onmessage = function (event) {

document.getElementById("a").innerHTML = event.data;

};

</script>

</body>

</html>

將剛剛創(chuàng)建的APP的AppKey和AppSecret填入上面指定位置。在本地用瀏覽器打開(kāi)此頁(yè)面，可以看到頁(yè)面上顯示的時(shí)間每秒刷新一次。

關(guān)于大數(shù)據(jù)中如何實(shí)現(xiàn)在線聊天系統(tǒng)中的實(shí)時(shí)消息獲取就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

向AI問(wèn)一下細(xì)節(jié)

大數(shù)據(jù)中如何實(shí)現(xiàn)在線聊天系統(tǒng)中的實(shí)時(shí)消息獲取

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽