From 0f56538c27f29cc3d633196ef5e63bea9e60a3d6 Mon Sep 17 00:00:00 2001 From: lb Date: Wed, 3 Jan 2024 15:07:43 +0800 Subject: [PATCH] update websocket reconnect policy & fix some bugs --- src/components/Common/GasFlow/index.jsx | 2 +- .../NatGasFlow/gasChart/chart.config.js | 2 +- .../SmokeHandle/SmokeTrendChart/index.jsx | 2 +- src/components/Common/SmokeHandle/index.jsx | 8 +- .../EnergyCostAnalysis/BadGas/index.jsx | 2 +- .../EnergyCostAnalysis/NatGas/index.jsx | 2 +- src/utils/energeChartOption.js | 4 +- src/utils/index.ts | 142 ++++++++++++++---- 8 files changed, 124 insertions(+), 40 deletions(-) diff --git a/src/components/Common/GasFlow/index.jsx b/src/components/Common/GasFlow/index.jsx index a25ec75..8df5ee2 100644 --- a/src/components/Common/GasFlow/index.jsx +++ b/src/components/Common/GasFlow/index.jsx @@ -94,7 +94,7 @@ function getOptions(showChart, hisState, runState) { .fill(1) .map((_, index) => { const today = new Date(); - const dtimestamp = today - index * 24 * 60 * 60 * 1000; + const dtimestamp = today - (index + 1) * 24 * 60 * 60 * 1000; return `${new Date(dtimestamp).getMonth() + 1}.${new Date( dtimestamp ).getDate()}`; diff --git a/src/components/Common/NatGasFlow/gasChart/chart.config.js b/src/components/Common/NatGasFlow/gasChart/chart.config.js index 2737b19..ee2cee0 100644 --- a/src/components/Common/NatGasFlow/gasChart/chart.config.js +++ b/src/components/Common/NatGasFlow/gasChart/chart.config.js @@ -36,7 +36,7 @@ export default function getOptions(seriesData, name) { .fill(1) .map((_, index) => { const today = new Date(); - const dtimestamp = today - index * 24 * 60 * 60 * 1000; + const dtimestamp = today - (index+1) * 24 * 60 * 60 * 1000; return `${new Date(dtimestamp).getMonth() + 1}.${new Date( dtimestamp ).getDate()}`; diff --git a/src/components/Common/SmokeHandle/SmokeTrendChart/index.jsx b/src/components/Common/SmokeHandle/SmokeTrendChart/index.jsx index 5377d14..cda4cb0 100644 --- a/src/components/Common/SmokeHandle/SmokeTrendChart/index.jsx +++ b/src/components/Common/SmokeHandle/SmokeTrendChart/index.jsx @@ -133,7 +133,7 @@ function getOptions(source, period, trend) { }, }, yAxis: { - name: "单位m³/h", + name: source == 'O2_float' ? "单位:%" : "单位mg/m³", nameTextStyle: { color: "#fff", fontSize: 10, diff --git a/src/components/Common/SmokeHandle/index.jsx b/src/components/Common/SmokeHandle/index.jsx index 94878c0..232f573 100644 --- a/src/components/Common/SmokeHandle/index.jsx +++ b/src/components/Common/SmokeHandle/index.jsx @@ -12,16 +12,16 @@ function SmokeHandle(props) {
- 氧 气 含 量 : {smokeInfo?.O2_float || 0}% + 氧 气 含 量 : {smokeInfo?.O2_float?.toFixed(2) || 0}%
- 氮氧化物浓度: {smokeInfo?.NOX_float || 0}mg/m³ + 氮氧化物浓度: {smokeInfo?.NOX_float?.toFixed(2) || 0}mg/m³
- 二氧化硫浓度: {smokeInfo?.SO2_float || 0}mg/m³ + 二氧化硫浓度: {smokeInfo?.SO2_float?.toFixed(2) || 0}mg/m³
- 颗粒物浓度: {smokeInfo?.dust_float || 0}mg/m³ + 颗粒物浓度: {smokeInfo?.dust_float?.toFixed(2) || 0}mg/m³
diff --git a/src/components/Modules/EnergyCostAnalysis/BadGas/index.jsx b/src/components/Modules/EnergyCostAnalysis/BadGas/index.jsx index 7061af0..d5a882c 100644 --- a/src/components/Modules/EnergyCostAnalysis/BadGas/index.jsx +++ b/src/components/Modules/EnergyCostAnalysis/BadGas/index.jsx @@ -115,7 +115,7 @@ function getOptions(period, trend) { .fill(1) .map((_, index) => { if (period == "week") { - const dtimestamp = today - index * 24 * 60 * 60 * 1000; + const dtimestamp = today - (index+1) * 24 * 60 * 60 * 1000; return `${new Date(dtimestamp).getMonth() + 1}.${new Date( dtimestamp ).getDate()}`; diff --git a/src/components/Modules/EnergyCostAnalysis/NatGas/index.jsx b/src/components/Modules/EnergyCostAnalysis/NatGas/index.jsx index 1a6ce3e..4d80519 100644 --- a/src/components/Modules/EnergyCostAnalysis/NatGas/index.jsx +++ b/src/components/Modules/EnergyCostAnalysis/NatGas/index.jsx @@ -114,7 +114,7 @@ function getOptions(period, trend) { .fill(1) .map((_, index) => { if (period == "week") { - const dtimestamp = today - index * 24 * 60 * 60 * 1000; + const dtimestamp = today - (index+1) * 24 * 60 * 60 * 1000; return `${new Date(dtimestamp).getMonth() + 1}.${new Date( dtimestamp ).getDate()}`; diff --git a/src/utils/energeChartOption.js b/src/utils/energeChartOption.js index 1b67fd6..29d8172 100644 --- a/src/utils/energeChartOption.js +++ b/src/utils/energeChartOption.js @@ -40,7 +40,7 @@ export function getOptions(period, source, trend, options={}) { .fill(1) .map((_, index) => { if (period == "week") { - const dtimestamp = today - index * 24 * 60 * 60 * 1000; + const dtimestamp = today - (index+1) * 24 * 60 * 60 * 1000; return `${new Date(dtimestamp).getMonth() + 1}.${new Date( dtimestamp ).getDate()}`; @@ -65,7 +65,7 @@ export function getOptions(period, source, trend, options={}) { }, }, yAxis: { - name: "单位/m³", + name: source == 'elec' ? '单位/kWh' : "单位/Nm³", nameTextStyle: { color: "#fff", fontSize: 10, diff --git a/src/utils/index.ts b/src/utils/index.ts index d8dfd1b..1b46123 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -12,69 +12,153 @@ class XClient { url: string; name: string; ws: WebSocket; + timeout: number = 1000 * 5; + reconnectCount: number = 0; + onmessage: (msg: MessageEvent) => void; + hb: number = 0; constructor( - url: string, - name: string, + config: { + url: string; + name: string; + timeout?: number; + reconnectCount?: number; + }, onmessage: (msg: MessageEvent) => void ) { - this.url = url; - this.name = name; - this.ws = new WebSocket(url); + this.url = config.url; + this.name = config.name; + this.ws = new WebSocket(config.url); + this.timeout = config.timeout || 1000 * 5; + this.ws.onopen = () => { - // console.log(`[*] ${this.name} ws connected`); + console.log(`[*] ${this.name} 初始化连接成功`); + this.hb = this.heartbeat(); }; + this.onmessage = onmessage; this.ws.onmessage = onmessage; this.ws.onerror = (err) => { - console.log("[*] websocket error!", err); + console.log(`[*] ${this.name} 连接错误`, err); + this.tryReconnect(); }; this.ws.onclose = (e) => { - console.log(`[*] ${this.name} ws closed`); + console.log(`[*] ${this.name} 连接关闭`); }; } + + heartbeat() { + if (this.hb) clearInterval(this.hb); + return setInterval(() => { + console.log(`${this.name} ping...`); + if (this.ws.readyState == WebSocket.OPEN) { + this.ws.send("ping"); + } else { + clearInterval(this.hb); + this.tryReconnect(); + } + }, 1000 * 1); + } + + tryReconnect() { + console.log(`[*] ${this.name} 重连中，已尝试:`, this.reconnectCount, "次"); + setTimeout( + () => { + if (this.ws.readyState === WebSocket.OPEN) { + this.reconnectCount = 0; + console.log(`[*] ${this.name} 已恢复连接，取消重连`); + return; + } + this.reconnectCount++; + this.ws = new WebSocket(this.url); + this.ws.onopen = () => { + console.log(`[*] ${this.name} 重连成功`); + this.reconnectCount = 0; + this.hb = this.heartbeat(); + }; + this.ws.onmessage = this.onmessage; + this.ws.onerror = (err) => { + console.log(`[*] ${this.name} 重连出错`); + this.tryReconnect(); + }; + this.ws.onclose = (e) => { + console.log(`[*] ${this.name} 重连连接关闭`); + }; + }, + this.reconnectCount == 0 ? 0 : this.timeout + ); + } + + logStatus() { + console.log( + `[*] ${this.name} 重连状态: 连接中`, + this.ws.readyState == WebSocket.CONNECTING + ); + console.log( + `[*] ${this.name} 重连状态: 已连接`, + this.ws.readyState == WebSocket.OPEN + ); + console.log( + `[*] ${this.name} 重连状态: 关闭中`, + this.ws.readyState == WebSocket.CLOSING + ); + console.log( + `[*] ${this.name} 重连状态: 关闭`, + this.ws.readyState == WebSocket.CLOSED + ); + } } +const newUser = uuidv4(); new XClient( - // "ws://m306416y13.yicp.fun:35441/xc-screen/websocket/xc001", - // "ws://192.168.1.114:8081/xc-screen/websocket/xc001", - "ws://10.70.180.10:8081/xc-screen/websocket/xc001", - // "ws://192.168.1.12:8081/xc-screen/websocket/xc001", - "DCS_DATA", + { + url: "ws://10.70.180.10:8081/xc-screen/websocket/xc001" + newUser, + name: "DCS_DATA", + // "ws://m306416y13.yicp.fun:35441/xc-screen/websocket/xc001", + // "ws://192.168.1.114:8081/xc-screen/websocket/xc001", + // "ws://192.168.1.12:8081/xc-screen/websocket/xc001", + }, dcsHandler ); -const newUser = uuidv4(); new XClient( - // "ws://192.168.1.74:48080/websocket/message?userId=ENERGY" + newUser, - "ws://10.70.2.2:8080/websocket/message?userId=ENERGY" + newUser, - // "ws://192.168.1.74:48080/websocket/message?userId=ENERGY111", - "MES_DATA", + { + url: "ws://10.70.2.2:8080/websocket/message?userId=ENERGY" + newUser, + name: "MES_DATA", + // "ws://192.168.1.74:48080/websocket/message?userId=ENERGY" + newUser, + // "ws://192.168.1.74:48080/websocket/message?userId=ENERGY111", + }, energeHandler ); // 产线缺陷相关数据 new XClient( - "ws://10.70.2.2:8080/websocket/message?userId=IS" + newUser, - // "ws://192.168.0.33:48082/websocket/message?userId=IS111", - "QUALITY_DATA", + { + url: "ws://10.70.2.2:8080/websocket/message?userId=IS" + newUser, + name: "QUALITY_DATA", + // "ws://192.168.0.33:48082/websocket/message?userId=IS111", + }, IsHandler ); // 良品率相关数据 new XClient( - // "ws://10.70.27.122:8080/websocket/message?userId=CUTTING", - "ws://10.70.2.2:8080/websocket/message?userId=CUTTING" + newUser, - // "ws://192.168.0.33:48082/websocket/message?userId=CUTTING" + newUser, - "CUTTING_DATA", + { + url: "ws://10.70.2.2:8080/websocket/message?userId=CUTTING" + newUser, + name: "CUTTING_DATA", + // "ws://10.70.27.122:8080/websocket/message?userId=CUTTING", + // "ws://192.168.0.33:48082/websocket/message?userId=CUTTING" + newUser, + }, cuttingHandler ); // 烟气处理相关数据 new XClient( - // "ws://10.70.27.122:8080/websocket/message?userId=CUTTING", - "ws://10.70.2.2:8080/websocket/message?userId=GAS" + newUser, - // "ws://192.168.1.62:48082/websocket/message?userId=GAS" + newUser, - "SMOKE_DATA", + { + url: "ws://10.70.2.2:8080/websocket/message?userId=GAS" + newUser, + name: "SMOKE_DATA", + // "ws://10.70.27.122:8080/websocket/message?userId=CUTTING", + // "ws://192.168.1.62:48082/websocket/message?userId=GAS" + newUser, + }, smokeHandler );