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(推送)技术在聊天.消息提醒尤其是社交网络等方面开始兴起,成为实时应用 ...
随机推荐
- python中字符串常见操作（二）
# 可迭代对象有:字典,列表,元组,字符串,集合 str1 = '192.168.1.1' str2 = 'as df gh jk' str3 = '小李子' str4 = ['aa','bb','c ...
- 深入理解计算机系统 第八章 异常控制流 part2
关于进程,需要关注其提供给应用程序的两个关键抽象: 1.一个独立的逻辑控制流,它提供一个假象,好像我们的程序独占地使用处理器 2.一个私有的地址空间,它提供一个假象,好像我们的程序独占地使用内存系统 ...
- [Office] 显示Office 2013中的Developer Tab和启用Macro
显示Developer Tab是对Office 2013进行开发的前提条件. 在Excel 2013中,打开Excel Option: 只要勾选对应的Developer选项即可显示该tab. 随着Of ...
- js 把数组中每个元素的某个字段取出
方法一:map() let cities = [ {city:"北京",bOn:false}, {city:"上海",bOn:false}, {city:&qu ...
- MathType转Word公式(OMML)
背景 由于之前个人喜欢在Word里做笔记,而有很多笔记里存在着大量的公式.在早期,由于对Word自身的公式的不理解,所以便使用了MathType这个工具来编写公式.但是现在本人已经转战到LatTeX了 ...
- php的精度计算问题（bcadd和bcsub）
一.前言 我们在进行php开发的时候经常会遇到浮点型的问题,特别是涉及金额的部分,常常需要进行加减运算.当小数点的位数比较多的时候,往往容易犯一些很低级的错误.这里记录一下php的精度计算和封装的小d ...
- 【python测试开发栈】python基础语法大盘点
周边很多同学在用python,但是偶尔会发现有人对python的基础语法还不是特别了解,所以帮大家梳理了python的基础语法(文中的介绍以python3为例).如果你已然是python大牛,可以跳过 ...
- 关于 “'sqlite3' 不是内部或外部命令.....”问题
学习django 按书上的 执行 manage.py dbshell 时, 报“'sqlite3' 不是内部或外部命令,也不是可运行的程序 或批处理文件.” 也就是指,环境变量中没有“sqlite3 ...
- javescript 的 对象
一,定义:对象是JavaScript的一个基本数据类型,是一种复合值,它将很多值(原始值或者其他对象)聚合在一起,可通过名字(name/作为属性名)访问这些值.即属性的无序集合. 关键是name属性名 ...
- 细说JVM内存模型
细说JVM内存模型 前言 在正式学习 JVM 内存模型之前,先注意以下几个是问题: JVM 内存模型与 JAVA 内存模型不是同一个概念.JVM 内存模型是从运行时数据区的结构的角度描述的概念:而 J ...