From c8916c934622d61312fd600e97f59042138affae Mon Sep 17 00:00:00 2001 From: cyator Date: Sat, 2 Jul 2022 15:27:44 +0300 Subject: [PATCH 1/8] updated telegraf.conf --- telegraf.conf | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/telegraf.conf b/telegraf.conf index f63d13e..18fc24d 100644 --- a/telegraf.conf +++ b/telegraf.conf @@ -1,10 +1,10 @@ # Configuration for telegraf agent [agent] ## Default data collection interval for all inputs - interval = "10s" + interval = "0.5s" ## Rounds collection interval to 'interval' ## ie, if interval="10s" then always collect on :00, :10, :20, etc. - round_interval = true + round_interval = false ## Telegraf will send metrics to outputs in batches of at most ## metric_batch_size metrics. From bdda64ab783491066a7391edfe0e89c949a1d4ef Mon Sep 17 00:00:00 2001 From: cyator Date: Sat, 2 Jul 2022 16:26:15 +0300 Subject: [PATCH 2/8] added basic influx query --- client/package-lock.json | 5 +++++ client/package.json | 3 ++- client/pages/index.js | 43 ++++++++++++++++++++++++++++++++++++++-- 3 files changed, 48 insertions(+), 3 deletions(-) diff --git a/client/package-lock.json b/client/package-lock.json index 857a33a..03bd011 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -57,6 +57,11 @@ "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==", "dev": true }, + "@influxdata/influxdb-client": { + "version": "1.27.0", + "resolved": "https://registry.npmjs.org/@influxdata/influxdb-client/-/influxdb-client-1.27.0.tgz", + "integrity": "sha512-hOBi+ApIurDd8jFWo+eYjMWWsDRp3wih/U/NOVRoHaTOE8ihSQthi9wfMD4YeVqt4pCN6ygIwo7lEKFXwNuwcA==" + }, "@next/env": { "version": "12.2.0", "resolved": "https://registry.npmjs.org/@next/env/-/env-12.2.0.tgz", diff --git a/client/package.json b/client/package.json index 90bf833..b4a28b2 100644 --- a/client/package.json +++ b/client/package.json @@ -3,12 +3,13 @@ "version": "0.1.0", "private": true, "dependencies": { + "@influxdata/influxdb-client": "^1.27.0", "chart.js": "^3.7.1", "next": "^12.2.0", "react": "^18.1.0", "react-chartjs-2": "^4.1.0", "react-dom": "^18.1.0", - "socket.io-client": "^4.5.0" + "socket.io-client": "^4.5.1" }, "scripts": { "dev": "next dev", diff --git a/client/pages/index.js b/client/pages/index.js index 49593ae..2b9eb7f 100644 --- a/client/pages/index.js +++ b/client/pages/index.js @@ -11,7 +11,8 @@ const socket = io( process.env.NEXT_PUBLIC_SERVER_URL || 'http://localhost:5000' ); -function Home() { +function Home({ o }) { + console.log(o); const [y, setY] = useSessionStorage('x', []); const [x, setX] = useSessionStorage('y', []); @@ -106,7 +107,7 @@ function Home() { margin: 'auto', }} > - Timestamp: {timestamp} + Timestamp: {o._value} State: {state} Altitude: {altitude} Longitude: {longitude} @@ -124,3 +125,41 @@ function Home() { } export default Home; + +export async function getServerSideProps() { + // connect to influx + + const { InfluxDB } = require('@influxdata/influxdb-client'); + + const token = 'mytoken'; + const org = 'robotus'; + const bucket = 'telemetry'; + + const client = new InfluxDB({ url: 'http://localhost:8086', token: token }); + + const queryApi = client.getQueryApi(org); + + const query = `from(bucket: "telemetry") |> range(start: -1d)`; + queryApi.queryRows(query, { + next(row, tableMeta) { + const o = tableMeta.toObject(row); + console.log( + `${o._time} ${o._measurement}: ${o._field}=${o._value}` + ); + }, + error(error) { + console.error(error); + console.log('QUERY Finished ERROR'); + }, + complete() { + console.log('QUERY Finished SUCCESS'); + }, + }); + + // Pass data to the page via props + return { + props: { + o: {}, + }, + }; +} From cade7e85560c384a1f83a92c772abe98fb82c6c7 Mon Sep 17 00:00:00 2001 From: cyator Date: Sat, 2 Jul 2022 21:14:53 +0300 Subject: [PATCH 3/8] removed ws from node-server and added google charts to client --- client/components/GChart.js | 19 ++++++ client/package-lock.json | 5 ++ client/package.json | 1 + client/pages/index.js | 111 ++++++++++++++++++------------- node-server/app.js | 15 +++-- node-server/config/mqtt/index.js | 58 ++++++++-------- node-server/package.json | 1 + 7 files changed, 125 insertions(+), 85 deletions(-) create mode 100644 client/components/GChart.js diff --git a/client/components/GChart.js b/client/components/GChart.js new file mode 100644 index 0000000..6aab978 --- /dev/null +++ b/client/components/GChart.js @@ -0,0 +1,19 @@ +import React from 'react'; +import { Chart } from 'react-google-charts'; + +export function GChart({ data }) { + const options = { + curveType: 'function', + legend: { position: 'bottom' }, + }; + + return ( + + ); +} diff --git a/client/package-lock.json b/client/package-lock.json index 03bd011..319c171 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -1777,6 +1777,11 @@ "scheduler": "^0.23.0" } }, + "react-google-charts": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/react-google-charts/-/react-google-charts-4.0.0.tgz", + "integrity": "sha512-9OG0EkBb9JerKEPQYdhmAXnhGLzOdOHOPS9j7l+P1a3z1kcmq9mGDa7PUoX/VQUY4IjZl2/81nsO4o+1cuYsuw==" + }, "regenerator-runtime": { "version": "0.13.9", "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz", diff --git a/client/package.json b/client/package.json index b4a28b2..db22060 100644 --- a/client/package.json +++ b/client/package.json @@ -9,6 +9,7 @@ "react": "^18.1.0", "react-chartjs-2": "^4.1.0", "react-dom": "^18.1.0", + "react-google-charts": "^4.0.0", "socket.io-client": "^4.5.1" }, "scripts": { diff --git a/client/pages/index.js b/client/pages/index.js index 2b9eb7f..499e544 100644 --- a/client/pages/index.js +++ b/client/pages/index.js @@ -1,68 +1,70 @@ import Head from 'next/head'; import styles from '../styles/Home.module.css'; -import { io } from 'socket.io-client'; -import { useEffect, useState } from 'react'; +// import { io } from 'socket.io-client'; +//import { useEffect, useState } from 'react'; +import { useState } from 'react'; -import LineChart from '../components/LineChart'; +//import LineChart from '../components/LineChart'; +import { GChart } from '../components/GChart'; import useSessionStorage from '../hooks/useSessionStorage'; -const socket = io( - process.env.NEXT_PUBLIC_SERVER_URL || 'http://localhost:5000' -); +// const socket = io( +// process.env.NEXT_PUBLIC_SERVER_URL || 'http://localhost:5000' +// ); function Home({ o }) { console.log(o); const [y, setY] = useSessionStorage('x', []); const [x, setX] = useSessionStorage('y', []); - const [timestamp, setTimestamp] = useSessionStorage('timestamp', 0); - const [state, setState] = useSessionStorage('state', 0); - const [altitude, setAltitude] = useSessionStorage('altitude', 0); - const [latitude, setLatitude] = useSessionStorage('latitude', 0); - const [longitude, setLongitude] = useSessionStorage('longitude', 0); + // const [timestamp, setTimestamp] = useSessionStorage('timestamp', 0); + // const [state, setState] = useSessionStorage('state', 0); + // const [altitude, setAltitude] = useSessionStorage('altitude', 0); + // const [latitude, setLatitude] = useSessionStorage('latitude', 0); + // const [longitude, setLongitude] = useSessionStorage('longitude', 0); const [ignitionStatus, setIgnitionStatus] = useState(false); const [ejectionStatus, setEjectionStatus] = useState(false); - useEffect(() => { - // client-side - socket.on('connect', () => { - console.log(`${socket.id} connected to server`); - }); - socket.on('message', (message) => { - const { altitude, longitude, latitude, state, timestamp } = message; - console.log('message', message); - setX([...x, altitude]); - setY([...y, timestamp]); - setLongitude(longitude); - setLatitude(latitude); - setState(state); - setTimestamp(timestamp); - }); - - socket.on('disconnect', () => { - console.log('ws disconnected from server'); - }); - }, [ - x, - y, - setAltitude, - setLatitude, - setLongitude, - setState, - setTimestamp, - setX, - setY, - ]); + // useEffect(() => { + // // client-side + // socket.on('connect', () => { + // console.log(`${socket.id} connected to server`); + // }); + // socket.on('message', (message) => { + // const { altitude, longitude, latitude, state, timestamp } = message; + // console.log('message', message); + // setX([...x, altitude]); + // setY([...y, timestamp]); + // setLongitude(longitude); + // setLatitude(latitude); + // setState(state); + // setTimestamp(timestamp); + // }); + + // socket.on('disconnect', () => { + // console.log('ws disconnected from server'); + // }); + // }, [ + // x, + // y, + // setAltitude, + // setLatitude, + // setLongitude, + // setState, + // setTimestamp, + // setX, + // setY, + // ]); const toggleIgnition = () => { - socket.emit('ignite', !ignitionStatus ? 'on' : 'off'); + // socket.emit('ignite', !ignitionStatus ? 'on' : 'off'); setIgnitionStatus(!ignitionStatus); }; const toggleEjection = () => { - socket.emit('eject', !ejectionStatus ? 'on' : 'off'); + // socket.emit('eject', !ejectionStatus ? 'on' : 'off'); setEjectionStatus(!ejectionStatus); }; @@ -108,16 +110,29 @@ function Home({ o }) { }} > Timestamp: {o._value} - State: {state} - Altitude: {altitude} - Longitude: {longitude} - Latitude: {latitude} + State: + Altitude: + Longitude: + Latitude:
- + + {/* */}
diff --git a/node-server/app.js b/node-server/app.js index 5a9f8d7..780fcec 100644 --- a/node-server/app.js +++ b/node-server/app.js @@ -18,14 +18,15 @@ app.get('/', (req, res) => { res.send('welcome to base station'); }); // handle websocket connections -io.on('connection', (socket) => { - console.log(`user connected: ${socket.id}`); - mqtt(socket); +// io.on('connection', (socket) => { +// console.log(`user connected: ${socket.id}`); - socket.on('disconnect', () => { - console.log(`user has disconnected: ${socket.id}`); - }); -}); +// socket.on('disconnect', () => { +// console.log(`user has disconnected: ${socket.id}`); +// }); +// }); + +mqtt(); const PORT = process.env.PORT || 5000; server.listen(PORT, () => { diff --git a/node-server/config/mqtt/index.js b/node-server/config/mqtt/index.js index 28b2977..0bf041f 100644 --- a/node-server/config/mqtt/index.js +++ b/node-server/config/mqtt/index.js @@ -1,6 +1,6 @@ const mqtt = require('mqtt'); -module.exports = (socket) => { +module.exports = () => { //mqtt client const client = mqtt.connect( process.env.BROKER_URL || 'mqtt://localhost:1883' @@ -17,42 +17,40 @@ module.exports = (socket) => { console.log(granted, 'granted'); }); - socket.on('ignite', (payload) => { - console.log('ignition payload', payload); - client.publish( - 'esp32/ignition', - payload, - { qos: 1, retain: false }, - (PacketCallback, err) => { - if (err) { - console.log(err, 'MQTT publish packet'); - } - } - ); - }); - socket.on('eject', (payload) => { - console.log('eject payload', payload); - client.publish( - 'esp32/ejection', - payload, - { qos: 1, retain: false }, - (PacketCallback, err) => { - if (err) { - console.log(err, 'MQTT publish packet'); - } - } - ); - }); + // socket.on('ignite', (payload) => { + // console.log('ignition payload', payload); + // client.publish( + // 'esp32/ignition', + // payload, + // { qos: 1, retain: false }, + // (PacketCallback, err) => { + // if (err) { + // console.log(err, 'MQTT publish packet'); + // } + // } + // ); + // }); + // socket.on('eject', (payload) => { + // console.log('eject payload', payload); + // client.publish( + // 'esp32/ejection', + // payload, + // { qos: 1, retain: false }, + // (PacketCallback, err) => { + // if (err) { + // console.log(err, 'MQTT publish packet'); + // } + // } + // ); + // }); }); client.on('message', (topic, message, packet) => { //console.log(packet, packet.payload.toString()); if (topic === 'esp32/message') { - console.log('message', JSON.parse(message)); - socket.emit('message', JSON.parse(message)); + // socket.emit('message', JSON.parse(message)); } - }); }; diff --git a/node-server/package.json b/node-server/package.json index d0955bf..c10a002 100644 --- a/node-server/package.json +++ b/node-server/package.json @@ -4,6 +4,7 @@ "private": true, "scripts": { "start": "node app.js", + "server":"nodemon app.js", "dev": "concurrently \"nodemon app.js\" \"npm run dev-client\"", "prod": "concurrently \"npm start \" \"npm run prod-client\"", "dev-client": "npm run dev --prefix ../client", From 3fc847ac91cdff22e2145439c9ae17319192490e Mon Sep 17 00:00:00 2001 From: cyator Date: Sun, 3 Jul 2022 16:29:31 +0300 Subject: [PATCH 4/8] successful query from influx --- client/config/influx.js | 10 +++ client/pages/api/altitude.js | 34 ++++++++++ client/pages/index.js | 120 ++++++----------------------------- 3 files changed, 62 insertions(+), 102 deletions(-) create mode 100644 client/config/influx.js create mode 100644 client/pages/api/altitude.js diff --git a/client/config/influx.js b/client/config/influx.js new file mode 100644 index 0000000..2f061b1 --- /dev/null +++ b/client/config/influx.js @@ -0,0 +1,10 @@ +// connect to influx + +import { InfluxDB } from '@influxdata/influxdb-client'; + +const url = 'http://localhost:8086'; +const token = 'mytoken'; + +const client = new InfluxDB({ url: url, token: token }); + +export default client; diff --git a/client/pages/api/altitude.js b/client/pages/api/altitude.js new file mode 100644 index 0000000..89ad607 --- /dev/null +++ b/client/pages/api/altitude.js @@ -0,0 +1,34 @@ +import client from '../../config/influx'; + +export default async function handle(req, res) { + const org = 'robotus'; + const bucket = 'telemetry'; + const queryApi = client.getQueryApi(org); + + const query = ` + from(bucket: "${bucket}") + |> range(start: -1d) + |> filter(fn: (r) => r["_measurement"] == "mqtt_consumer") + |> filter(fn: (r) => r["topic"] == "esp32/message") + |> filter(fn: (r) => r["_field"] == "altitude") + |> tail(n: 100) + `; + let arr = []; + queryApi.queryRows(query, { + next(row, tableMeta) { + const o = tableMeta.toObject(row); + let i = []; + i[0] = o._time; + i[1] = o._value; + arr.push(i); + }, + error(error) { + console.error(error); + console.log('QUERY Finished ERROR'); + }, + complete() { + console.log('QUERY Finished SUCCESS'); + res.json(arr); + }, + }); +} diff --git a/client/pages/index.js b/client/pages/index.js index 499e544..2b5ad34 100644 --- a/client/pages/index.js +++ b/client/pages/index.js @@ -1,62 +1,29 @@ import Head from 'next/head'; import styles from '../styles/Home.module.css'; -// import { io } from 'socket.io-client'; -//import { useEffect, useState } from 'react'; -import { useState } from 'react'; +import { useState, useEffect } from 'react'; -//import LineChart from '../components/LineChart'; import { GChart } from '../components/GChart'; -import useSessionStorage from '../hooks/useSessionStorage'; - -// const socket = io( -// process.env.NEXT_PUBLIC_SERVER_URL || 'http://localhost:5000' -// ); - -function Home({ o }) { - console.log(o); - const [y, setY] = useSessionStorage('x', []); - const [x, setX] = useSessionStorage('y', []); - - // const [timestamp, setTimestamp] = useSessionStorage('timestamp', 0); - // const [state, setState] = useSessionStorage('state', 0); - // const [altitude, setAltitude] = useSessionStorage('altitude', 0); - // const [latitude, setLatitude] = useSessionStorage('latitude', 0); - // const [longitude, setLongitude] = useSessionStorage('longitude', 0); +//import useSessionStorage from '../hooks/useSessionStorage'; +function Home() { + const [plot, setPlot] = useState([]); const [ignitionStatus, setIgnitionStatus] = useState(false); const [ejectionStatus, setEjectionStatus] = useState(false); - // useEffect(() => { - // // client-side - // socket.on('connect', () => { - // console.log(`${socket.id} connected to server`); - // }); - // socket.on('message', (message) => { - // const { altitude, longitude, latitude, state, timestamp } = message; - // console.log('message', message); - // setX([...x, altitude]); - // setY([...y, timestamp]); - // setLongitude(longitude); - // setLatitude(latitude); - // setState(state); - // setTimestamp(timestamp); - // }); + useEffect(() => { + const timer = setInterval(() => { + fetch('/api/altitude') + .then((res) => res.json()) + .then((data) => { + setPlot(data); + }); + }, 300); - // socket.on('disconnect', () => { - // console.log('ws disconnected from server'); - // }); - // }, [ - // x, - // y, - // setAltitude, - // setLatitude, - // setLongitude, - // setState, - // setTimestamp, - // setX, - // setY, - // ]); + return () => { + clearInterval(timer); + }; + }, []); const toggleIgnition = () => { // socket.emit('ignite', !ignitionStatus ? 'on' : 'off'); @@ -109,7 +76,7 @@ function Home({ o }) { margin: 'auto', }} > - Timestamp: {o._value} + Timestamp: State: Altitude: Longitude: @@ -119,20 +86,7 @@ function Home({ o }) {
- - {/* */} +
@@ -140,41 +94,3 @@ function Home({ o }) { } export default Home; - -export async function getServerSideProps() { - // connect to influx - - const { InfluxDB } = require('@influxdata/influxdb-client'); - - const token = 'mytoken'; - const org = 'robotus'; - const bucket = 'telemetry'; - - const client = new InfluxDB({ url: 'http://localhost:8086', token: token }); - - const queryApi = client.getQueryApi(org); - - const query = `from(bucket: "telemetry") |> range(start: -1d)`; - queryApi.queryRows(query, { - next(row, tableMeta) { - const o = tableMeta.toObject(row); - console.log( - `${o._time} ${o._measurement}: ${o._field}=${o._value}` - ); - }, - error(error) { - console.error(error); - console.log('QUERY Finished ERROR'); - }, - complete() { - console.log('QUERY Finished SUCCESS'); - }, - }); - - // Pass data to the page via props - return { - props: { - o: {}, - }, - }; -} From ef65a0b364a16acec15b73afea2a6777b59e6c83 Mon Sep 17 00:00:00 2001 From: cyator Date: Sun, 3 Jul 2022 21:04:44 +0300 Subject: [PATCH 5/8] fetch api error handling --- client/package-lock.json | 162 ++++++++++++----------------------- client/package.json | 7 +- client/pages/api/altitude.js | 2 +- client/pages/index.js | 21 ++++- 4 files changed, 77 insertions(+), 115 deletions(-) diff --git a/client/package-lock.json b/client/package-lock.json index 319c171..b84fd32 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -202,11 +202,6 @@ "integrity": "sha512-LwzQKA4vzIct1zNZzBmRKI9QuNpLgTQMEjsQLf3BXuGYb3QPTP4Yjf6mkdX+X1mYttZ808QpOwAzZjv28kq7DA==", "dev": true }, - "@socket.io/component-emitter": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/@socket.io/component-emitter/-/component-emitter-3.1.0.tgz", - "integrity": "sha512-+9jVqKhRSpsc591z5vX+X5Yyw+he/HCB4iQ/RYxw35CEPaY1gnsNE43nf9n9AaYjAQrTiI/mOwKUKdUs9vf7Xg==" - }, "@swc/helpers": { "version": "0.4.2", "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.4.2.tgz", @@ -222,41 +217,41 @@ "dev": true }, "@typescript-eslint/parser": { - "version": "5.30.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.30.0.tgz", - "integrity": "sha512-2oYYUws5o2liX6SrFQ5RB88+PuRymaM2EU02/9Ppoyu70vllPnHVO7ioxDdq/ypXHA277R04SVjxvwI8HmZpzA==", + "version": "5.30.4", + "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.30.4.tgz", + "integrity": "sha512-/ge1HtU63wVoED4VnlU2o+FPFmi017bPYpeSrCmd8Ycsti4VSxXrmcpXXm7JpI4GT0Aa7qviabv1PEp6L5bboQ==", "dev": true, "requires": { - "@typescript-eslint/scope-manager": "5.30.0", - "@typescript-eslint/types": "5.30.0", - "@typescript-eslint/typescript-estree": "5.30.0", + "@typescript-eslint/scope-manager": "5.30.4", + "@typescript-eslint/types": "5.30.4", + "@typescript-eslint/typescript-estree": "5.30.4", "debug": "^4.3.4" } }, "@typescript-eslint/scope-manager": { - "version": "5.30.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.30.0.tgz", - "integrity": "sha512-3TZxvlQcK5fhTBw5solQucWSJvonXf5yua5nx8OqK94hxdrT7/6W3/CS42MLd/f1BmlmmbGEgQcTHHCktUX5bQ==", + "version": "5.30.4", + "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.30.4.tgz", + "integrity": "sha512-DNzlQwGSiGefz71JwaHrpcaAX3zYkEcy8uVuan3YMKOa6qeW/y+7SaD8KIsIAruASwq6P+U4BjWBWtM2O+mwBQ==", "dev": true, "requires": { - "@typescript-eslint/types": "5.30.0", - "@typescript-eslint/visitor-keys": "5.30.0" + "@typescript-eslint/types": "5.30.4", + "@typescript-eslint/visitor-keys": "5.30.4" } }, "@typescript-eslint/types": { - "version": "5.30.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.30.0.tgz", - "integrity": "sha512-vfqcBrsRNWw/LBXyncMF/KrUTYYzzygCSsVqlZ1qGu1QtGs6vMkt3US0VNSQ05grXi5Yadp3qv5XZdYLjpp8ag==", + "version": "5.30.4", + "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.30.4.tgz", + "integrity": "sha512-NTEvqc+Vvu8Q6JeAKryHk2eqLKqsr2St3xhIjhOjQv5wQUBhaTuix4WOSacqj0ONWfKVU12Eug3LEAB95GBkMA==", "dev": true }, "@typescript-eslint/typescript-estree": { - "version": "5.30.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.30.0.tgz", - "integrity": "sha512-hDEawogreZB4n1zoqcrrtg/wPyyiCxmhPLpZ6kmWfKF5M5G0clRLaEexpuWr31fZ42F96SlD/5xCt1bT5Qm4Nw==", + "version": "5.30.4", + "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.30.4.tgz", + "integrity": "sha512-V4VnEs6/J9/nNizaA12IeU4SAeEYaiKr7XndLNfV5+3zZSB4hIu6EhHJixTKhvIqA+EEHgBl6re8pivBMLLO1w==", "dev": true, "requires": { - "@typescript-eslint/types": "5.30.0", - "@typescript-eslint/visitor-keys": "5.30.0", + "@typescript-eslint/types": "5.30.4", + "@typescript-eslint/visitor-keys": "5.30.4", "debug": "^4.3.4", "globby": "^11.1.0", "is-glob": "^4.0.3", @@ -265,12 +260,12 @@ } }, "@typescript-eslint/visitor-keys": { - "version": "5.30.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.30.0.tgz", - "integrity": "sha512-6WcIeRk2DQ3pHKxU1Ni0qMXJkjO/zLjBymlYBy/53qxe7yjEFSvzKLDToJjURUhSl2Fzhkl4SMXQoETauF74cw==", + "version": "5.30.4", + "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.30.4.tgz", + "integrity": "sha512-ulKGse3mruSc8x6l8ORSc6+1ORyJzKmZeIaRTu/WpaF/jx3vHvEn5XZUKF9XaVg2710mFmTAUlLcLYLPp/Zf/Q==", "dev": true, "requires": { - "@typescript-eslint/types": "5.30.0", + "@typescript-eslint/types": "5.30.4", "eslint-visitor-keys": "^3.3.0" } }, @@ -319,6 +314,16 @@ "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==", "dev": true }, + "aria-query": { + "version": "4.2.2", + "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-4.2.2.tgz", + "integrity": "sha512-o/HelwhuKpTj/frsOsbNLNgnNGVIFsVP/SW2BSF14gVl7kAfMOJ6/8wUAUvG1R1NHKrfG+2sHZTu0yauT1qBrA==", + "dev": true, + "requires": { + "@babel/runtime": "^7.10.2", + "@babel/runtime-corejs3": "^7.10.2" + } + }, "array-includes": { "version": "3.1.5", "resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.1.5.tgz", @@ -422,9 +427,9 @@ "dev": true }, "caniuse-lite": { - "version": "1.0.30001359", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001359.tgz", - "integrity": "sha512-Xln/BAsPzEuiVLgJ2/45IaqD9jShtk3Y33anKb4+yLwQzws3+v6odKfpgES/cDEaZMLzSChpIGdbOYtH9MyuHw==" + "version": "1.0.30001362", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001362.tgz", + "integrity": "sha512-PFykHuC7BQTzCGQFaV6wD8IDRM3HpI83BXr99nNJhoOyDufgSuKlt0QVlWYt5ZJtEYFeuNVF5QY3kJcu8hVFjQ==" }, "chalk": { "version": "4.1.2", @@ -489,6 +494,7 @@ "version": "4.3.4", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==", + "dev": true, "requires": { "ms": "2.1.2" } @@ -533,23 +539,6 @@ "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==", "dev": true }, - "engine.io-client": { - "version": "6.2.2", - "resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-6.2.2.tgz", - "integrity": "sha512-8ZQmx0LQGRTYkHuogVZuGSpDqYZtCM/nv8zQ68VZ+JkOpazJ7ICdsSpaO6iXwvaU30oFg5QJOJWj8zWqhbKjkQ==", - "requires": { - "@socket.io/component-emitter": "~3.1.0", - "debug": "~4.3.1", - "engine.io-parser": "~5.0.3", - "ws": "~8.2.3", - "xmlhttprequest-ssl": "~2.0.0" - } - }, - "engine.io-parser": { - "version": "5.0.4", - "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-5.0.4.tgz", - "integrity": "sha512-+nVFp+5z1E3HcToEnO7ZIj3g+3k9389DvWtvJZz0T6/eOCPIyyxehFcedoYrZQrp0LgQbD9pPXhpMBKMd5QURg==" - }, "es-abstract": { "version": "1.20.1", "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.20.1.tgz", @@ -601,10 +590,16 @@ "is-symbol": "^1.0.2" } }, + "escape-string-regexp": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz", + "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==", + "dev": true + }, "eslint": { - "version": "8.18.0", - "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.18.0.tgz", - "integrity": "sha512-As1EfFMVk7Xc6/CvhssHUjsAQSkpfXvUGMFC3ce8JDe6WvqCgRrLOBQbVpsBFr1X1V+RACOadnzVvcUS5ni2bA==", + "version": "8.19.0", + "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.19.0.tgz", + "integrity": "sha512-SXOPj3x9VKvPe81TjjUJCYlV4oJjQw68Uek+AM0X4p+33dj2HY5bpTZOgnQHcG2eAm1mtCU9uNMnJi7exU/kYw==", "dev": true, "requires": { "@eslint/eslintrc": "^1.3.0", @@ -642,14 +637,6 @@ "strip-json-comments": "^3.1.0", "text-table": "^0.2.0", "v8-compile-cache": "^2.0.3" - }, - "dependencies": { - "escape-string-regexp": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz", - "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==", - "dev": true - } } }, "eslint-config-next": { @@ -792,16 +779,6 @@ "semver": "^6.3.0" }, "dependencies": { - "aria-query": { - "version": "4.2.2", - "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-4.2.2.tgz", - "integrity": "sha512-o/HelwhuKpTj/frsOsbNLNgnNGVIFsVP/SW2BSF14gVl7kAfMOJ6/8wUAUvG1R1NHKrfG+2sHZTu0yauT1qBrA==", - "dev": true, - "requires": { - "@babel/runtime": "^7.10.2", - "@babel/runtime-corejs3": "^7.10.2" - } - }, "semver": { "version": "6.3.0", "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", @@ -1499,7 +1476,8 @@ "ms": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", - "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==" + "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==", + "dev": true }, "nanoid": { "version": "3.3.4", @@ -1733,14 +1711,6 @@ "loose-envify": "^1.4.0", "object-assign": "^4.1.1", "react-is": "^16.13.1" - }, - "dependencies": { - "react-is": { - "version": "16.13.1", - "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", - "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", - "dev": true - } } }, "punycode": { @@ -1782,6 +1752,12 @@ "resolved": "https://registry.npmjs.org/react-google-charts/-/react-google-charts-4.0.0.tgz", "integrity": "sha512-9OG0EkBb9JerKEPQYdhmAXnhGLzOdOHOPS9j7l+P1a3z1kcmq9mGDa7PUoX/VQUY4IjZl2/81nsO4o+1cuYsuw==" }, + "react-is": { + "version": "16.13.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", + "dev": true + }, "regenerator-runtime": { "version": "0.13.9", "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz", @@ -1895,26 +1871,6 @@ "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==", "dev": true }, - "socket.io-client": { - "version": "4.5.1", - "resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-4.5.1.tgz", - "integrity": "sha512-e6nLVgiRYatS+AHXnOnGi4ocOpubvOUCGhyWw8v+/FxW8saHkinG6Dfhi9TU0Kt/8mwJIAASxvw6eujQmjdZVA==", - "requires": { - "@socket.io/component-emitter": "~3.1.0", - "debug": "~4.3.2", - "engine.io-client": "~6.2.1", - "socket.io-parser": "~4.2.0" - } - }, - "socket.io-parser": { - "version": "4.2.1", - "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.2.1.tgz", - "integrity": "sha512-V4GrkLy+HeF1F/en3SpUaM+7XxYXpuMUWLGde1kSSh5nQMN4hLrbPIkD+otwh6q9R6NOQBN4AMaOZ2zVjui82g==", - "requires": { - "@socket.io/component-emitter": "~3.1.0", - "debug": "~4.3.1" - } - }, "source-map-js": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz", @@ -2129,16 +2085,6 @@ "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==", "dev": true }, - "ws": { - "version": "8.2.3", - "resolved": "https://registry.npmjs.org/ws/-/ws-8.2.3.tgz", - "integrity": "sha512-wBuoj1BDpC6ZQ1B7DWQBYVLphPWkm8i9Y0/3YdHjHKHiohOJ1ws+3OccDWtH+PoC9DZD5WOTrJvNbWvjS6JWaA==" - }, - "xmlhttprequest-ssl": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.0.0.tgz", - "integrity": "sha512-QKxVRxiRACQcVuQEYFsI1hhkrMlrXHPegbbd1yn9UHOmRxY+si12nQYzri3vbzt8VdTTRviqcKxcyllFas5z2A==" - }, "yallist": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", diff --git a/client/package.json b/client/package.json index db22060..b590b39 100644 --- a/client/package.json +++ b/client/package.json @@ -4,13 +4,12 @@ "private": true, "dependencies": { "@influxdata/influxdb-client": "^1.27.0", - "chart.js": "^3.7.1", + "chart.js": "^3.8.0", "next": "^12.2.0", "react": "^18.1.0", - "react-chartjs-2": "^4.1.0", + "react-chartjs-2": "^4.2.0", "react-dom": "^18.1.0", - "react-google-charts": "^4.0.0", - "socket.io-client": "^4.5.1" + "react-google-charts": "^4.0.0" }, "scripts": { "dev": "next dev", diff --git a/client/pages/api/altitude.js b/client/pages/api/altitude.js index 89ad607..fac4ed9 100644 --- a/client/pages/api/altitude.js +++ b/client/pages/api/altitude.js @@ -24,7 +24,7 @@ export default async function handle(req, res) { }, error(error) { console.error(error); - console.log('QUERY Finished ERROR'); + res.status(502).json(error.message); }, complete() { console.log('QUERY Finished SUCCESS'); diff --git a/client/pages/index.js b/client/pages/index.js index 2b5ad34..5229dae 100644 --- a/client/pages/index.js +++ b/client/pages/index.js @@ -7,16 +7,33 @@ import { GChart } from '../components/GChart'; //import useSessionStorage from '../hooks/useSessionStorage'; function Home() { - const [plot, setPlot] = useState([]); + const [plot, setPlot] = useState([[0, 0]]); const [ignitionStatus, setIgnitionStatus] = useState(false); const [ejectionStatus, setEjectionStatus] = useState(false); useEffect(() => { const timer = setInterval(() => { fetch('/api/altitude') - .then((res) => res.json()) + .then(async (res) => { + if (res.status !== 200) { + const isJson = res.headers + .get('content-type') + ?.includes('application/json'); + if (!isJson) { + return Promise.reject(res); + } + const data = await res.json(); + const error = data ?? res.statusText; + return Promise.reject(error); + } + res.json(); + }) .then((data) => { setPlot(data); + }) + .catch((e) => { + clearInterval(timer); + console.error(e); }); }, 300); From 52dcbc7764a4b47552f8970a7f0e3b215954eeba Mon Sep 17 00:00:00 2001 From: cyator Date: Mon, 4 Jul 2022 14:53:39 +0300 Subject: [PATCH 6/8] chart.js streaming --- client/components/LineChart.js | 106 +++++++++++++++++++++++++-------- client/package-lock.json | 15 +++++ client/package.json | 3 + client/pages/api/altitude.js | 4 +- client/pages/index.js | 14 +++-- 5 files changed, 108 insertions(+), 34 deletions(-) diff --git a/client/components/LineChart.js b/client/components/LineChart.js index b6eaeb2..c95eac3 100644 --- a/client/components/LineChart.js +++ b/client/components/LineChart.js @@ -1,4 +1,7 @@ import { Line } from 'react-chartjs-2'; +import 'chartjs-adapter-luxon'; +import StreamingPlugin from 'chartjs-plugin-streaming'; +//import { useState, useEffect } from 'react'; import { Chart as ChartJS, CategoryScale, @@ -17,36 +20,87 @@ ChartJS.register( LineElement, Title, Tooltip, - Legend + Legend, + StreamingPlugin ); -function LineChart({ x = [], y = [] }) { - const data = { - labels: y, - datasets: [ - { - label: 'altitude', - backgroundColor: 'rgb(255, 99, 132)', - borderColor: 'rgb(255, 99, 132)', - data: x, - }, - ], - }; +function LineChart() { + // const [plot, setPlot] = useState([]); + // useEffect(() => { + // const timer = setInterval(() => { + // fetch('/api/altitude') + // .then(async (res) => { + // if (res.status !== 200) { + // const isJson = res.headers + // .get('content-type') + // ?.includes('application/json'); + // if (!isJson) { + // return Promise.reject(res); + // } + // const data = await res.json(); + // const error = data ?? res.statusText; + // return Promise.reject(error); + // } + // let data = await res.json(); + // data.length > 0 && setPlot(data); + // }) + // .catch((e) => { + // console.error(e); + // clearInterval(timer); + // }); + // }, 500); - const options = { - responsive: true, - plugins: { - legend: { - position: 'top', - }, - title: { - display: true, - text: 'Telemetry Graph', - }, - }, - }; + // return () => { + // clearInterval(timer); + // }; + // }, []); - return ; + return ( + { + chart.data.datasets.forEach((dataset) => { + dataset.data.push({ + x: Date.now(), + y: Math.random(), + }); + }); + }, + //pause: false, + //ttl: 0, + duration: 50000, + //refresh: 1000, + //frameRate: 30, + }, + }, + }, + plugins: { + legend: { + position: 'top', + }, + title: { + display: true, + text: 'Telemetry Graph', + }, + }, + }} + /> + ); } export default LineChart; diff --git a/client/package-lock.json b/client/package-lock.json index b84fd32..45bf908 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -446,6 +446,16 @@ "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.8.0.tgz", "integrity": "sha512-cr8xhrXjLIXVLOBZPkBZVF6NDeiVIrPLHcMhnON7UufudL+CNeRrD+wpYanswlm8NpudMdrt3CHoLMQMxJhHRg==" }, + "chartjs-adapter-luxon": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/chartjs-adapter-luxon/-/chartjs-adapter-luxon-1.1.0.tgz", + "integrity": "sha512-CS+xBWEyXYVLBZ3dSY/MwlSXhz8er4JjkApazY84ft/++oOLsmkt6TaXBCsUFudum7QdoYmpxiL/gSp20+emkw==" + }, + "chartjs-plugin-streaming": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/chartjs-plugin-streaming/-/chartjs-plugin-streaming-2.0.0.tgz", + "integrity": "sha512-oBwHRmovGbPDS1h8PhpttnlKjI6eiJO13v4h+xz+mfbHhIc+iNF9xuMobCIFMKFH7rlVWi5TJAOIxoXyGElYYg==" + }, "color-convert": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", @@ -1442,6 +1452,11 @@ "yallist": "^4.0.0" } }, + "luxon": { + "version": "2.4.0", + "resolved": "https://registry.npmjs.org/luxon/-/luxon-2.4.0.tgz", + "integrity": "sha512-w+NAwWOUL5hO0SgwOHsMBAmZ15SoknmQXhSO0hIbJCAmPKSsGeK8MlmhYh2w6Iib38IxN2M+/ooXWLbeis7GuA==" + }, "merge2": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz", diff --git a/client/package.json b/client/package.json index b590b39..dc83e8e 100644 --- a/client/package.json +++ b/client/package.json @@ -5,6 +5,9 @@ "dependencies": { "@influxdata/influxdb-client": "^1.27.0", "chart.js": "^3.8.0", + "chartjs-adapter-luxon": "^1.1.0", + "chartjs-plugin-streaming": "^2.0.0", + "luxon": "^2.4.0", "next": "^12.2.0", "react": "^18.1.0", "react-chartjs-2": "^4.2.0", diff --git a/client/pages/api/altitude.js b/client/pages/api/altitude.js index fac4ed9..963e8e3 100644 --- a/client/pages/api/altitude.js +++ b/client/pages/api/altitude.js @@ -7,11 +7,11 @@ export default async function handle(req, res) { const query = ` from(bucket: "${bucket}") - |> range(start: -1d) + |> range(start: -2d) |> filter(fn: (r) => r["_measurement"] == "mqtt_consumer") |> filter(fn: (r) => r["topic"] == "esp32/message") |> filter(fn: (r) => r["_field"] == "altitude") - |> tail(n: 100) + |> tail(n: 200) `; let arr = []; queryApi.queryRows(query, { diff --git a/client/pages/index.js b/client/pages/index.js index 5229dae..ad1a28b 100644 --- a/client/pages/index.js +++ b/client/pages/index.js @@ -4,6 +4,7 @@ import styles from '../styles/Home.module.css'; import { useState, useEffect } from 'react'; import { GChart } from '../components/GChart'; +import LineChart from '../components/LineChart'; //import useSessionStorage from '../hooks/useSessionStorage'; function Home() { @@ -26,14 +27,12 @@ function Home() { const error = data ?? res.statusText; return Promise.reject(error); } - res.json(); - }) - .then((data) => { - setPlot(data); + let data = await res.json(); + data.length > 0 && setPlot(data); }) .catch((e) => { - clearInterval(timer); console.error(e); + clearInterval(timer); }); }, 300); @@ -42,6 +41,8 @@ function Home() { }; }, []); + let datapoints = [['x', 'altitude'], ...plot]; + const toggleIgnition = () => { // socket.emit('ignite', !ignitionStatus ? 'on' : 'off'); setIgnitionStatus(!ignitionStatus); @@ -103,7 +104,8 @@ function Home() {
- + + {/* */}
From 477f570fc7977f1d11212146067155e8c14d6b42 Mon Sep 17 00:00:00 2001 From: cyator Date: Wed, 6 Jul 2022 14:32:55 +0300 Subject: [PATCH 7/8] socket.io influx-query and telegraf-websockets --- client/components/GChart.js | 19 -- client/components/LineChart.js | 115 +++---- client/components/charts/Altitude.js | 19 ++ client/config/getData.js | 22 ++ client/hooks/useSessionStorage.jsx | 40 --- client/package-lock.json | 438 +++++++++++++++++++++++++-- client/package.json | 5 +- client/pages/api/altitude.js | 14 +- client/pages/api/socket.js | 30 ++ client/pages/index.js | 65 ++-- telegraf.conf | 150 +++++---- 11 files changed, 660 insertions(+), 257 deletions(-) delete mode 100644 client/components/GChart.js create mode 100644 client/components/charts/Altitude.js create mode 100644 client/config/getData.js delete mode 100644 client/hooks/useSessionStorage.jsx create mode 100644 client/pages/api/socket.js diff --git a/client/components/GChart.js b/client/components/GChart.js deleted file mode 100644 index 6aab978..0000000 --- a/client/components/GChart.js +++ /dev/null @@ -1,19 +0,0 @@ -import React from 'react'; -import { Chart } from 'react-google-charts'; - -export function GChart({ data }) { - const options = { - curveType: 'function', - legend: { position: 'bottom' }, - }; - - return ( - - ); -} diff --git a/client/components/LineChart.js b/client/components/LineChart.js index c95eac3..ae24c99 100644 --- a/client/components/LineChart.js +++ b/client/components/LineChart.js @@ -1,7 +1,7 @@ import { Line } from 'react-chartjs-2'; import 'chartjs-adapter-luxon'; import StreamingPlugin from 'chartjs-plugin-streaming'; -//import { useState, useEffect } from 'react'; + import { Chart as ChartJS, CategoryScale, @@ -21,86 +21,49 @@ ChartJS.register( Title, Tooltip, Legend, + StreamingPlugin ); -function LineChart() { - // const [plot, setPlot] = useState([]); - // useEffect(() => { - // const timer = setInterval(() => { - // fetch('/api/altitude') - // .then(async (res) => { - // if (res.status !== 200) { - // const isJson = res.headers - // .get('content-type') - // ?.includes('application/json'); - // if (!isJson) { - // return Promise.reject(res); - // } - // const data = await res.json(); - // const error = data ?? res.statusText; - // return Promise.reject(error); - // } - // let data = await res.json(); - // data.length > 0 && setPlot(data); - // }) - // .catch((e) => { - // console.error(e); - // clearInterval(timer); - // }); - // }, 500); - - // return () => { - // clearInterval(timer); - // }; - // }, []); +function LineChart({ label, onRefresh }) { + const data = { + datasets: [ + { + label: label, + backgroundColor: 'rgba(255, 99, 132, 0.5)', + borderColor: 'rgb(255, 99, 132)', + data: [], + }, + ], + }; - return ( - { - chart.data.datasets.forEach((dataset) => { - dataset.data.push({ - x: Date.now(), - y: Math.random(), - }); - }); - }, - //pause: false, - //ttl: 0, - duration: 50000, - //refresh: 1000, - //frameRate: 30, - }, - }, + const options = { + scales: { + x: { + type: 'realtime', + realtime: { + delay: 2000, + onRefresh: onRefresh, + //pause: false, + // ttl: 60000, + // duration: 20000, + // refresh: 100, + // frameRate: 30, }, - plugins: { - legend: { - position: 'top', - }, - title: { - display: true, - text: 'Telemetry Graph', - }, - }, - }} - /> - ); + }, + }, + plugins: { + legend: { + position: 'top', + }, + title: { + display: true, + text: 'Telemetry Graph', + }, + }, + }; + + return ; } export default LineChart; diff --git a/client/components/charts/Altitude.js b/client/components/charts/Altitude.js new file mode 100644 index 0000000..7b9fb78 --- /dev/null +++ b/client/components/charts/Altitude.js @@ -0,0 +1,19 @@ +import { memo } from 'react'; +import LineChart from '../LineChart'; + +function Altitude() { + const onRefresh = (chart) => { + //listen for ws + + const arr = chart.data.datasets[0].data; + arr.push({ + x: Date.now(), + y: Math.random(), + }); + chart.update('quiet'); + }; + + return ; +} + +export default memo(Altitude); diff --git a/client/config/getData.js b/client/config/getData.js new file mode 100644 index 0000000..0458dd8 --- /dev/null +++ b/client/config/getData.js @@ -0,0 +1,22 @@ +export const getData = () => { + fetch('/api/altitude') + .then(async (res) => { + if (res.status !== 200) { + const isJson = res.headers + .get('content-type') + ?.includes('application/json'); + if (!isJson) { + return Promise.reject(res); + } + const data = await res.json(); + const error = data ?? res.statusText; + return Promise.reject(error); + } + let data = await res.json(); + console.log('data', data); + return data; + }) + .catch((e) => { + console.error(e); + }); +}; diff --git a/client/hooks/useSessionStorage.jsx b/client/hooks/useSessionStorage.jsx deleted file mode 100644 index 37c1839..0000000 --- a/client/hooks/useSessionStorage.jsx +++ /dev/null @@ -1,40 +0,0 @@ -import { useState } from 'react'; - -export default function useSessionStorage(key, initialValue) { - // State to store our value - // Pass initial state function to useState so logic is only executed once - const [storedValue, setStoredValue] = useState(() => { - if (typeof window === 'undefined') { - return initialValue; - } - try { - // Get from session storage by key - const item = window.sessionStorage.getItem(key); - // Parse stored json or if none return initialValue - return item ? JSON.parse(item) : initialValue; - } catch (error) { - // If error also return initialValue - console.log(error); - return initialValue; - } - }); - // Return a wrapped version of useState's setter function that ... - // ... persists the new value to sessionStorage. - const setValue = (value) => { - try { - // Allow value to be a function so we have same API as useState - const valueToStore = - value instanceof Function ? value(storedValue) : value; - // Save state - setStoredValue(valueToStore); - // Save to local storage - if (typeof window !== 'undefined') { - window.sessionStorage.setItem(key, JSON.stringify(valueToStore)); - } - } catch (error) { - // A more advanced implementation would handle the error case - console.log(error); - } - }; - return [storedValue, setValue]; -} diff --git a/client/package-lock.json b/client/package-lock.json index 45bf908..258f5a0 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -202,6 +202,11 @@ "integrity": "sha512-LwzQKA4vzIct1zNZzBmRKI9QuNpLgTQMEjsQLf3BXuGYb3QPTP4Yjf6mkdX+X1mYttZ808QpOwAzZjv28kq7DA==", "dev": true }, + "@socket.io/component-emitter": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/@socket.io/component-emitter/-/component-emitter-3.1.0.tgz", + "integrity": "sha512-+9jVqKhRSpsc591z5vX+X5Yyw+he/HCB4iQ/RYxw35CEPaY1gnsNE43nf9n9AaYjAQrTiI/mOwKUKdUs9vf7Xg==" + }, "@swc/helpers": { "version": "0.4.2", "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.4.2.tgz", @@ -210,12 +215,32 @@ "tslib": "^2.4.0" } }, + "@types/component-emitter": { + "version": "1.2.11", + "resolved": "https://registry.npmjs.org/@types/component-emitter/-/component-emitter-1.2.11.tgz", + "integrity": "sha512-SRXjM+tfsSlA9VuG8hGO2nft2p8zjXCK1VcC6N4NXbBbYbSia9kzCChYQajIjzIqOOOuh5Ock6MmV2oux4jDZQ==" + }, + "@types/cookie": { + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.4.1.tgz", + "integrity": "sha512-XW/Aa8APYr6jSVVA1y/DEIZX0/GMKLEVekNG727R8cs56ahETkRAy/3DR7+fJyh7oUgGwNQaRfXCun0+KbWY7Q==" + }, + "@types/cors": { + "version": "2.8.12", + "resolved": "https://registry.npmjs.org/@types/cors/-/cors-2.8.12.tgz", + "integrity": "sha512-vt+kDhq/M2ayberEtJcIN/hxXy1Pk+59g2FV/ZQceeaTyCtCucjL2Q7FXlFjtWn4n15KCr1NE2lNNFhp0lEThw==" + }, "@types/json5": { "version": "0.0.29", "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz", "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==", "dev": true }, + "@types/node": { + "version": "18.0.3", + "resolved": "https://registry.npmjs.org/@types/node/-/node-18.0.3.tgz", + "integrity": "sha512-HzNRZtp4eepNitP+BD6k2L6DROIDG4Q0fm4x+dwfsr6LGmROENnok75VGw40628xf+iR24WeMFcHuuBDUAzzsQ==" + }, "@typescript-eslint/parser": { "version": "5.30.4", "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.30.4.tgz", @@ -269,6 +294,15 @@ "eslint-visitor-keys": "^3.3.0" } }, + "accepts": { + "version": "1.3.8", + "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz", + "integrity": "sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==", + "requires": { + "mime-types": "~2.1.34", + "negotiator": "0.6.3" + } + }, "acorn": { "version": "8.7.1", "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.7.1.tgz", @@ -388,14 +422,32 @@ "balanced-match": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", - "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==", - "dev": true + "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==" + }, + "base64-js": { + "version": "1.5.1", + "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz", + "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==" + }, + "base64id": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/base64id/-/base64id-2.0.0.tgz", + "integrity": "sha512-lGe34o6EHj9y3Kts9R4ZYs/Gr+6N7MCaMlIFA3F1R2O5/m7K06AxfSeO5530PEERE6/WyEg3lsuyw4GHlPZHog==" + }, + "bl": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/bl/-/bl-4.1.0.tgz", + "integrity": "sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==", + "requires": { + "buffer": "^5.5.0", + "inherits": "^2.0.4", + "readable-stream": "^3.4.0" + } }, "brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", - "dev": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -410,6 +462,20 @@ "fill-range": "^7.0.1" } }, + "buffer": { + "version": "5.7.1", + "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz", + "integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==", + "requires": { + "base64-js": "^1.3.1", + "ieee754": "^1.1.13" + } + }, + "buffer-from": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz", + "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==" + }, "call-bind": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz", @@ -471,11 +537,40 @@ "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", "dev": true }, + "commist": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/commist/-/commist-1.1.0.tgz", + "integrity": "sha512-rraC8NXWOEjhADbZe9QBNzLAN5Q3fsTPQtBV+fEVj6xKIgDgNiEVE6ZNfHpZOqfQ21YUzfVNUXLOEZquYvQPPg==", + "requires": { + "leven": "^2.1.0", + "minimist": "^1.1.0" + } + }, + "component-emitter": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.3.0.tgz", + "integrity": "sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg==" + }, "concat-map": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", - "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==", - "dev": true + "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==" + }, + "concat-stream": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/concat-stream/-/concat-stream-2.0.0.tgz", + "integrity": "sha512-MWufYdFw53ccGjCA+Ol7XJYpAlW6/prSMzuPOTRnJGcGzuhLn4Scrz7qf6o8bROZ514ltazcIFJZevcfbo0x7A==", + "requires": { + "buffer-from": "^1.0.0", + "inherits": "^2.0.3", + "readable-stream": "^3.0.2", + "typedarray": "^0.0.6" + } + }, + "cookie": { + "version": "0.4.2", + "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.2.tgz", + "integrity": "sha512-aSWTXFzaKWkvHO1Ny/s+ePFpvKsPnjc551iI41v3ny/ow6tBG5Vd+FuqGNhh1LxOmVzOlGUriIlOaokOvhaStA==" }, "core-js-pure": { "version": "3.23.3", @@ -483,6 +578,15 @@ "integrity": "sha512-XpoouuqIj4P+GWtdyV8ZO3/u4KftkeDVMfvp+308eGMhCrA3lVDSmAxO0c6GGOcmgVlaKDrgWVMo49h2ab/TDA==", "dev": true }, + "cors": { + "version": "2.8.5", + "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz", + "integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==", + "requires": { + "object-assign": "^4", + "vary": "^1" + } + }, "cross-spawn": { "version": "7.0.3", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", @@ -504,7 +608,6 @@ "version": "4.3.4", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==", - "dev": true, "requires": { "ms": "2.1.2" } @@ -543,12 +646,79 @@ "esutils": "^2.0.2" } }, + "duplexify": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/duplexify/-/duplexify-4.1.2.tgz", + "integrity": "sha512-fz3OjcNCHmRP12MJoZMPglx8m4rrFP8rovnk4vT8Fs+aonZoCwGg10dSsQsfP/E62eZcPTMSMP6686fu9Qlqtw==", + "requires": { + "end-of-stream": "^1.4.1", + "inherits": "^2.0.3", + "readable-stream": "^3.1.1", + "stream-shift": "^1.0.0" + } + }, "emoji-regex": { "version": "9.2.2", "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz", "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==", "dev": true }, + "end-of-stream": { + "version": "1.4.4", + "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz", + "integrity": "sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==", + "requires": { + "once": "^1.4.0" + } + }, + "engine.io": { + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/engine.io/-/engine.io-6.2.0.tgz", + "integrity": "sha512-4KzwW3F3bk+KlzSOY57fj/Jx6LyRQ1nbcyIadehl+AnXjKT7gDO0ORdRi/84ixvMKTym6ZKuxvbzN62HDDU1Lg==", + "requires": { + "@types/cookie": "^0.4.1", + "@types/cors": "^2.8.12", + "@types/node": ">=10.0.0", + "accepts": "~1.3.4", + "base64id": "2.0.0", + "cookie": "~0.4.1", + "cors": "~2.8.5", + "debug": "~4.3.1", + "engine.io-parser": "~5.0.3", + "ws": "~8.2.3" + }, + "dependencies": { + "ws": { + "version": "8.2.3", + "resolved": "https://registry.npmjs.org/ws/-/ws-8.2.3.tgz", + "integrity": "sha512-wBuoj1BDpC6ZQ1B7DWQBYVLphPWkm8i9Y0/3YdHjHKHiohOJ1ws+3OccDWtH+PoC9DZD5WOTrJvNbWvjS6JWaA==" + } + } + }, + "engine.io-client": { + "version": "6.2.2", + "resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-6.2.2.tgz", + "integrity": "sha512-8ZQmx0LQGRTYkHuogVZuGSpDqYZtCM/nv8zQ68VZ+JkOpazJ7ICdsSpaO6iXwvaU30oFg5QJOJWj8zWqhbKjkQ==", + "requires": { + "@socket.io/component-emitter": "~3.1.0", + "debug": "~4.3.1", + "engine.io-parser": "~5.0.3", + "ws": "~8.2.3", + "xmlhttprequest-ssl": "~2.0.0" + }, + "dependencies": { + "ws": { + "version": "8.2.3", + "resolved": "https://registry.npmjs.org/ws/-/ws-8.2.3.tgz", + "integrity": "sha512-wBuoj1BDpC6ZQ1B7DWQBYVLphPWkm8i9Y0/3YdHjHKHiohOJ1ws+3OccDWtH+PoC9DZD5WOTrJvNbWvjS6JWaA==" + } + } + }, + "engine.io-parser": { + "version": "5.0.4", + "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-5.0.4.tgz", + "integrity": "sha512-+nVFp+5z1E3HcToEnO7ZIj3g+3k9389DvWtvJZz0T6/eOCPIyyxehFcedoYrZQrp0LgQbD9pPXhpMBKMd5QURg==" + }, "es-abstract": { "version": "1.20.1", "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.20.1.tgz", @@ -1024,8 +1194,7 @@ "fs.realpath": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", - "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==", - "dev": true + "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==" }, "function-bind": { "version": "1.1.1", @@ -1082,7 +1251,6 @@ "version": "7.2.3", "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz", "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==", - "dev": true, "requires": { "fs.realpath": "^1.0.0", "inflight": "^1.0.4", @@ -1169,6 +1337,20 @@ "has-symbols": "^1.0.2" } }, + "help-me": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/help-me/-/help-me-3.0.0.tgz", + "integrity": "sha512-hx73jClhyk910sidBB7ERlnhMlFsJJIBqSVMFDwPN8o2v9nmp5KgLq1Xz1Bf1fCMMZ6mPrX159iG0VLy/fPMtQ==", + "requires": { + "glob": "^7.1.6", + "readable-stream": "^3.6.0" + } + }, + "ieee754": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz", + "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==" + }, "ignore": { "version": "5.2.0", "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.0.tgz", @@ -1195,7 +1377,6 @@ "version": "1.0.6", "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz", "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==", - "dev": true, "requires": { "once": "^1.3.0", "wrappy": "1" @@ -1204,8 +1385,7 @@ "inherits": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz", - "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==", - "dev": true + "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==" }, "internal-slot": { "version": "1.0.3", @@ -1349,6 +1529,11 @@ "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==", "dev": true }, + "js-sdsl": { + "version": "2.1.4", + "resolved": "https://registry.npmjs.org/js-sdsl/-/js-sdsl-2.1.4.tgz", + "integrity": "sha512-/Ew+CJWHNddr7sjwgxaVeIORIH4AMVC9dy0hPf540ZGMVgS9d3ajwuVdyhDt6/QUvT8ATjR3yuYBKsS79F+H4A==" + }, "js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", @@ -1409,6 +1594,11 @@ "language-subtag-registry": "~0.3.2" } }, + "leven": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/leven/-/leven-2.1.0.tgz", + "integrity": "sha512-nvVPLpIHUxCUoRLrFqTgSxXJ614d8AgQoWl7zPe/2VadE8+1dpU3LBhowRuBAcuwruWtOdD8oYC9jDNJjXDPyA==" + }, "levn": { "version": "0.4.1", "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz", @@ -1447,7 +1637,6 @@ "version": "6.0.0", "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz", "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==", - "dev": true, "requires": { "yallist": "^4.0.0" } @@ -1473,11 +1662,23 @@ "picomatch": "^2.3.1" } }, + "mime-db": { + "version": "1.52.0", + "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz", + "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==" + }, + "mime-types": { + "version": "2.1.35", + "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz", + "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==", + "requires": { + "mime-db": "1.52.0" + } + }, "minimatch": { "version": "3.1.2", "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz", "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==", - "dev": true, "requires": { "brace-expansion": "^1.1.7" } @@ -1485,14 +1686,53 @@ "minimist": { "version": "1.2.6", "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.6.tgz", - "integrity": "sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==", - "dev": true + "integrity": "sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==" + }, + "mqtt": { + "version": "4.3.7", + "resolved": "https://registry.npmjs.org/mqtt/-/mqtt-4.3.7.tgz", + "integrity": "sha512-ew3qwG/TJRorTz47eW46vZ5oBw5MEYbQZVaEji44j5lAUSQSqIEoul7Kua/BatBW0H0kKQcC9kwUHa1qzaWHSw==", + "requires": { + "commist": "^1.0.0", + "concat-stream": "^2.0.0", + "debug": "^4.1.1", + "duplexify": "^4.1.1", + "help-me": "^3.0.0", + "inherits": "^2.0.3", + "lru-cache": "^6.0.0", + "minimist": "^1.2.5", + "mqtt-packet": "^6.8.0", + "number-allocator": "^1.0.9", + "pump": "^3.0.0", + "readable-stream": "^3.6.0", + "reinterval": "^1.1.0", + "rfdc": "^1.3.0", + "split2": "^3.1.0", + "ws": "^7.5.5", + "xtend": "^4.0.2" + }, + "dependencies": { + "ws": { + "version": "7.5.8", + "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.8.tgz", + "integrity": "sha512-ri1Id1WinAX5Jqn9HejiGb8crfRio0Qgu8+MtL36rlTA6RLsMdWt1Az/19A2Qij6uSHUMphEFaTKa4WG+UNHNw==" + } + } + }, + "mqtt-packet": { + "version": "6.10.0", + "resolved": "https://registry.npmjs.org/mqtt-packet/-/mqtt-packet-6.10.0.tgz", + "integrity": "sha512-ja8+mFKIHdB1Tpl6vac+sktqy3gA8t9Mduom1BA75cI+R9AHnZOiaBQwpGiWnaVJLDGRdNhQmFaAqd7tkKSMGA==", + "requires": { + "bl": "^4.0.2", + "debug": "^4.1.1", + "process-nextick-args": "^2.0.1" + } }, "ms": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", - "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==", - "dev": true + "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==" }, "nanoid": { "version": "3.3.4", @@ -1505,6 +1745,11 @@ "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==", "dev": true }, + "negotiator": { + "version": "0.6.3", + "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz", + "integrity": "sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==" + }, "next": { "version": "12.2.0", "resolved": "https://registry.npmjs.org/next/-/next-12.2.0.tgz", @@ -1531,11 +1776,19 @@ "use-sync-external-store": "1.1.0" } }, + "number-allocator": { + "version": "1.0.10", + "resolved": "https://registry.npmjs.org/number-allocator/-/number-allocator-1.0.10.tgz", + "integrity": "sha512-K4AvNGKo9lP6HqsZyfSr9KDaqnwFzW203inhQEOwFrmFaYevpdX4VNwdOLk197aHujzbT//z6pCBrCOUYSM5iw==", + "requires": { + "debug": "^4.3.1", + "js-sdsl": "^2.1.2" + } + }, "object-assign": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", - "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==", - "dev": true + "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==" }, "object-inspect": { "version": "1.12.2", @@ -1608,7 +1861,6 @@ "version": "1.4.0", "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==", - "dev": true, "requires": { "wrappy": "1" } @@ -1669,8 +1921,7 @@ "path-is-absolute": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz", - "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==", - "dev": true + "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==" }, "path-key": { "version": "3.1.1", @@ -1717,6 +1968,11 @@ "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==", "dev": true }, + "process-nextick-args": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz", + "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==" + }, "prop-types": { "version": "15.8.1", "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", @@ -1728,6 +1984,15 @@ "react-is": "^16.13.1" } }, + "pump": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz", + "integrity": "sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==", + "requires": { + "end-of-stream": "^1.1.0", + "once": "^1.3.1" + } + }, "punycode": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz", @@ -1773,6 +2038,16 @@ "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", "dev": true }, + "readable-stream": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz", + "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==", + "requires": { + "inherits": "^2.0.3", + "string_decoder": "^1.1.1", + "util-deprecate": "^1.0.1" + } + }, "regenerator-runtime": { "version": "0.13.9", "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz", @@ -1796,6 +2071,11 @@ "integrity": "sha512-pq2bWo9mVD43nbts2wGv17XLiNLya+GklZ8kaDLV2Z08gDCsGpnKn9BFMepvWuHCbyVvY7J5o5+BVvoQbmlJLg==", "dev": true }, + "reinterval": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/reinterval/-/reinterval-1.1.0.tgz", + "integrity": "sha512-QIRet3SYrGp0HUHO88jVskiG6seqUGC5iAG7AwI/BV4ypGcuqk9Du6YQBUOUqm9c8pw1eyLoIaONifRua1lsEQ==" + }, "resolve": { "version": "1.22.1", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz", @@ -1819,6 +2099,11 @@ "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==", "dev": true }, + "rfdc": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/rfdc/-/rfdc-1.3.0.tgz", + "integrity": "sha512-V2hovdzFbOi77/WajaSMXk2OLm+xNIeQdMMuB7icj7bk6zi2F8GGAxigcnDFpJHbNyNcgyJDiP+8nOrY5cZGrA==" + }, "rimraf": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz", @@ -1837,6 +2122,11 @@ "queue-microtask": "^1.2.2" } }, + "safe-buffer": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz", + "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==" + }, "scheduler": { "version": "0.23.0", "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz", @@ -1886,11 +2176,74 @@ "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==", "dev": true }, + "socket.io": { + "version": "4.5.1", + "resolved": "https://registry.npmjs.org/socket.io/-/socket.io-4.5.1.tgz", + "integrity": "sha512-0y9pnIso5a9i+lJmsCdtmTTgJFFSvNQKDnPQRz28mGNnxbmqYg2QPtJTLFxhymFZhAIn50eHAKzJeiNaKr+yUQ==", + "requires": { + "accepts": "~1.3.4", + "base64id": "~2.0.0", + "debug": "~4.3.2", + "engine.io": "~6.2.0", + "socket.io-adapter": "~2.4.0", + "socket.io-parser": "~4.0.4" + }, + "dependencies": { + "socket.io-parser": { + "version": "4.0.5", + "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.0.5.tgz", + "integrity": "sha512-sNjbT9dX63nqUFIOv95tTVm6elyIU4RvB1m8dOeZt+IgWwcWklFDOdmGcfo3zSiRsnR/3pJkjY5lfoGqEe4Eig==", + "requires": { + "@types/component-emitter": "^1.2.10", + "component-emitter": "~1.3.0", + "debug": "~4.3.1" + } + } + } + }, + "socket.io-adapter": { + "version": "2.4.0", + "resolved": "https://registry.npmjs.org/socket.io-adapter/-/socket.io-adapter-2.4.0.tgz", + "integrity": "sha512-W4N+o69rkMEGVuk2D/cvca3uYsvGlMwsySWV447y99gUPghxq42BxqLNMndb+a1mm/5/7NeXVQS7RLa2XyXvYg==" + }, + "socket.io-client": { + "version": "4.5.1", + "resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-4.5.1.tgz", + "integrity": "sha512-e6nLVgiRYatS+AHXnOnGi4ocOpubvOUCGhyWw8v+/FxW8saHkinG6Dfhi9TU0Kt/8mwJIAASxvw6eujQmjdZVA==", + "requires": { + "@socket.io/component-emitter": "~3.1.0", + "debug": "~4.3.2", + "engine.io-client": "~6.2.1", + "socket.io-parser": "~4.2.0" + } + }, + "socket.io-parser": { + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.2.1.tgz", + "integrity": "sha512-V4GrkLy+HeF1F/en3SpUaM+7XxYXpuMUWLGde1kSSh5nQMN4hLrbPIkD+otwh6q9R6NOQBN4AMaOZ2zVjui82g==", + "requires": { + "@socket.io/component-emitter": "~3.1.0", + "debug": "~4.3.1" + } + }, "source-map-js": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz", "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==" }, + "split2": { + "version": "3.2.2", + "resolved": "https://registry.npmjs.org/split2/-/split2-3.2.2.tgz", + "integrity": "sha512-9NThjpgZnifTkJpzTZ7Eue85S49QwpNhZTq6GRJwObb6jnLFNGB7Qm73V5HewTROPyxD0C29xqmaI68bQtV+hg==", + "requires": { + "readable-stream": "^3.0.0" + } + }, + "stream-shift": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/stream-shift/-/stream-shift-1.0.1.tgz", + "integrity": "sha512-AiisoFqQ0vbGcZgQPY1cdP2I76glaVA/RauYR4G4thNFgkTqr90yXTo4LYX60Jl+sIlPNHHdGSwo01AvbKUSVQ==" + }, "string.prototype.matchall": { "version": "4.0.7", "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.7.tgz", @@ -1929,6 +2282,14 @@ "es-abstract": "^1.19.5" } }, + "string_decoder": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz", + "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==", + "requires": { + "safe-buffer": "~5.2.0" + } + }, "strip-ansi": { "version": "6.0.1", "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz", @@ -2034,6 +2395,11 @@ "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==", "dev": true }, + "typedarray": { + "version": "0.0.6", + "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz", + "integrity": "sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA==" + }, "unbox-primitive": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz", @@ -2060,12 +2426,22 @@ "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.1.0.tgz", "integrity": "sha512-SEnieB2FPKEVne66NpXPd1Np4R1lTNKfjuy3XdIoPQKYBAFdzbzSZlSn1KJZUiihQLQC5Znot4SBz1EOTBwQAQ==" }, + "util-deprecate": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", + "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==" + }, "v8-compile-cache": { "version": "2.3.0", "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz", "integrity": "sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA==", "dev": true }, + "vary": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz", + "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==" + }, "which": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", @@ -2097,14 +2473,22 @@ "wrappy": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", - "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==", - "dev": true + "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==" + }, + "xmlhttprequest-ssl": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.0.0.tgz", + "integrity": "sha512-QKxVRxiRACQcVuQEYFsI1hhkrMlrXHPegbbd1yn9UHOmRxY+si12nQYzri3vbzt8VdTTRviqcKxcyllFas5z2A==" + }, + "xtend": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz", + "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==" }, "yallist": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", - "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==", - "dev": true + "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==" } } } diff --git a/client/package.json b/client/package.json index dc83e8e..4eed378 100644 --- a/client/package.json +++ b/client/package.json @@ -8,11 +8,14 @@ "chartjs-adapter-luxon": "^1.1.0", "chartjs-plugin-streaming": "^2.0.0", "luxon": "^2.4.0", + "mqtt": "^4.3.7", "next": "^12.2.0", "react": "^18.1.0", "react-chartjs-2": "^4.2.0", "react-dom": "^18.1.0", - "react-google-charts": "^4.0.0" + "react-google-charts": "^4.0.0", + "socket.io": "^4.5.1", + "socket.io-client": "^4.5.1" }, "scripts": { "dev": "next dev", diff --git a/client/pages/api/altitude.js b/client/pages/api/altitude.js index 963e8e3..cce5c78 100644 --- a/client/pages/api/altitude.js +++ b/client/pages/api/altitude.js @@ -7,20 +7,20 @@ export default async function handle(req, res) { const query = ` from(bucket: "${bucket}") - |> range(start: -2d) + |> range(start: -1h) |> filter(fn: (r) => r["_measurement"] == "mqtt_consumer") |> filter(fn: (r) => r["topic"] == "esp32/message") |> filter(fn: (r) => r["_field"] == "altitude") - |> tail(n: 200) + |> tail(n: 1) `; let arr = []; queryApi.queryRows(query, { next(row, tableMeta) { const o = tableMeta.toObject(row); - let i = []; - i[0] = o._time; - i[1] = o._value; - arr.push(i); + arr.push({ + x: o._time, + y: o._value, + }); }, error(error) { console.error(error); @@ -28,7 +28,7 @@ export default async function handle(req, res) { }, complete() { console.log('QUERY Finished SUCCESS'); - res.json(arr); + res.json(arr[0]); }, }); } diff --git a/client/pages/api/socket.js b/client/pages/api/socket.js new file mode 100644 index 0000000..a9b3622 --- /dev/null +++ b/client/pages/api/socket.js @@ -0,0 +1,30 @@ +import { Server } from 'socket.io'; + +const SocketHandler = (req, res) => { + if (res.socket.server.io) { + console.log('Websocket is already running'); + } else { + console.log('Websocket is initializing'); + const io = new Server(res.socket.server); + res.socket.server.io = io; + + io.on('connection', (socket) => { + socket.on('telemetry', (msg) => { + console.log(msg); + }); + + socket.on('ignite', (payload) => { + console.log('ignition payload', payload); + }); + socket.on('eject', (payload) => { + console.log('eject payload', payload); + }); + socket.on('eject2', (payload) => { + console.log('eject2 payload', payload); + }); + }); + } + res.end(); +}; + +export default SocketHandler; diff --git a/client/pages/index.js b/client/pages/index.js index ad1a28b..77e5ff6 100644 --- a/client/pages/index.js +++ b/client/pages/index.js @@ -3,56 +3,51 @@ import styles from '../styles/Home.module.css'; import { useState, useEffect } from 'react'; -import { GChart } from '../components/GChart'; -import LineChart from '../components/LineChart'; -//import useSessionStorage from '../hooks/useSessionStorage'; +import Altitude from '../components/charts/Altitude'; +import io from 'socket.io-client'; + +let socket; function Home() { - const [plot, setPlot] = useState([[0, 0]]); const [ignitionStatus, setIgnitionStatus] = useState(false); const [ejectionStatus, setEjectionStatus] = useState(false); + const [ejectionStatus2, setEjectionStatus2] = useState(false); useEffect(() => { - const timer = setInterval(() => { - fetch('/api/altitude') - .then(async (res) => { - if (res.status !== 200) { - const isJson = res.headers - .get('content-type') - ?.includes('application/json'); - if (!isJson) { - return Promise.reject(res); - } - const data = await res.json(); - const error = data ?? res.statusText; - return Promise.reject(error); - } - let data = await res.json(); - data.length > 0 && setPlot(data); - }) - .catch((e) => { - console.error(e); - clearInterval(timer); - }); - }, 300); + const socketInitializer = async () => { + await fetch('/api/socket'); + socket = io(); + + socket.on('connect', () => { + console.log(`${socket.id} connected to server`); + }); - return () => { - clearInterval(timer); + socket.on('message', (message) => { + console.log('message', message); + }); + + socket.on('disconnect', () => { + console.log('ws disconnected from server'); + }); }; + socketInitializer(); }, []); - let datapoints = [['x', 'altitude'], ...plot]; - const toggleIgnition = () => { - // socket.emit('ignite', !ignitionStatus ? 'on' : 'off'); + socket.emit('ignite', !ignitionStatus ? 'on' : 'off'); setIgnitionStatus(!ignitionStatus); }; const toggleEjection = () => { - // socket.emit('eject', !ejectionStatus ? 'on' : 'off'); + socket.emit('eject', !ejectionStatus ? 'on' : 'off'); setEjectionStatus(!ejectionStatus); }; + const toggleEjection2 = () => { + socket.emit('eject2', !ejectionStatus2 ? 'on' : 'off'); + setEjectionStatus2(!ejectionStatus2); + }; + return (
@@ -83,6 +78,9 @@ function Home() { +
- - {/* */} +
diff --git a/telegraf.conf b/telegraf.conf index 18fc24d..872296f 100644 --- a/telegraf.conf +++ b/telegraf.conf @@ -1,7 +1,7 @@ # Configuration for telegraf agent [agent] ## Default data collection interval for all inputs - interval = "0.5s" + interval = "10s" ## Rounds collection interval to 'interval' ## ie, if interval="10s" then always collect on :00, :10, :20, etc. round_interval = false @@ -75,57 +75,6 @@ ## If set to true, do no set the "host" tag in the telegraf agent. omit_hostname = false -[[outputs.influxdb_v2]] - ## The URLs of the InfluxDB cluster nodes. - ## - ## Multiple URLs can be specified for a single cluster, only ONE of the - ## urls will be written to each interval. - ## ex: urls = ["https://us-west-2-1.aws.cloud2.influxdata.com"] - urls = ["http://influxdb:8086"] - - ## Token for authentication. - token = "$DOCKER_INFLUXDB_INIT_ADMIN_TOKEN" - - ## Organization is the name of the organization you wish to write to; must exist. - organization = "$DOCKER_INFLUXDB_INIT_ORG" - - ## Destination bucket to write into. - bucket = "$DOCKER_INFLUXDB_INIT_BUCKET" - - ## The value of this tag will be used to determine the bucket. If this - ## tag is not set the 'bucket' option is used as the default. - # bucket_tag = "" - - ## If true, the bucket tag will not be added to the metric. - # exclude_bucket_tag = false - - ## Timeout for HTTP messages. - # timeout = "5s" - - ## Additional HTTP headers - # http_headers = {"X-Special-Header" = "Special-Value"} - - ## HTTP Proxy override, if unset values the standard proxy environment - ## variables are consulted to determine which proxy, if any, should be used. - # http_proxy = "http://corporate.proxy:3128" - - ## HTTP User-Agent - # user_agent = "telegraf" - - ## Content-Encoding for write request body, can be set to "gzip" to - ## compress body or "identity" to apply no encoding. - # content_encoding = "gzip" - - ## Enable or disable uint support for writing uints influxdb 2.0. - # influx_uint_support = false - - ## Optional TLS Config for use on HTTP connections. - # tls_ca = "/etc/telegraf/ca.pem" - # tls_cert = "/etc/telegraf/cert.pem" - # tls_key = "/etc/telegraf/key.pem" - ## Use TLS but skip chain & host verification - # insecure_skip_verify = false - [[inputs.mqtt_consumer]] ## Broker URLs for the MQTT server or cluster. To connect to multiple ## clusters or standalone servers, use a seperate plugin instance. @@ -190,4 +139,99 @@ ## Each data format has its own unique set of configuration options, read ## more about them here: ## https://github.com/influxdata/telegraf/blob/master/docs/DATA_FORMATS_INPUT.md -data_format = "json" \ No newline at end of file +data_format = "json" + +# Print all metrics that pass through this filter. +[[processors.printer]] + +# A plugin that can transmit metrics over WebSocket. +[[outputs.websocket]] + ## URL is the address to send metrics to. Make sure ws or wss scheme is used. + url = "ws://host.docker.internal:3000/socket.io/?EIO=3&transport=websocket" + + ## Timeouts (make sure read_timeout is larger than server ping interval or set to zero). + # connect_timeout = "30s" + # write_timeout = "30s" + # read_timeout = "30s" + + ## Optionally turn on using text data frames (binary by default). + # use_text_frames = false + + ## Optional TLS Config + # tls_ca = "/etc/telegraf/ca.pem" + # tls_cert = "/etc/telegraf/cert.pem" + # tls_key = "/etc/telegraf/key.pem" + ## Use TLS but skip chain & host verification + # insecure_skip_verify = false + + ## Optional SOCKS5 proxy to use + # socks5_enabled = true + # socks5_address = "127.0.0.1:1080" + # socks5_username = "alice" + # socks5_password = "pass123" + + ## Optional HTTP proxy to use + # use_system_proxy = false + # http_proxy_url = "http://localhost:8888" + + ## Data format to output. + ## Each data format has it's own unique set of configuration options, read + ## more about them here: + ## https://github.com/influxdata/telegraf/blob/master/docs/DATA_FORMATS_OUTPUT.md + data_format = "json" + + ## Additional HTTP Upgrade headers + # [outputs.websocket.headers] + # Authorization = "Bearer " + + +[[outputs.influxdb_v2]] + ## The URLs of the InfluxDB cluster nodes. + ## + ## Multiple URLs can be specified for a single cluster, only ONE of the + ## urls will be written to each interval. + ## ex: urls = ["https://us-west-2-1.aws.cloud2.influxdata.com"] + urls = ["http://influxdb:8086"] + + ## Token for authentication. + token = "$DOCKER_INFLUXDB_INIT_ADMIN_TOKEN" + + ## Organization is the name of the organization you wish to write to; must exist. + organization = "$DOCKER_INFLUXDB_INIT_ORG" + + ## Destination bucket to write into. + bucket = "$DOCKER_INFLUXDB_INIT_BUCKET" + + ## The value of this tag will be used to determine the bucket. If this + ## tag is not set the 'bucket' option is used as the default. + # bucket_tag = "" + + ## If true, the bucket tag will not be added to the metric. + # exclude_bucket_tag = false + + ## Timeout for HTTP messages. + # timeout = "5s" + + ## Additional HTTP headers + # http_headers = {"X-Special-Header" = "Special-Value"} + + ## HTTP Proxy override, if unset values the standard proxy environment + ## variables are consulted to determine which proxy, if any, should be used. + # http_proxy = "http://corporate.proxy:3128" + + ## HTTP User-Agent + # user_agent = "telegraf" + + ## Content-Encoding for write request body, can be set to "gzip" to + ## compress body or "identity" to apply no encoding. + # content_encoding = "gzip" + + ## Enable or disable uint support for writing uints influxdb 2.0. + # influx_uint_support = false + + ## Optional TLS Config for use on HTTP connections. + # tls_ca = "/etc/telegraf/ca.pem" + # tls_cert = "/etc/telegraf/cert.pem" + # tls_key = "/etc/telegraf/key.pem" + ## Use TLS but skip chain & host verification + # insecure_skip_verify = false From efcb37f552a37c5768596177a7cc4e31fb937135 Mon Sep 17 00:00:00 2001 From: cyator Date: Thu, 7 Jul 2022 16:00:15 +0300 Subject: [PATCH 8/8] mqtt implemented --- client/config/mqtt.js | 39 ++++++++++++++++++++++++++++++++++++++ client/pages/api/socket.js | 38 ++++++++++++++++++++++++++++++++++++- 2 files changed, 76 insertions(+), 1 deletion(-) create mode 100644 client/config/mqtt.js diff --git a/client/config/mqtt.js b/client/config/mqtt.js new file mode 100644 index 0000000..c9538db --- /dev/null +++ b/client/config/mqtt.js @@ -0,0 +1,39 @@ +import mqtt from 'mqtt'; + +const URL = 'mqtt://localhost:1883'; + +export default async () => { + const client = mqtt.connect(URL); + + client.on('connect', (connack) => { + console.log('client connected', connack); + }); + return client; +}; + +// socket.on('ignite', (payload) => { +// console.log('ignition payload', payload); +// client.publish( +// 'esp32/ignition', +// payload, +// { qos: 1, retain: false }, +// (PacketCallback, err) => { +// if (err) { +// console.log(err, 'MQTT publish packet'); +// } +// } +// ); +// }); +// socket.on('eject', (payload) => { +// console.log('eject payload', payload); +// client.publish( +// 'esp32/ejection', +// payload, +// { qos: 1, retain: false }, +// (PacketCallback, err) => { +// if (err) { +// console.log(err, 'MQTT publish packet'); +// } +// } +// ); +// }); diff --git a/client/pages/api/socket.js b/client/pages/api/socket.js index a9b3622..2e7f54a 100644 --- a/client/pages/api/socket.js +++ b/client/pages/api/socket.js @@ -1,6 +1,9 @@ import { Server } from 'socket.io'; +import connectMQTT from '../../config/mqtt'; + +const SocketHandler = async (req, res) => { + const client = await connectMQTT(); -const SocketHandler = (req, res) => { if (res.socket.server.io) { console.log('Websocket is already running'); } else { @@ -15,12 +18,45 @@ const SocketHandler = (req, res) => { socket.on('ignite', (payload) => { console.log('ignition payload', payload); + client.publish( + 'esp32/ignition', + payload, + { qos: 1, retain: false }, + (err, packet) => { + if (err) { + console.log(err, 'Ignition MQTT publish error'); + } + console.log(packet, 'Ignition MQTT publish success'); + } + ); }); socket.on('eject', (payload) => { console.log('eject payload', payload); + client.publish( + 'esp32/ejection', + payload, + { qos: 1, retain: false }, + (err, packet) => { + if (err) { + console.log(err, 'Ejection MQTT publish error'); + } + console.log(packet, 'Ejection MQTT publish success'); + } + ); }); socket.on('eject2', (payload) => { console.log('eject2 payload', payload); + client.publish( + 'esp32/ejection2', + payload, + { qos: 1, retain: false }, + (err, packet) => { + if (err) { + console.log(err, 'Ejection2 MQTT publish error'); + } + console.log(packet, 'Ejection2 MQTT publish success'); + } + ); }); }); }