websocket+Echarts实时图表数据展示
WebSocket是一种网络通信协议，是HTML5开始提供的一种在单个TCP连接上进行全双工通讯的协议。
为什么需要WebSocket ?
初次接触 WebSocket的人，都会问同样的问题: 我们已经有了HTTP协议，为什么还需要另-一个协议?它能带来什么好处?
答案很简单，因为HTTP协议有一个缺陷:通信只能由客户端发起。
举例来说， 我们想了解今天的天气，只能是客户端向服务器发出请求，服务器返回查询结果。HTTP 协议做不到服务器主I动向客户端推送信息。
效果图
image.png
实时数据有两种方式:
1.定时器:由前端做，发送请求次数多，耗性能
echart_demo.html 代码如下(head标签引入的 echarts.min.js 需从echart官网（https://echarts.apache.org/zh/builder.html）下载到与echart_demo.html 同级目录)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>websocket+Echarts实时图表数据展示</title>
<script src="echarts.min.js"></script>
<script src="./echart_js.js"></script>
</head>
<body>
<div id="main" style="width: 100%;height:400px;"></div>
</body>
</html>
echart_demo.js 代码如下
window.onload = function () {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [54, 120, 36, 10, 10, 20]
}]
};
// 使用刚指定的配置项和数据显示图表。
// myChart.setOption(option);
// 定时器
function getChart() {
var request = new XMLHttpRequest()
request.open('get', 'http://localhost:8081/get_echart')
request.send()
request.onreadystatechange = function () {
if (request.readyState == 4 && request.status == 200) {
console.log(request.responseText);
// 把字符串对象转换成对象再赋值给option的数据
var data = JSON.parse(request.responseText)
option.series[0].data = data.result
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
} else {
console.log('error');
}
}
}
setInterval(getChart, 2000)
getChart()
}
2.WebSocket:需要后端配合，只需要发送一次请求，节约性能
实现方式.
连接成功建立的回调方法
ws.onopen = function () {alert("WebSocket连接成功")}连接发生错误的回调方法
ws.onerror = function () {alert("WebSocket连接发生错误")};接收到消息的回调方法
ws.onmessage = function (event) {alert(event.data)}连接关闭的回调方法
ws.onclose = function () {alert("WebSocket连接关闭")}
echart_demo.html 代码如下(head标签引入的 echarts.min.js 需从echart官网（https://echarts.apache.org/zh/builder.html）下载到与echart_demo.html 同级目录)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>websocket+Echarts实时图表数据展示</title>
<script src="echarts.min.js"></script>
<script src="./echart_js.js"></script>
</head>
<body>
<div id="main" style="width: 100%;height:400px;"></div>
</body>
</html>
echart_demo.js 代码如下
window.onload = function () {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例',
padding: [
10, // 上
10, // 右
5, // 下
10, // 左
],
left: 'center'
},
tooltip: {},
legend: {
data: ['销量'],
right: '20'
},
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [54, 120, 36, 10, 10, 20]
}]
};
// 使用刚指定的配置项和数据显示图表。
// myChart.setOption(option);
// 连接服务器
var ws = new WebSocket("ws://127.0.0.1:8090")
// 连接成功
ws.onopen = function () {
alert('连接成功')
}
ws.onerror = function () { alert("WebSocket连接发生错误") };
// 接收到消息的回调方法
ws.onmessage = function (msg) {
console.log(
msg.data
);
var data = JSON.parse(msg.data)
option.series[0].data = data.message //赋值
myChart.setOption(option); //设置
}
// 自适应
window.onresize = function () {
myChart.resize()
}
}
