EventSource 实时传输数据
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Dashboard</title>
<style>
*{margin:0;padding:0;}
/* TV Start */
.RealTimeListTV {
width: 100%;
height: 100%;
overflow: scroll;
background: #030129 url('./image/tvBg.jpg') no-repeat;
background-size: 100% auto;
padding: 136px 0 0 0;
text-align: center;
position: relative;
box-sizing: border-box;
}
.RealTimeListTV .title {
font-size: 76px;
color: #fff;
letter-spacing: 6px;
}
.RealTimeListTV .totalValue {
font-size: 150px;
color: #fff;
letter-spacing: 6px;
}
.RealTimeListTV .totalValue .decoration {
width: 524px;
height: 136px;
display: block;
margin: 0 auto;
background: url('./image/lineH.png') no-repeat;
}
.RealTimeListTV .BusinessUnitList {
display: flex;
justify-content: space-between;
overflow: hidden;
line-height: 50px;
padding: 0 200px;
list-style: none;
}
.BusinessUnitList li {
float: left;
color: #fff;
position: relative;
letter-spacing: 6px;
}
.BusinessUnitList li .name {
font-size: 30px;
}
.BusinessUnitList li .value {
font-size: 36px;
}
.BusinessUnitList li .line {
width: 47px;
height: 48px;
background: url('./image/line.png') no-repeat;
position: absolute;
left: -70px;
top: 0;
}
.main{
margin: 50px auto 0;
}
/* TV End */ /* WEB Start */
.RealTimeListWEB{
width: 1280px;
background: #030129 url('./image/webBg.png') no-repeat;
background-size: 100% auto;
padding: 40px 0 0 0;
text-align: center;
position: relative;
box-sizing: border-box;
margin:0 auto;
} .RealTimeListWEB .title{
font-size: 46px;
color: #fff;
letter-spacing: 6px;
}
.RealTimeListWEB .totalValue {
font-size: 80px;
color: #fff;
letter-spacing: 6px;
}
.RealTimeListWEB .BusinessUnitList{
list-style: none;
margin-top:110px;
}
.RealTimeListWEB .BusinessUnitList::after{
content:".";
clear:both;
display:block;
height:0;
overflow:hidden;
visibility:hidden;
} .RealTimeListWEB .BusinessUnitList li{
width: 20%;
padding-bottom: 30px;
letter-spacing: 3px;
}
.RealTimeListWEB .BusinessUnitList li .line{
left: 25px;
top: -8px;
width: 32px;
height: 32px;
}
.RealTimeListWEB .BusinessUnitList li .name,.RealTimeListWEB .BusinessUnitList li .value{
font-size: 20px;
padding-bottom: 20px;
}
.echartsList{
margin-top: 200px;
}
/* WEB End */ /* comment */
.lageBoxNone,.smallBoxNone{
display: none;
}
@media screen and (min-width:3000px) and (max-width:5000px) {
.lageBoxNone{
display: block;
}
}
@media only screen and (max-width: 2999px) {
.smallBoxNone{
display: block;
}
} </style>
</head> <body> <!-- 电视尺寸 -->
<div class="RealTimeListTV lageBoxNone">
<div class="title">总销售额</div>
<div class="totalValue">$<span>0.00</span><span class="decoration"></span></div>
<ul class="BusinessUnitList">
<li> <span class="line"></span> <p class="name">SW事业部</p> <p class="value">$0.00</p></li>
<li> <span class="line"></span> <p class="name">SP事业部</p> <p class="value">$0.00</p></li>
<li> <span class="line"></span> <p class="name">JFN事业部</p> <p class="value">$0.00</p></li>
<li> <span class="line"></span> <p class="name">PJ事业部</p> <p class="value">$0.00</p></li>
<li> <span class="line"></span> <p class="name">Pi事业部</p> <p class="value">$0.00</p></li>
<li> <span class="line"></span> <p class="name">AG事业部</p> <p class="value">$0.00</p></li>
<li> <span class="line"></span> <p class="name">HA事业部</p> <p class="value">$0.00</p></li>
<li> <span class="line"></span> <p class="name">Q事业部</p> <p class="value">$0.00</p></li>
<li> <span class="line"></span> <p class="name">N事业部</p> <p class="value">$0.00</p></li>
<li> <span class="line"></span> <p class="name">GS事业部</p> <p class="value">$0.00</p></li>
</ul>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div style="padding:0 50px;">
<div id="main" class="main" style="width: 100%;height:1500px;"></div>
</div> </div> <!-- pc尺寸 -->
<div class="RealTimeListWEB smallBoxNone">
<div class="title">总销售额</div>
<div class="totalValue">$<span>0.00</span></div>
<ul class="BusinessUnitList">
<li> <span class="line"></span> <p class="name">SW事业部</p> <p class="value">$0.00</p></li>
<li> <span class="line"></span> <p class="name">SP事业部</p> <p class="value">$0.00</p></li>
<li> <span class="line"></span> <p class="name">JFN事业部</p> <p class="value">$0.00</p></li>
<li> <span class="line"></span> <p class="name">PJ事业部</p> <p class="value">$0.00</p></li>
<li> <span class="line"></span> <p class="name">Pi事业部</p> <p class="value">$0.00</p></li>
<li> <span class="line"></span> <p class="name">AG事业部</p> <p class="value">$0.00</p></li>
<li> <span class="line"></span> <p class="name">HA事业部</p> <p class="value">$0.00</p></li>
<li> <span class="line"></span> <p class="name">Q事业部</p> <p class="value">$0.00</p></li>
<li> <span class="line"></span> <p class="name">N事业部</p> <p class="value">$0.00</p></li>
<li> <span class="line"></span> <p class="name">GS事业部</p> <p class="value">$0.00</p></li>
</ul>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div class="echartsList">
<div id="main1" class="main" style="width: 1200px;height:450px;display: none;"></div>
<div id="main2" class="main" style="width: 1200px;height:450px;display: none;"></div>
<div id="main3" class="main" style="width: 1200px;height:450px;display: none;"></div>
<div id="main4" class="main" style="width: 1200px;height:450px;display: none;"></div>
<div id="main5" class="main" style="width: 1200px;height:450px;display: none;"></div>
<div id="main6" class="main" style="width: 1200px;height:450px;display: none;"></div>
<div id="main7" class="main" style="width: 1200px;height:450px;display: none;"></div>
<div id="main8" class="main" style="width: 1200px;height:450px;display: none;"></div>
<div id="main9" class="main" style="width: 1200px;height:450px;display: none;"></div>
<div id="main10" class="main" style="width: 1200px;height:450px;display: none;"></div>
<div id="main11" class="main" style="width: 1200px;height:450px;display: none;"></div>
<div id="main12" class="main" style="width: 1200px;height:450px;display: none;"></div>
<div id="main13" class="main" style="width: 1200px;height:450px;display: none;"></div>
<div id="main14" class="main" style="width: 1200px;height:450px;display: none;"></div>
<div id="main15" class="main" style="width: 1200px;height:450px;display: none;"></div>
</div>
</div> </body>
<script src='./js/jquery-3.1.0.min.js'></script>
<script src="./js/echarts.min.js"></script>
<script src="./js/eventsource.min.js"></script> <script type="text/javascript">
/*
堆叠条形图 公共配置
xData: x轴数据 type＝category arr 必填
yData: y轴数据 type＝value arr 必填
HistogramW: 单个柱状图的宽度 str 如果不传默认是60
*/
// 基于准备好的dom，初始化echarts实例
function StackedBarChart(xData, yData, HistogramW) {
var yData1 = [],
yData2 = [],
yData3 = [],
yData4 = [],
HistogramW = HistogramW ? HistogramW : '60px';
for (var i = 0, len = yData.length; i < len; i++) {
var cur = yData[i];
yData1.push(cur * 0.1 >>> 0);
yData2.push(cur * 0.2 >>> 0);
yData3.push(cur * 0.3 >>> 0);
yData4.push(cur * 0.4 >>> 0);
}
return {
textStyle: {
color: '#fff',
fontSize: '42px'
},
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
},
show: false
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [{
type: 'category',
axisLine: { // x轴的颜色和宽度
lineStyle: {
color: '#373750',
width: 5 //这里是坐标轴的宽度,可以去掉
}
},
axisLabel: {
interval:0,
rotate:40
},
data: xData
}],
yAxis: [{
type: 'value',
axisLabel: {
show: true,
textStyle: {
color: '#fff'
}
},
// 控制网格线是否显示
splitLine: {
show: true,
// 改变轴线颜色
lineStyle: {
// 使用深浅的间隔色
color: ['#24243f']
}
} }],
series: [ {
type: 'bar', // 柱状图
stack: '站点总销售额', // 数据堆叠，同个类目轴上系列配置相同的stack值可以堆叠放置
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[{
offset: 0,
color: '#5fa2bc'
},
{
offset: 0.7,
color: '#9fe595'
}
]
)
}
}, barMaxWidth: HistogramW,
data: yData1
},
{
type: 'bar',
stack: '站点总销售额',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[{
offset: 0,
color: '#fae093'
},
{
offset: 0.7,
color: '#f99c72'
}
]
)
}
},
data: yData2
},
{
type: 'bar',
stack: '站点总销售额',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[{
offset: 0,
color: '#ff79aa'
},
{
offset: 0.7,
color: '#e9566d'
}
]
)
}
},
data: yData3
},
{
// 只在最后一组数据中显示 label，由于最后一组数据的值来自 total * 0.4，
// 由此逆推出总数为 data / 0.4，
// >>> 用于去除小数部分
label: {
show: true,
position: 'top',
formatter: function (param) {
return Math.round(yData[param.dataIndex]);
}
},
type: 'bar',
stack: '站点总销售额',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[{
offset: 0,
color: '#94c8d3'
},
{
offset: 0.7,
color: '#6a71e4'
}
]
)
}
},
data: yData4
}, ]
};
} function SetXYStyle(arr) {
return arr.map(function(item) {
return {
value: item,
textStyle: {
fontSize: 22
}
}
})
}
/* 设置电视echarts图表尺寸 */
var totalH = window.innerHeight || document.body.clientHeight || document.documentElement.clientHeight,
titleH = $('.title').outerHeight(true),
totalValueH = $('.totalValue').outerHeight(true),
businessUnitListH = $('.BusinessUnitList').outerHeight(true),
mainH = totalH - titleH - totalValueH - businessUnitListH - 136 - 50 ;
$('#main').css('height',mainH+'px'); /*---------------- Echarts ---------------- */
var is_pc = true,
params = 'is_pc=yes',
w = window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;
if (w > 3000) {
is_pc = false;
params = 'is_tv=yes'
} var source = new EventSource('/rest/dashboard/fetch?' + params, { withCredentials: false, format: 'json' }); // open事件 连接一旦建立，就会触发open事件，可以定义相应的回调函数。
source.onopen = function (event) {
// handle open event
console.log('onopen', event)
}; // error事件 如果发生通信错误（比如连接中断），就会触发error事件。
source.onerror = function (event) {
// handle error event
var data = event.data;
if (typeof data == 'string') {
data = data.replace(/\n/g,'')
}
console.log('onerror', data)
}; // 自定义事件
source.addEventListener("whole_total", function (event) {
var data = event.data;
var origin = event.origin;
var lastEventId = event.lastEventId;
// handle message
if (typeof data == 'string') {
data = data.replace(/\n/g,'')
} $(".RealTimeListTV .totalValue span").eq(0).text(data)
$(".RealTimeListWEB .totalValue span").eq(0).text(data)
}, false); // 自定义事件
source.addEventListener("depart_total", function (event) {
// handle message
var data = event.data;
// console.log('depart_total', data)
if (typeof data == 'string') {
data = data.replace(/\n/g,'')
data = JSON.parse(data);
} var html = '';
for (var i=0; i < data.length; i++) {
html += '<li>';
html += ' <span class="line"></span>';
html += ' <p class="name">' + data[i]['name'] + '</p>';
html += ' <p class="value">$' + data[i]['data'] + '</p>';
html += '</li>';
} $('.RealTimeListTV .BusinessUnitList').html(html);
$('.RealTimeListWEB .BusinessUnitList').html(html); }, false); // 自定义事件
source.addEventListener("site_total", function (event) { var data = event.data; if (typeof data == 'string') {
data = data.replace(/\n/g,'')
data = JSON.parse(data);
}
console.log('data.length', data.length) // 循环15个一组, 重新渲染
if (is_pc) {
/*---------------- WEB Echarts ---------------- */
for (var i = 0; i < data.length; i++) {
var id = 'main' + (i + 1);
$('#' + id).show()
var myChart = echarts.init(document.getElementById(id)),
xData = data[i].xData,
yData = data[i].yData;
myChart.setOption(StackedBarChart(xData, yData, '40'));
} for (var i=data.length; i<15; i++) {
var id = 'main' + (i + 1);
$('#' + id).hide()
}
// 渲染30个一排
} else {
/* ---------------- TV Echarts ---------------- */
var myChart = echarts.init(document.getElementById('main')),
xData = data[0].xData
yData = data[0].yData;
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(StackedBarChart(SetXYStyle(xData),yData));
} }, false); var last_hart_time = Math.round((new Date()).getTime() / 1000); // 自定义事件
source.addEventListener("hart", function (event) {
var data = event.data;
var origin = event.origin;
var lastEventId = event.lastEventId;
// handle message if (typeof data == 'string') {
data = data.replace(/\n/g,'')
data = JSON.parse(data)
}
var max_delay_seconds = data.max_delay || 5
var now_hart_time = Math.round((new Date()).getTime() / 1000);
if(now_hart_time - last_hart_time > max_delay_seconds) {
$.ajax({
url: '/rest/dashboard/hartReply',
method: 'POST',
data: { uid: data['uid'], token: data['token'] },
dataType: 'json',
success: function (result) {
last_hart_time = now_hart_time
console.log('reply')
}
})
}
console.log('hart')
}, false); // 自定义事件
source.addEventListener("close", function (event) {
var data = event.data;
var origin = event.origin;
var lastEventId = event.lastEventId;
// handle message
if (typeof data == 'string') {
data = data.replace(/\n/g,'')
} // close方法用于关闭连接。
source.close();
console.log('close', event)
}, false); </script> </html>
EventSource 实时传输数据的更多相关文章
- 高效实时的网络会议数据传输库—UDT
在视频会议系统的研发当中,我们的音.视频数据必须要有相应的可靠性作为保障,因为视频会议系统是一个实时性非常强的系统,如果其数据在网络不太好的情况下,有可能会出现丢包.数据延迟.数据堵塞等现象,出现这些 ...
- 淘宝平台进行数据的实时传输: TimeTunnel介绍
在班级工作中遇到似业务场景中的实时流传输数据的访问,所以,淘宝实时数据仓库这个人做了一些研究和了解. 本文介绍的业务场景和淘宝的设计TimeTunnel工具,从淘宝数据仓库团队沟通过程中的图像文字si ...
- 用node.js(socket.io)实现数据实时推送
在做商品拍卖的时候,要求在商品的拍卖页面需要实时的更新当前商品的最高价格.实现的方式有很多,比如: 1.setInterval每隔n秒去异步拉取数据(缺点:更新不够实时) 2. AJAX轮询方式方式推 ...
- HTTP的长连接和短连接——Node上的测试
本文主要从实践角度介绍长.短连接在TCP层面的表现,借助Node.JS搭建后台服务,使用WinHTTP.Ajax做客户端请求测试,最后简单涉及WebSocket. 关键字:长连接.短连 ...
- flume架构初接触
flume优点 1．存储数据到任何中央数据库 2．进入数据速率大于写出速率,可以起到缓存作用,保证流的平稳 3．提供文本式路由 4．支持事务 5．可靠.容错.可伸缩.可定制.可管理 put的缺点 1． ...
- PHP ServerPush (推送) 技术的探讨
2016年11月29日17:51:03 转自:http://www.cnblogs.com/hnrainll/archive/2013/05/07/3064874.html 需求: 我想做个会员站内通 ...
- RTP/RTCP/RTSP/SIP/SDP 关系（直接看总结）
RTP/RTCP/RTSP/SIP/SDP 关系 RTP(实时传输协议,传输层) Real-time Transport Protocol)是用于Internet上针对多媒体数据流的一种传输层协议 ...
- 转载：node.js socket.io
本文转自:http://www.xiaocai.name/post/cf1f9_7b6507 学习node.js socket.io 使用 用node.js(socket.io)实现数据实时推送 在 ...
- PHP ServerPush
原文:http://yorsal.com/archives/302 随着人们对Web即时应用需求的不断上升,Server Push(推送)技术在聊天.消息提醒尤其是社交网络等方面开始兴起,成为实时应用 ...
随机推荐
- table的列固定
<body onload="showFix(true,false,initTableId);"> <!doctype html> <html lang ...
- 直接引用MrAdvice.dll文件不能实现AOP拦截，教你1分钟解决这个问题
直接引用MrAdvice.dll文件不能实现AOP拦截,教你1分钟解决这个问题.近日工作中,要实现一个功能,那就是业务层方法里面实现自动缓存.编写业务的C#开发人员只关注如何将业务代码编写正确就可以了 ...
- [LC]111题 二叉树的最小深度 （递归）
①题目 给定一个二叉树,找出其最小深度. 最小深度是从根节点到最近叶子节点的最短路径上的节点数量. 说明: 叶子节点是指没有子节点的节点. 示例: 给定二叉树 [3,9,20,null,null,15 ...
- __FILE__ basename() 作用
__FILE__ basename() 作用 __FILE__ 获取当前文件或文件夹的绝对路径 basename(__FILE__) 获取当前文件或文件夹的名称 basename(__FILE__, ...
- 领扣（LeetCode）删除链表的倒数第N个节点 个人题解
给定一个链表,删除链表的倒数第 n 个节点,并且返回链表的头结点. 示例: 给定一个链表: 1->2->3->4->5, 和 n = 2. 当删除了倒数第二个节点后,链表变为 ...
- SpringBoot让你的Bean动起来(自定义参数解析HandlerMethodArgumentResolver)
SpringBoot让你的Bean动起来(自定义参数解析HandlerMethodArgumentResolver) 简介 我们 Controller 用到的一些 Bean 需要通过一定的方式去获取的 ...
- Git的使用和基本概念理解
参考:https://www.liaoxuefeng.com/wiki/896043488029600 一).git的使用: 1.创建版本库(Resopsitory),相当于一个目录,目录中所有的文件 ...
- (五)OpenStack---M版---双节点搭建---Nova安装和配置
↓↓↓↓↓↓↓↓视频已上线B站↓↓↓↓↓↓↓↓ >>>>>>传送门 1.创建nova 和 nova_api数据库 2.获得 admin 凭证来获取只有管理员能执行的 ...
- 解析深度学习 语音识别实践 pdf下载
链接:https://pan.baidu.com/s/1jd8_2nbz6M9e20lI3JdVGA 密码:1ikc 我从别人那里买的!可以友情赞助资瓷!
- ctf比赛linux文件监控和恢复shell
之前参加ctf比赛时候临时写的,有很多不足,不过可以用,就贴出来分享给大家,希望对大家有帮助. 脚本一:记录当前目录情况 #!/bin/bashfunction getdir(){ for el ...