skrazzo-public/vue-with-websockets
Archived
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat(ws): stream data to line chart

Browse Source
This commit is contained in:
Leons Aleksandrovs
2025-07-07 19:14:06 +03:00
parent ab26e9881f
commit f0c94fa3ee
10 changed files with 313 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
backend/data.json Normal file
View File

@@ -0,0 +1,62 @@
[
{
"number": 43,
"timestamp": 1751904678378
},
{
"number": 44,
"timestamp": 1751904688400
},
{
"number": 50,
"timestamp": 1751904698413
},
{
"number": 55,
"timestamp": 1751904708422
},
{
"number": 52,
"timestamp": 1751904718446
},
{
"number": 45,
"timestamp": 1751904728342
},
{
"number": 73,
"timestamp": 1751904738349
},
{
"number": 45,
"timestamp": 1751904748375
},
{
"number": 45,
"timestamp": 1751904758402
},
{
"number": 49,
"timestamp": 1751904768420
},
{
"number": 71,
"timestamp": 1751904778446
},
{
"number": 62,
"timestamp": 1751904788455
},
{
"number": 46,
"timestamp": 1751904798494
},
{
"number": 46,
"timestamp": 1751904808488
},
{
"number": 63,
"timestamp": 1751904818496
}
]

1
backend/index.js
View File

