Skip to content

Commit 6aa85a7

Browse files
yashkatheyashkathe
committed
created sockets for sending temperature of GPU and CPU (backend), added extra props and config options for graphs (frontend)
1 parent fe593b3 commit 6aa85a7

File tree

11 files changed

+833
-82
lines changed

11 files changed

+833
-82
lines changed

‎backend/package-lock.json

+679
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎backend/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@
3333
"cors": "^2.8.5",
3434
"dotenv": "^16.4.5",
3535
"nodemon": "^3.1.3",
36+
"raspberrypi-sys-info": "^0.2.1",
3637
"socket.io": "^4.7.5",
3738
"systeminformation": "^5.22.10"
3839
}

‎backend/src/helpers/helpers.ts

+54-20
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,17 @@
11
import os from 'os'
22
import si from 'systeminformation'
3+
import { getGpuTemperature, getCpuTemperature } from 'raspberrypi-sys-info';
34

4-
import { isCpuUtil, isRamUtil, isSwapUtil, isError } from '../types/types'
5+
import { isCpuUtil, isRamUtil, isError, isTemp } from '../types/types'
56

67
let limit: number = 10
78

89
let idx: number = 0
910

1011
let RAM: isRamUtil[] = []
11-
let SWAP: isSwapUtil[] = []
12-
let CPU: isCpuUtil[] = []
12+
let SWAP: isRamUtil[] = []
13+
let GPU_TEMP: isTemp[] = []
14+
let CPU_TEMP: isTemp[] = []
1315

1416
// CALCULATING RAM UTILISATION
1517
export const calculateRamUtil = (): isRamUtil[] => {
@@ -24,14 +26,8 @@ export const calculateRamUtil = (): isRamUtil[] => {
2426
// convert to MB
2527
ramUtil = +(ramUtil / (1024 * 1024)).toFixed(2)
2628

27-
if (RAM.length >= limit) {
28-
29-
RAM.shift()
30-
RAM.push({ name: `${idx} sec`, x: ramUtil })
31-
32-
} else {
33-
RAM.push({ name: `${idx} sec`, x: ramUtil })
34-
}
29+
if (RAM.length >= limit) RAM.shift()
30+
RAM.push({ name: `${idx} sec`, x: ramUtil })
3531

3632
return RAM
3733
}
@@ -47,14 +43,8 @@ export const calculateSwapUtil = async () => {
4743

4844
let freeSwap = swapData.swapfree;
4945

50-
if (SWAP.length >= limit) {
51-
52-
SWAP.shift()
53-
SWAP.push({ name: `${idx} sec`, x: freeSwap })
54-
55-
} else {
56-
SWAP.push({ name: `${idx} sec`, x: freeSwap })
57-
}
46+
if (SWAP.length >= limit) SWAP.shift()
47+
SWAP.push({ name: `${idx} sec`, x: freeSwap })
5848

5949
return SWAP
6050

@@ -86,4 +76,48 @@ export const calculateCpuUtil = async (): Promise<isCpuUtil[] | isError> => {
8676
return { message: error }
8777
}
8878

89-
}
79+
}
80+
81+
// CALCULATE GPU TEMPERATURE
82+
export const getGpuTemp = async () => {
83+
84+
idx += 1
85+
86+
try {
87+
88+
const gpuTemp = await getGpuTemperature();
89+
90+
if (GPU_TEMP.length >= limit) GPU_TEMP.shift()
91+
GPU_TEMP.push({ name: `${idx} sec`, temp: +gpuTemp })
92+
93+
return GPU_TEMP
94+
95+
} catch (error: any) {
96+
97+
return { message: error }
98+
99+
}
100+
101+
}
102+
103+
// CALCULATE CPU TEMPERATURE
104+
export const getCpuTemp = async () => {
105+
106+
idx += 1
107+
108+
try {
109+
110+
const cpuTemp = await getCpuTemperature();
111+
112+
if (CPU_TEMP.length >= limit) CPU_TEMP.shift()
113+
CPU_TEMP.push({ name: `${idx} sec`, temp: +cpuTemp })
114+
115+
return CPU_TEMP
116+
117+
} catch (error: any) {
118+
119+
return { message: error }
120+
121+
}
122+
123+
}

‎backend/src/server.ts

