71 lines
1.2 KiB
TypeScript
71 lines
1.2 KiB
TypeScript
import { useState } from "preact/hooks";
|
||
|
||
import "./index.css";
|
||
|
||
export default () => {
|
||
const [heartrate, setHeartrate] = useState(0);
|
||
|
||
const ws = new WebSocket(
|
||
"wss://app.hyperate.io/socket/websocket?token=wv39nM6iyrNJulvpmMQrimYPIXy2dVrYRjkuHpbRapKT2VSh65ngDGHdCdCtmEN9",
|
||
);
|
||
|
||
let hrTimeout: ReturnType<typeof setTimeout>;
|
||
|
||
const setHrInterval = () => {
|
||
hrTimeout = setTimeout(() => {
|
||
return setHeartrate(0);
|
||
}, 6000);
|
||
};
|
||
|
||
ws.onopen = () => {
|
||
ws.send(
|
||
JSON.stringify({
|
||
topic: "hr:0BCA",
|
||
event: "phx_join",
|
||
payload: {},
|
||
ref: 0,
|
||
}),
|
||
);
|
||
|
||
setInterval(() => {
|
||
ws.send(
|
||
JSON.stringify({
|
||
topic: "phoenix",
|
||
event: "heartbeat",
|
||
payload: {},
|
||
ref: 0,
|
||
}),
|
||
);
|
||
}, 10000);
|
||
|
||
return setHrInterval();
|
||
};
|
||
|
||
ws.onmessage = ({ data }) => {
|
||
const { event, payload } = JSON.parse(data);
|
||
switch (event) {
|
||
case "hr_update": {
|
||
clearTimeout(hrTimeout);
|
||
setHrInterval();
|
||
setHeartrate(payload.hr);
|
||
break;
|
||
}
|
||
default: {
|
||
break;
|
||
}
|
||
}
|
||
};
|
||
|
||
return (
|
||
<>
|
||
<div
|
||
style={heartrate === 0 ? "display:none" : `--bpm: ${heartrate};`}
|
||
class="heart"
|
||
>
|
||
♥️
|
||
<br />
|
||
<span>{heartrate} BPM</span>
|
||
</div>
|
||
</>
|
||
);
|
||
};
|