diff --git a/src/App.vue b/src/App.vue
index a6e8c1c..5a5db78 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -49,6 +49,22 @@
+
+
+
@@ -102,7 +118,6 @@ import type { ServerData } from './types'
const JSON_API = '/json/stats.json'
const CARD_WIDTH = 350
-const REFRESH_INTERVAL = 500
const MIN_FETCH_INTERVAL = 500
const { width: WindowWidth } = useWindowSize()
@@ -111,6 +126,7 @@ const settings = useLocalStorage('sstl-settings', {
layout: 'grid',
compactMode: false,
showCpuChart: false,
+ cpuChartHistoryKeep: 300,
}, {
mergeDefaults: true,
})
@@ -124,6 +140,7 @@ const error = ref(false)
const fetching = ref(false)
const showSettingPanel = ref(false)
const latestUpdated = ref(0)
+const timer = ref()
const serverCardCount = computed(() => {
return Math.floor(WindowWidth.value / CARD_WIDTH) || 1
@@ -138,9 +155,11 @@ onMounted(() => {
.then(res => res.json())
.then((data) => {
serverData.value = data
- setInterval(() => {
+ timer.value = new Worker(new URL('./worker/timer.js', import.meta.url))
+ timer.value.addEventListener('message', () => {
fetchData()
- }, REFRESH_INTERVAL)
+ })
+ timer.value.postMessage('start')
})
.catch(() => {
error.value = true
@@ -150,6 +169,11 @@ onMounted(() => {
})
})
+onUnmounted(() => {
+ if (timer.value)
+ timer.value.postMessage('stop')
+})
+
function fetchData() {
if (fetching.value)
return
diff --git a/src/worker/timer.js b/src/worker/timer.js
new file mode 100644
index 0000000..6934e7a
--- /dev/null
+++ b/src/worker/timer.js
@@ -0,0 +1,13 @@
+let timer = null
+
+onmessage = (e) => {
+ if (e.data === 'start') {
+ timer = setInterval(() => {
+ postMessage('tick')
+ }, 500)
+ }
+ if (e.data === 'stop') {
+ clearInterval(timer)
+ timer = null
+ }
+}