实例介绍
【实例简介】
前端js实时读取websocket传来的消息，实时显示折线图
后端是python代码，先启动python3 py-websocket.py
再打开ws.html 即可
【实例截图】
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="renderer" content="ie-comp">
<title>websocket</title>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.0.2/dist/echarts.min.js"></script> <!-- 引入ECharts -->
<style type="text/css">
#chart {
width: 600px;
height: 400px;
}
</style>
</head>
<body>
<div id="chart"></div> <!-- ECharts 容器 -->
<script type="text/javascript">
var ws = null;
var lockReconnect = false;
var chart = null; // ECharts 实例
var data = []; // 存储数据的数组
var timeData = []; // 存储时间的数组
var MAX_POINTS = 10; // 折线图显示的最大数据点数
// 页面加载时初始化 WebSocket 和 ECharts
window.onload = function () {
initChart(); // 初始化ECharts
hangClick(); // 建立WebSocket连接
}
// 初始化ECharts折线图
function initChart() {
chart = echarts.init(document.getElementById('chart'));
var option = {
title: {
text: '实时数据'
},
tooltip: {
trigger: 'axis' // 启用提示信息，鼠标悬停时显示数据
},
xAxis: {
type: 'category',
boundaryGap: false,
data: [] // X轴初始为空
},
yAxis: {
type: 'value'
},
series: [{
name: '功率1',
type: 'line',
data: [] // Y轴数据初始为空
}]
};
chart.setOption(option);
}
// 更新ECharts图表数据
function updateChart(newValue) {
var currentTime = new Date().toLocaleTimeString(); // 获取当前时间作为X轴
data.push(newValue); // 将新数据推入数组
timeData.push(currentTime); // 将当前时间推入时间数组
if (data.length > MAX_POINTS) {
data.shift(); // 超过最大点数时移除最早的数据
timeData.shift(); // 移除最早的时间
}
// 更新图表
chart.setOption({
xAxis: {
data: timeData // 用时间数组更新X轴
},
series: [{
data: data // 更新Y轴数据
}]
});
}
// WebSocket连接和通信
function hangClick() {
ws = new WebSocket("ws://192.168.124.48:8182/modbus");
ws.onopen = function (event) {
heartCheck.reset().start();
console.log("WebSocket 连接已建立...");
}
ws.onmessage = function (event) {
heartCheck.reset().start();
if (typeof (event.data) == "string") {
var newValue = parseFloat(event.data); // 将接收到的字符串数据转换为数值
//console.log("接收到的新数据: " newValue);
updateChart(newValue); // 更新图表
}
};
ws.onerror = function (event) {
console.log("WebSocket 错误");
reconnect();
}
ws.onclose = function (event) {
console.log("WebSocket 连接关闭");
reconnect();
}
}
// 心跳检测
var heartCheck = {
timeout: 3000,
timeoutObj: null,
serverTimeoutObj: null,
reset: function () {
clearTimeout(this.timeoutObj);
clearTimeout(this.serverTimeoutObj);
return this;
},
start: function () {
var self = this;
this.timeoutObj = setTimeout(function () {
if (ws.readyState == 1) ws.send("DATE111");
self.serverTimeoutObj = setTimeout(function () {
hangClick();
}, self.timeout);
}, this.timeout);
}
}
// 重连WebSocket
function reconnect() {
if (lockReconnect) return;
lockReconnect = true;
setTimeout(function () {
hangClick();
lockReconnect = false;
}, 2000);
}
</script>
</body>
</html>
好例子网口号：伸出你的我的手 — 分享！
小贴士
感谢您为本站写下的评论，您的评论对其它用户来说具有重要的参考价值，所以请认真填写。
- 类似“顶”、“沙发”之类没有营养的文字，对勤劳贡献的楼主来说是令人沮丧的反馈信息。
- 相信您也不想看到一排文字/表情墙，所以请不要反馈意义不大的重复字符，也请尽量不要纯表情的回复。
- 提问之前请再仔细看一遍楼主的说明，或许是您遗漏了。
- 请勿到处挖坑绊人、招贴广告。既占空间让人厌烦，又没人会搭理，于人于己都无利。
关于好例子网
本站旨在为广大IT学习爱好者提供一个非营利性互相学习交流分享平台。本站所有资源都可以被免费获取学习研究。本站资源来自网友分享，对搜索内容的合法性不具有预见性、识别性、控制性，仅供学习研究，请务必在下载后24小时内给予删除，不得用于其他任何用途，否则后果自负。基于互联网的特殊性，平台无法对用户传输的作品、信息、内容的权属或合法性、安全性、合规性、真实性、科学性、完整权、有效性等进行实质审查；无论平台是否已进行审查，用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。本站所有资源不代表本站的观点或立场，基于网友分享，根据中国法律《信息网络传播权保护条例》第二十二与二十三条之规定，若资源存在侵权或相关问题请联系本站客服人员，点此联系我们。关于更多版权及免责申明参见 版权及免责申明
网友评论
我要评论