+3-50
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
11
import express, { Request, Response } from 'express';
22
import dotenv from 'dotenv';
33
import cors from 'cors';
4-
import { Server as socketServer } from 'socket.io';
54
import { createServer } from 'http';
65
import router from './routes/routes'
7-
import { calculateRamUtil, calculateCpuUtil } from './helpers/helpers';
6+
import { connectToSocketServer } from './socket/socket';
87

98
// load the .env file
109
dotenv.config();
@@ -28,54 +27,8 @@ const PORT: number = process.env.PORT ? parseInt(process.env.PORT) : 4000;
2827
// create HTTP server
2928
const httpServer = createServer(app);
3029

31-
// load the socket.io server
32-
const server = new socketServer(httpServer, {
33-
cors: {
34-
origin: '*'
35-
}
36-
});
37-
38-
// start listening on socket.io
39-
server.on("connection", (socket) => {
40-
console.log("socket connected");
41-
42-
// ______________MAIN FUNCTIONS______________
43-
44-
// RAM
45-
const ramInterval = setInterval(() => {
46-
try {
47-
const ramUsage = calculateRamUtil();
48-
socket.emit('ramUsage', ramUsage);
49-
} catch (error) {
50-
console.error('Error calculating RAM usage:', error);
51-
}
52-
}, 1000);
53-
54-
// CPU
55-
56-
const cpuInterval = setInterval(async () => {
57-
try{
58-
const cpuUsage = await calculateCpuUtil()
59-
socket.emit("cpuUsage", cpuUsage)
60-
}catch(error){
61-
console.error('Error calculating CPU usage:', error);
62-
}
63-
}, 1000)
64-
65-
// ______________CLEAN UP______________
66-
67-
// CLEAR INTERVALS ON DISCONNECTS
68-
socket.on("disconnect", () => {
69-
clearInterval(ramInterval);
70-
clearInterval(cpuInterval);
71-
console.log("socket disconnected");
72-
});
73-
74-
// Handle errors
75-
socket.on('error', (error) => {
76-
console.error('Socket error:', error);
77-
});
78-
});
30+
// connect sockets
31+
connectToSocketServer(httpServer)
7932

8033
// start the http server
8134
httpServer.listen(PORT, () => {

‎backend/src/socket/socket.ts

+76
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
import { Server as socketServer } from 'socket.io';
2+
import { calculateRamUtil, calculateCpuUtil, getGpuTemp, getCpuTemp } from '../helpers/helpers';
3+
4+
export const connectToSocketServer = (httpServer: any) => {
5+
6+
// load the socket.io server
7+
const server = new socketServer(httpServer, {
8+
cors: {
9+
origin: '*'
10+
}
11+
});
12+
13+
// start listening on socket.io
14+
server.on("connection", (socket) => {
15+
console.log("socket connected");
16+
17+
// ______________MAIN FUNCTIONS______________
18+
19+
// RAM
20+
const ramInterval = setInterval(() => {
21+
try {
22+
const ramUsage = calculateRamUtil();
23+
socket.emit('ramUsage', ramUsage);
24+
} catch (error) {
25+
console.error('Error calculating RAM usage:', error);
26+
}
27+
}, 2500);
28+
29+
// CPU
30+
const cpuInterval = setInterval(async () => {
31+
try {
32+
const cpuUsage = await calculateCpuUtil()
33+
socket.emit("cpuUsage", cpuUsage)
34+
} catch (error) {
35+
console.error('Error calculating CPU usage:', error);
36+
}
37+
}, 2500)
38+
39+
// GPU TEMP
40+
const gpuTemp = setInterval(async () => {
41+
try {
42+
const gpuTemp = await getGpuTemp()
43+
socket.emit("gpuTemp", gpuTemp)
44+
} catch (error) {
45+
console.log('Error getting GPU temperature', error)
46+
}
47+
}, 2500)
48+
49+
// CPU TEMP
50+
const cpuTemp = setInterval(async () => {
51+
try {
52+
const cpuTemp = await getCpuTemp()
53+
socket.emit("cpuTemp", cpuTemp)
54+
} catch (error) {
55+
console.log('Error getting GPU temperature', error)
56+
}
57+
}, 2500)
58+
59+
// ______________CLEAN UP______________
60+
61+
// CLEAR INTERVALS ON DISCONNECTS
62+
socket.on("disconnect", () => {
63+
clearInterval(ramInterval);
64+
clearInterval(cpuInterval);
65+
clearInterval(gpuTemp)
66+
clearInterval(cpuTemp)
67+
console.log("socket disconnected");
68+
});
69+
70+
// Handle errors
71+
socket.on('error', (error) => {
72+
console.error('Socket error:', error);
73+
});
74+
});
75+
76+
}

‎backend/src/types/types.ts

+5-5
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,16 @@ export type isRamUtil = {
33
x: number
44
}
55

6-
export type isSwapUtil = {
7-
name: string;
8-
x: number
9-
}
10-
116
export type isCpuUtil = {
127
core: number;
138
load: number
149
}
1510

11+
export type isTemp = {
12+
name: string;
13+
temp: number
14+
}
15+
1616
export type isRamStat = {
1717
totalRam: number;
1818
minRam: number;

‎backend/tsconfig.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -105,5 +105,6 @@
105105
/* Completeness */
106106
// "skipDefaultLibCheck": true, /* Skip type checking .d.ts files that are included with TypeScript. */
107107
"skipLibCheck": true /* Skip type checking all .d.ts files. */
108-
}
108+
},
109+
"include": ["src"]
109110
}

