共计 2793 个字符,预计需要花费 7 分钟才能阅读完成。
这篇文章将为大家详细讲解有关大数据中如何实现在线聊天系统中的实时消息获取,文章内容质量较高,因此丸趣 TV 小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。
序言
传统 web 浏览器应用采用客户端主动请求方式,只有在收到浏览器请求时服务端才返回消息,这种模式已经不能满足日益多样化的 web 应用需求,例如:
在线聊天系统:需要实时获取聊天消息。
实时监控系统:需要实时获取监控对象状态。如仪表读数、告警信息等。
随着 html 技术演进,发展出了多种服务器推送技术,用于服务器向浏览器客户端推送消息。
Ajax 轮询
采用 Ajax 定时向服务端发送请求检查有无消息更新。网页定时向服务器发送请求,若服务器有消息推送,则返回消息,否则返回空消息,如下图所示:
这种轮询方式需要发送大量无效请求,大大消耗了服务器资源,且推送消息的实时性较低。
Ajax 长轮询
Ajax 长轮询对前面的 Ajax 轮询方式做了改进,服务端收到请求后,不再立即返回,而是等待有消息推送时返回。网页收到服务端返回的消息后,立即发起一个新的请求,等待下一个推送消息。
网页调用 EventSource 接口向服务器发送请求:
var source = new EventSource(http://localhost:8080
source.addEventListener(message , function(e) {console.log(e.data); }, false);
服务器返回的 Content-Type 头必须为 text/event-stream,且返回完一个消息后不关闭请求,后续消息仍然使用同一个请求返回。浏览器会自动以换行符识别每个消息。
响应头
Content-Type: text/event-stream
X-Accel-Buffering: no
响应体
event: userlogin
data: {username : John123}
event: message
data: 123
如果服务端返回的消息通过 nginx 等代理服务器返回给客户端时,可能受到 nginx 缓存机制的影响。某些情况下,nginx 会将服务端返回体缓存起来,等待所有返回接受完毕后再统一返回给客户端,在 server-send event 情况下将导致客户端无法及时接收到消息。需要在返回头中添加 X -Accel-Buffering: no,以防止 nginx 做缓存。
使用华为 API gateway 提供
Server-Send Event 类型的
API 服务建立后端服务
登录华为云 https://console.huaweicloud.com/,创建弹性云服务器
创建 API
API 网关提供从内网访问云服务器的能力,不需要申请公网弹性 IP,就可以通过 VPC 通道开放 API。
登录华为云 https://console.huaweicloud.com/apig/ ,首先创建 VPC 通道,端口为 8080
创建 API,认证类型选择 APP
“请求 Path”填“/stream”,“开启跨域”选项选择开启
创建 OPTIONS 方法的 API
OPTIONS 方法的 API 是提供给浏览器发送跨域请求的预请求使用,同样选择开启跨域(CORS), 并将后端配置为 Mock。
点完成创建 API 后,发布 API 到 RELEASE 环境。
创建网页,访问 API
1. 要访问 APP 认证方式的 API,需要通过 APP 的 key 和 secret 生成签名,才能校验通过。生成签名使用下面链接下载的 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 实现。
搜索并删除下面四行代码:
if (url.slice(0, 5) !== data:
url.slice(0, 5) !== blob: ) {
requestURL = url + (url.indexOf( ? , 0) === -1 ? ? : ) + lastEventId= + encodeURIComponent(lastEventId);
}
3. 创建 index.html,内容如下:
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
将刚刚创建的 APP 的 AppKey 和 AppSecret 填入上面指定位置。在本地用浏览器打开此页面,可以看到页面上显示的时间每秒刷新一次。
关于大数据中如何实现在线聊天系统中的实时消息获取就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。