@@ -20,7 +20,6 @@ wss.on('connection', (ws) => {
let previousNumber = randomInt(MIN, MAX); let previousNumber = randomInt(MIN, MAX);
if (history.history.length > 0) { if (history.history.length > 0) {
previousNumber = history.history[history.history.length - 1].number; previousNumber = history.history[history.history.length - 1].number;
console.log(`Previous number: ${previousNumber}`);
} }
/* /*

2
frontend/index.html
View File

@@ -4,7 +4,7 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + Vue</title> <title>WebSocket data</title>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>

54
frontend/package-lock.json generated
View File

@@ -8,11 +8,14 @@
"name": "frontend", "name": "frontend",
"version": "0.0.0", "version": "0.0.0",
"dependencies": { "dependencies": {
"chart.js": "^4.5.0",
"chartjs-adapter-date-fns": "^3.0.0",
"eslint": "^8.57.1", "eslint": "^8.57.1",
"eslint-config-airbnb-base": "^15.0.0", "eslint-config-airbnb-base": "^15.0.0",
"eslint-plugin-import": "^2.32.0", "eslint-plugin-import": "^2.32.0",
"vite": "^7.0.0", "vite": "^7.0.0",
"vue": "^3.5.17" "vue": "^3.5.17",
"vue-chartjs": "^5.3.2"
}, },
"devDependencies": { "devDependencies": {
"@babel/eslint-parser": "^7.28.0", "@babel/eslint-parser": "^7.28.0",
@@ -865,6 +868,12 @@
"@jridgewell/sourcemap-codec": "^1.4.14" "@jridgewell/sourcemap-codec": "^1.4.14"
} }
}, },
"node_modules/@kurkle/color": {
"version": "0.3.4",
"resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.4.tgz",
"integrity": "sha512-M5UknZPHRu3DEDWoipU6sE8PdkZ6Z/S+v4dD+Ke8IaNlpdSQah50lz1KtcFBa2vsdOnwbbnxJwVM4wty6udA5w==",
"license": "MIT"
},
"node_modules/@nicolo-ribaudo/eslint-scope-5-internals": { "node_modules/@nicolo-ribaudo/eslint-scope-5-internals": {
"version": "5.1.1-v1", "version": "5.1.1-v1",
"resolved": "https://registry.npmjs.org/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz", "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz",
@@ -1700,6 +1709,28 @@
"url": "https://github.com/chalk/chalk?sponsor=1" "url": "https://github.com/chalk/chalk?sponsor=1"
} }
}, },
"node_modules/chart.js": {
"version": "4.5.0",
"resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.5.0.tgz",
"integrity": "sha512-aYeC/jDgSEx8SHWZvANYMioYMZ2KX02W6f6uVfyteuCGcadDLcYVHdfdygsTQkQ4TKn5lghoojAsPj5pu0SnvQ==",
"license": "MIT",
"dependencies": {
"@kurkle/color": "^0.3.0"
},
"engines": {
"pnpm": ">=8"
}
},
"node_modules/chartjs-adapter-date-fns": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/chartjs-adapter-date-fns/-/chartjs-adapter-date-fns-3.0.0.tgz",
"integrity": "sha512-Rs3iEB3Q5pJ973J93OBTpnP7qoGwvq3nUnoMdtxO+9aoJof7UFcRbWcIDteXuYd1fgAvct/32T9qaLyLuZVwCg==",
"license": "MIT",
"peerDependencies": {
"chart.js": ">=2.8.0",
"date-fns": ">=2.0.0"
}
},
"node_modules/color-convert": { "node_modules/color-convert": {
"version": "2.0.1", "version": "2.0.1",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -1822,6 +1853,17 @@
"url": "https://github.com/sponsors/ljharb" "url": "https://github.com/sponsors/ljharb"
} }
}, },
"node_modules/date-fns": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz",
"integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==",
"license": "MIT",
"peer": true,
"funding": {
"type": "github",
"url": "https://github.com/sponsors/kossnocorp"
}
},
"node_modules/debug": { "node_modules/debug": {
"version": "4.4.1", "version": "4.4.1",
"resolved": "https://registry.npmjs.org/debug/-/debug-4.4.1.tgz", "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.1.tgz",
@@ -4662,6 +4704,16 @@
} }
} }
}, },
"node_modules/vue-chartjs": {
"version": "5.3.2",
"resolved": "https://registry.npmjs.org/vue-chartjs/-/vue-chartjs-5.3.2.tgz",
"integrity": "sha512-NrkbRRoYshbXbWqJkTN6InoDVwVb90C0R7eAVgMWcB9dPikbruaOoTFjFYHE/+tNPdIe6qdLCDjfjPHQ0fw4jw==",
"license": "MIT",
"peerDependencies": {
"chart.js": "^4.1.1",
"vue": "^3.0.0-0 || ^2.7.0"
}
},
"node_modules/vue-eslint-parser": { "node_modules/vue-eslint-parser": {
"version": "10.2.0", "version": "10.2.0",
"resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-10.2.0.tgz", "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-10.2.0.tgz",

5
frontend/package.json
View File

@@ -9,11 +9,14 @@
"preview": "vite preview" "preview": "vite preview"
}, },
"dependencies": { "dependencies": {
"chart.js": "^4.5.0",
"chartjs-adapter-date-fns": "^3.0.0",
"eslint": "^8.57.1", "eslint": "^8.57.1",
"eslint-config-airbnb-base": "^15.0.0", "eslint-config-airbnb-base": "^15.0.0",
"eslint-plugin-import": "^2.32.0", "eslint-plugin-import": "^2.32.0",
"vite": "^7.0.0", "vite": "^7.0.0",
"vue": "^3.5.17" "vue": "^3.5.17",
"vue-chartjs": "^5.3.2"
}, },
"devDependencies": { "devDependencies": {
"@babel/eslint-parser": "^7.28.0", "@babel/eslint-parser": "^7.28.0",

91
frontend/src/App.vue
View File

@@ -1,30 +1,79 @@
<script setup> <script setup>
import HelloWorld from './components/HelloWorld.vue'; import LineChart from './components/LineChart.vue';
import { ref, onMounted, onUnmounted } from 'vue';
import { tryCatchSync } from './utils/tryCatch.js';
const data = ref([]); // Handles data
const connected = ref(false); // Stores connection state
let socket = null;
// Start WS connection
onMounted(connectWebSocket);
onUnmounted(() => {
// Close socket when component gets unmounted
if (socket) socket.close();
});
function connectWebSocket() {
// Connect to WebSocket server
socket = new WebSocket('/ws');
// Event on connection
socket.onopen = () => {
connected.value = true;
console.log('Connected to websocker');
};
// Event on data received
socket.onmessage = (event) => {
// Try to parse socket message
const { data: message, error: parseErr } = tryCatchSync(() => JSON.parse(event.data));
if (parseErr) {
console.error(`[WS] Error while parsing `, parseErr);
}
// Load data initial data, or update it
switch (message.type) {
case 'history':
// Initial message with history data
data.value = message.data;
break;
case 'update':
// Update message, with new entry
data.value.push(message.data);
// Keep only 15 entries
if (data.value.length > 15) {
data.value = data.value.slice(-15);
}
break;
}
};
// Event on socket close
socket.onclose = () => {
connected.value = false;
console.warn('[WS] Disconnected, trying to reconnect in 5 seconds ...');
setTimeout(connectWebSocket, 5000);
};
// On socket error
socket.onerror = (err) => {
console.error('[WS] Error: ', err);
socket.close();
};
}
</script> </script>
<template> <template>
<div> <main class="container">
<a href="https://vite.dev" target="_blank"> <h1 class="text-primary">Live data from WebSocket</h1>
<img src="/vite.svg" class="logo" alt="Vite logo" /> <LineChart :data="data" />
</a> </main>
<a href="https://vuejs.org/" target="_blank">
<img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
</a>
</div>
<HelloWorld msg="Vite + Vue" />
</template> </template>
<style scoped> <style scoped>
.logo { h1 {
height: 6em; text-align: center;
padding: 1.5em;
will-change: filter;
transition: filter 300ms;
}
.logo:hover {
filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
filter: drop-shadow(0 0 2em #42b883aa);
} }
</style> </style>

40
frontend/src/components/HelloWorld.vue
View File

@@ -1,40 +0,0 @@
<script setup>
import { ref } from 'vue';
defineProps({
msg: String,
});
const count = ref(0);
</script>
<template>
<h1>{{ msg }}</h1>
<div class="card">
<button type="button" @click="count++">count is {{ count }}</button>
<p>
Edit
<code>components/HelloWorld.vue</code> to test HMR
</p>
</div>
<p>
Check out
<a href="https://vuejs.org/guide/quick-start.html#local" target="_blank">create-vue</a>, the
official Vue + Vite starter
</p>
<p>
Learn more about IDE Support for Vue in the
<a href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support" target="_blank"
>Vue Docs Scaling up Guide</a
>.
</p>
<p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
</template>
<style scoped>
.read-the-docs {
color: #888;
}
</style>

105
frontend/src/components/LineChart.vue Normal file
View File

@@ -0,0 +1,105 @@
<script setup>
/**
* LineChart.vue
*
* A reusable line chart component using Chart.js via vue-chartjs.
* Accepts a list of data points as props with the structure:
* [{ number: 42, timestamp: 1720346500000 }]
*/
import { Line } from 'vue-chartjs';
import {
Chart as ChartJS,
LineElement,
PointElement,
LinearScale,
TimeScale,
Title,
Tooltip,
Legend,
} from 'chart.js';
import 'chartjs-adapter-date-fns'; // Enables timestamp formatting with date-fns
import { computed } from 'vue';
// Register required chart.js components
ChartJS.register(LineElement, PointElement, LinearScale, TimeScale, Title, Tooltip, Legend);
// Define props - expects `data` with { number, timestamp }
const props = defineProps({
data: {
type: Array,
required: true,
validator: (value) =>
value.every((p) => typeof p.number === 'number' && typeof p.timestamp === 'number'),
},
});
// Create reactive chart data computed from data prop
const chartData = computed(() => ({
datasets: [
{
label: 'Real time generated number',
data: props.data.map((p) => ({
x: p.timestamp,
y: p.number,
})),
borderColor: '#42b983',
backgroundColor: 'rgba(66, 185, 131, 0.15)',
pointRadius: 3,
tension: 0.4, // smooth curve
fill: true,
},
],
}));
// Define chart configuration options
const chartOptions = {
animation: false,
responsive: true,
maintainAspectRatio: false, // allow flexible height
scales: {
x: {
type: 'time',
time: {
tooltipFormat: 'HH:mm:ss',
displayFormats: {
second: 'HH:mm:ss',
minute: 'HH:mm',
},
},
title: {
display: true,
text: 'Time',
},
},
y: {
beginAtZero: true,
min: 0,
max: 100,
title: {
display: true,
text: 'Number value',
},
},
},
plugins: {
legend: {
display: true,
position: 'bottom',
},
tooltip: {
callbacks: {
// Format tooltip values
label: (context) => `Value: ${context.parsed.y}`,
},
},
},
};
</script>
<template>
<!-- Chart container with max height -->
<div style="height: 600px">
<Line :data="chartData" :options="chartOptions" />
</div>
</template>

79
frontend/src/style.css
View File

@@ -1,79 +1,18 @@
:root {
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;
font-weight: 400;
color-scheme: light dark;
color: rgba(255, 255, 255, 0.87);
background-color: #242424;
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a {
font-weight: 500;
color: #646cff;
text-decoration: inherit;
}
a:hover {
color: #535bf2;
}
body { body {
margin: 0; background-color: #212437;
display: flex; font-family: Arial, Helvetica, sans-serif;
place-items: center;
min-width: 320px;
min-height: 100vh;
} }
h1 { .text-primary {
font-size: 3.2em; color: oklch(92.8% 0.006 264.531);
line-height: 1.1;
} }
button { .text-secondary {
border-radius: 8px; color: oklch(70.7% 0.022 261.325);
border: 1px solid transparent;
padding: 0.6em 1.2em;
font-size: 1em;
font-weight: 500;
font-family: inherit;
background-color: #1a1a1a;
cursor: pointer;
transition: border-color 0.25s;
}
button:hover {
border-color: #646cff;
}
button:focus,
button:focus-visible {
outline: 4px auto -webkit-focus-ring-color;
} }
.card { .container {
padding: 2em; width: 100%;
} max-width: 1140px;
#app {
max-width: 1280px;
margin: 0 auto; margin: 0 auto;
padding: 2rem;
text-align: center;
}
@media (prefers-color-scheme: light) {
:root {
color: #213547;
background-color: #ffffff;
}
a:hover {
color: #747bff;
}
button {
background-color: #f9f9f9;
}
} }

9
frontend/src/utils/tryCatch.js Normal file
View File

@@ -0,0 +1,9 @@
// function for sync
export function tryCatchSync(callback) {
try {
const data = callback();
return { data, error: null };
} catch (error) {
return { data: null, error: error };
}
}