‎frontend/src/graphs/AreaChartGraph.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,8 @@ const AreaChartGraph: React.FC<AreaChartProps> = ({ data, dataLabel}) => {
1212
<AreaChart data={data} style={{ backgroundColor: '#2b2b3d' }} margin={{ top: 25, right: 25, left: 0, bottom: 0 }}>
1313
<defs>
1414
<linearGradient id="colorUv" x1="0" y1="0" x2="0" y2="1">
15-
<stop offset="5%" stopColor="rgba(76, 175, 80, 1)" stopOpacity={0.8} />
16-
<stop offset="95%" stopColor="rgba(76, 175, 80, 1)" stopOpacity={0.5} />
15+
<stop offset="5%" stopColor="rgba(76, 175, 80, 1)" stopOpacity={0.9} />
16+
<stop offset="95%" stopColor="rgba(76, 175, 80, 1)" stopOpacity={0.7} />
1717
</linearGradient>
1818
</defs>
1919
<XAxis stroke="#ccc" />

‎frontend/src/graphs/BarChartGraph.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,14 @@ import {ResponsiveContainer, BarChart, CartesianGrid, XAxis, YAxis, Tooltip, Leg
44

55
import Wrapper from '../shared/Wrapper';
66

7-
const BarChartGraph: React.FC<BarChartProps> = ({ data, dataLabel }) => {
7+
const BarChartGraph: React.FC<BarChartProps> = ({ data, dataLabel, yLimit, yTicks }) => {
88
return (
99
<Wrapper>
1010
<ResponsiveContainer width="100%" height="100%">
1111
<BarChart data={data} style={{ backgroundColor: '#2b2b3d' }} margin={{ top: 25, right: 25, left: 0, bottom: 0 }}>
1212
<CartesianGrid strokeDasharray="2 2" stroke="rgba(204, 204, 204, 0.5)"/>
1313
<XAxis dataKey="core" stroke="#ccc"/>
14-
<YAxis stroke="#ccc"/>
14+
<YAxis stroke="#ccc" domain={yLimit} tickCount={yTicks}/>
1515
<Tooltip />
1616
<Legend />
1717
<Bar name={dataLabel} dataKey="load" fill="#8884d8" />

‎frontend/src/sockets/CpuUtil.tsx

+6-1
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,12 @@ const CpuUtil: React.FC = () => {
3838
<div className={classes.parent}>
3939
<h1>CPU Utilization</h1>
4040
{isLoading && <Spinner />}
41-
{!isLoading && <BarChartGraph data={data} dataLabel="CPU Core Utilization"/>}
41+
{!isLoading && <BarChartGraph
42+
data={data}
43+
dataLabel="Processor Usage"
44+
yLimit={[0, 100]}
45+
yTicks={5}
46+
/>}
4247
</div>
4348
)
4449
}

‎frontend/src/types/types.ts

+3-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,9 @@ export interface AreaChartProps {
55

66
export interface BarChartProps {
77
data: {core: number, load: number}[];
8-
dataLabel: string
8+
dataLabel: string,
9+
yTicks: number,
10+
yLimit: [number, number]
911
}
1012

1113
export interface isRamUtil {

0 commit comments

Comments
 (0)