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(推送)技术在聊天.消息提醒尤其是社交网络等方面开始兴起,成为实时应用 ...
随机推荐
- [转载]【转】教你如何实现linux和Windows之间的文件共享，samba的安
原文地址:[转]教你如何实现linux和Windows之间的文件共享,samba的安装与配置作者:铅笔小蜡 本人在虚拟机下装fedora13,已经实现.1. 首先检查os是否安装好了samba. [r ...
- WIN7安装Docker Toolbox、制作镜像并发到阿里云
一.安装Docker Toolbox,并配置国内源加速 WIndows7不支持Hyper-v,所以只能采用Docker Toolbox的方式使用Docker.传送门:http://mirrors.al ...
- 大宇java面试系列（二）：jvm组成部分
1. 说一下 JVM 的主要组成部分?及其作用? 类加载器(ClassLoader) 运行时数据区(Runtime Data Area) 执行引擎(Execution Engine) 本地库接口(Na ...
- Ubuntu 16.04.4 LTS设置root用户登陆图形界面
普通用户登陆真是太憋屈,这也不能那也不能,root用户登录就可以肆无忌惮了 本方法采用nano编辑器,ubantu版本Ubuntu 16.04.4 LTS,其他版本应该也一样,下面进入正题 1.终端登 ...
- python脚本编写（纯干货）
写博客的经验不是很多,写的不好或者有什么建议请留言或者联系作者 文章所有权归作者所有,转载转发请联系作者,侵权必纠. 废话不多说,直接开始吧! python脚本的作用也就不说了,首先是一个reques ...
- ArcGIS 问题汇总
1.Arcgis10.4出现Manager打不开的情况 解决方法: 1.检查进程中是否有占用4000以及6080端口的进程,如果有关闭 2.检查进程中是否有javaw.exe这个进程,如果有就把他结束 ...
- PHP创建对象的6种方式
创建对象实例: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 ...
- beta week 1/2 Scrum立会报告+燃尽图 02
此作业要求参见https://edu.cnblogs.com/campus/nenu/2019fall/homework/9912 一.小组情况 队名:扛把子 组长:孙晓宇 组员:宋晓丽 梁梦瑶 韩昊 ...
- 我的书籍《深入解析Java编译器：源码剖析与实例详解》就要出版了
一个十足的技术迷,2013年毕业,做过ERP.游戏.计算广告,在大公司呆过,但终究不满足仅对技术的应用,在2018年末离开了公司,全职写了一本书<深入解析Java编译器:源码剖析与实例详解> ...
- setBounds方法，与setLayout(null)
首先把相关容器的布局方式设为 setLayout(null); 然后调用组件的 setBounds() 方法 设置button的位置为(100,100) 长宽分别为 60,25 jButton.se ...