共計(jì) 2793 個(gè)字符，預(yù)計(jì)需要花費(fèi) 7 分鐘才能閱讀完成。
這篇文章將為大家詳細(xì)講解有關(guān)大數(shù)據(jù)中如何實(shí)現(xiàn)在線聊天系統(tǒng)中的實(shí)時(shí)消息獲取，文章內(nèi)容質(zhì)量較高，因此丸趣 TV 小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。
序言
傳統(tǒng) web 瀏覽器應(yīng)用采用客戶(hù)端主動(dòng)請(qǐng)求方式，只有在收到瀏覽器請(qǐng)求時(shí)服務(wù)端才返回消息，這種模式已經(jīng)不能滿(mǎn)足日益多樣化的 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覽器客戶(hù)端推送消息。
Ajax 輪詢(xún)
采用 Ajax 定時(shí)向服務(wù)端發(fā)送請(qǐng)求檢查有無(wú)消息更新。網(wǎng)頁(yè)定時(shí)向服務(wù)器發(fā)送請(qǐng)求，若服務(wù)器有消息推送，則返回消息，否則返回空消息，如下圖所示：
這種輪詢(xún)方式需要發(fā)送大量無(wú)效請(qǐng)求，大大消耗了服務(wù)器資源，且推送消息的實(shí)時(shí)性較低。
Ajax 長(zhǎng)輪詢(xún)
Ajax 長(zhǎng)輪詢(xún)對(duì)前面的 Ajax 輪詢(xún)方式做了改進(jìn)，服務(wù)端收到請(qǐng)求后，不再立即返回，而是等待有消息推送時(shí)返回。網(wǎng)頁(yè)收到服務(wù)端返回的消息后，立即發(fā)起一個(gè)新的請(qǐng)求，等待下一個(gè)推送消息。
網(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ù)器返回給客戶(hù)端時(shí)，可能受到 nginx 緩存機(jī)制的影響。某些情況下，nginx 會(huì)將服務(wù)端返回體緩存起來(lái)，等待所有返回接受完畢后再統(tǒng)一返回給客戶(hù)端，在 server-send event 情況下將導(dǎo)致客戶(hù)端無(wú)法及時(shí)接收到消息。需要在返回頭中添加 X -Accel-Buffering: no，以防止 nginx 做緩存。
使用華為 API gateway 提供
Server-Send Event 類(lèi)型的
API 服務(wù)建立后端服務(wù)
登錄華為云 https://console.huaweicloud.com/，創(chuàng)建彈性云服務(wù)器
創(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
創(chuàng)建 API，認(rèn)證類(lèi)型選擇 APP
“請(qǐng)求 Path”填“/stream”，“開(kāi)啟跨域”選項(xiàng)選擇開(kāi)啟
創(chuàng)建 OPTIONS 方法的 API
OPTIONS 方法的 API 是提供給瀏覽器發(fā)送跨域請(qǐng)求的預(yù)請(qǐng)求使用，同樣選擇開(kāi)啟跨域（CORS）, 并將后端配置為 Mock。
點(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ò)，可以把它分享出去讓更多的人看到。
