/
page.js
51 lines (43 loc) · 1.37 KB
/
page.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
'use client'
import React from "react";
import Thermometer from './Thermometer';
import GasTank from './GasTank';
import { useState } from 'react';
import io from 'socket.io-client'
let defaultSet = false;
let Socket
export default function Home() {
const [currentTemp, setTemp] = useState(10);
const [topLeft, setLeft] = useState(false);
const [topRight, setRight] = useState(false);
React.useEffect(() => {
// Create a socket connection
const socket = io({ path: '/api/socket.io'});
// Listen for incoming messages
socket.on('message', (message) => {
if (message.temp)
setTemp(message.temp);
if (message.topLeft !== undefined)
setLeft(message.topLeft);
if (message.topRight !== undefined)
setRight(message.topRight);
});
// Clean up the socket connection on unmount
return () => {
socket.disconnect();
};
}, []);
return (
<div >
<div style={{ paddingLeft: '10px', paddingTop: '10px', height:'250px', width:'100%'}}>
<table style={{ border: '3px solid black' }}>
<tbody>
<tr><td colSpan='2' style={{textAlign: 'center'}}>Gas Station Dashboard</td></tr>
<tr><td><Thermometer data={currentTemp}/></td>
<td><GasTank data={{Left: topLeft, Right: topRight}}/></td></tr>
</tbody>
</table>
</div>
</div>
)
}