详解如何实现在线聊天系统中的实时消息获取
序言
傳統(tǒng)web瀏覽器應(yīng)用采用客戶端主動請求方式，只有在收到瀏覽器請求時服務(wù)端才返回消息，這種模式已經(jīng)不能滿足日益多樣化的web應(yīng)用需求，例如：
在線聊天系統(tǒng)：需要實(shí)時獲取聊天消息。
實(shí)時監(jiān)控系統(tǒng)：需要實(shí)時獲取監(jiān)控對象狀態(tài)。如儀表讀數(shù)、告警信息等。
隨著html技術(shù)演進(jìn)，發(fā)展出了多種服務(wù)器推送技術(shù)，用于服務(wù)器向?yàn)g覽器客戶端推送消息。
?
Ajax輪詢
采用Ajax定時向服務(wù)端發(fā)送請求檢查有無消息更新。網(wǎng)頁定時向服務(wù)器發(fā)送請求，若服務(wù)器有消息推送，則返回消息，否則返回空消息，如下圖所示：
這種輪詢方式需要發(fā)送大量無效請求，大大消耗了服務(wù)器資源，且推送消息的實(shí)時性較低。
?
Ajax長輪詢
Ajax長輪詢對前面的Ajax輪詢方式做了改進(jìn)，服務(wù)端收到請求后，不再立即返回，而是等待有消息推送時返回。網(wǎng)頁收到服務(wù)端返回的消息后，立即發(fā)起一個新的請求，等待下一個推送消息。
采用這種方式的服務(wù)端實(shí)現(xiàn)比前者復(fù)雜，需要維護(hù)一個客戶端建立的連接列表，當(dāng)產(chǎn)生對某個客戶端的推送消息后找到對應(yīng)的連接并發(fā)送。優(yōu)勢是減少了輪詢消耗，發(fā)送事件的實(shí)時性得到增強(qiáng)。
?
Server-Send Event
Server-Send Event是html5標(biāo)準(zhǔn)新增的技術(shù)，它延用了Ajax長輪詢的思路，并對其進(jìn)行了一些規(guī)范。Server-Send Event讓服務(wù)端可以向客戶端流式發(fā)送文本消息，并在發(fā)送完一個消息后保持請求不結(jié)束，連接始終保持。如下圖所示：
?
網(wǎng)頁調(diào)用EventSource接口向服務(wù)器發(fā)送請求：
var?source =?new?EventSource('http://localhost:8080'); ? ?
source.addEventListener('message',?function(e) { console.log(e.data); },?false);
?
服務(wù)器返回的Content-Type頭必須為text/event-stream，且返回完一個消息后不關(guān)閉請求，后續(xù)消息仍然使用同一個請求返回。瀏覽器會自動以換行符識別每個消息。
?
響應(yīng)頭
Content-Type: text/event-stream ? ?
X-Accel-Buffering: no ? ?
?
響應(yīng)體
event: userlogin ? ?
data: {"username":?"John123"} ? ?
?
event: message ? ?
data:?123 ? ?
?
如果服務(wù)端返回的消息通過nginx等代理服務(wù)器返回給客戶端時，可能受到nginx緩存機(jī)制的影響。某些情況下，nginx會將服務(wù)端返回體緩存起來，等待所有返回接受完畢后再統(tǒng)一返回給客戶端，在server-send event情況下將導(dǎo)致客戶端無法及時接收到消息。需要在返回頭中添加X-Accel-Buffering: no，以防止nginx做緩存。
?
使用華為API gateway提供
Server-Send Event類型的
API服務(wù)建立后端服務(wù)
登錄華為云https://console.huaweicloud.com/，創(chuàng)建彈性云服務(wù)器
?
輸入apt install nodejs安裝nodejs，使用nodejs創(chuàng)建服務(wù)器，并輸入下列示例代碼。
?
var?http = require("http"); ? ?
? ?
http.createServer(function?(req, res) { ? ?
?if?(req.url ===?"/stream") { ? ?
?res.writeHead(200, { ? ?
?"Content-Type":"text/event-stream", ? ?
?"X-Accel-Buffering":"no", ? ?
?}); ? ?
res.write("data: "?+ (new?Date()) +?"\n\n"); ? ?
?interval = setInterval(function?() { ? ?
res.write("data: "?+ (new?Date()) +?"\n\n");??12 ? ?????????}, 1000);? ??
? ??
req.connection.addListener("close",?function?() { ? ?
?clearInterval(interval); ? ?
?},?false); ? ?
?} ? ?
?}).listen(8080); ? ?
?
上面代碼是服務(wù)器每秒向客戶端發(fā)送時間的示例。將上面的代碼保存為server.js，然后執(zhí)行nodejs server.js &
就啟動了監(jiān)聽在8080端口的服務(wù)器。
?
添加安全組
將8080端口添加到安全組規(guī)則，使得外部可以訪問云服務(wù)器的8080端口。
?
創(chuàng)建API
API網(wǎng)關(guān)提供從內(nèi)網(wǎng)訪問云服務(wù)器的能力，不需要申請公網(wǎng)彈性IP，就可以通過VPC通道開放API。
登錄華為云https://console.huaweicloud.com/apig/?，首先創(chuàng)建VPC通道，端口為8080
?
將彈性云服務(wù)器添加到VPC通道：
?
創(chuàng)建API，認(rèn)證類型選擇APP
?
?
“請求Path”填“/stream”，“開啟跨域”選項(xiàng)選擇開啟
創(chuàng)建API完成后，發(fā)布API到RELEASE環(huán)境。
?
創(chuàng)建APP并綁定API
在應(yīng)用管理界面創(chuàng)建一個APP，并綁定剛剛創(chuàng)建的API。
?
創(chuàng)建OPTIONS方法的API
OPTIONS方法的API是提供給瀏覽器發(fā)送跨域請求的預(yù)請求使用，同樣選擇開啟跨域（CORS）,并將后端配置為Mock。
點(diǎn)完成創(chuàng)建API后，發(fā)布API到RELEASE環(huán)境。
?
創(chuàng)建網(wǎng)頁，訪問API
1.要訪問APP認(rèn)證方式的API，需要通過APP的key和secret生成簽名，才能校驗(yàn)通過。生成簽名使用下面鏈接下載的javascript SDK
https://console.huaweicloud.com/apig/?agencyId=c65a0db86e514fe298cdc57c6273411a®ion=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填入上面指定位置。在本地用瀏覽器打開此頁面，可以看到頁面上顯示的時間每秒刷新一次。
?
以上就是對如何實(shí)現(xiàn)在線聊天系統(tǒng)中的實(shí)時消息獲取的詳解，想要了解更多，點(diǎn)擊這里立即體驗(yàn)一番吧~
轉(zhuǎn)載于:https://www.cnblogs.com/middleware/p/9439382.html
總結(jié)
以上是生活随笔為你收集整理的详解如何实现在线聊天系统中的实时消息获取的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【刷题】LOJ 6014 「网络流 24
- 下一篇： ip route-static 命令的参