You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
61 lines
2.1 KiB
61 lines
2.1 KiB
import cls from './camera.module.scss';
|
|
import {useEffect, useState} from "react";
|
|
|
|
/* eslint-disable-next-line */
|
|
export interface CameraProps {
|
|
}
|
|
|
|
export function Camera(props: CameraProps) {
|
|
const [randomNumber, setRandomNumber] = useState(null);
|
|
|
|
useEffect(() => {
|
|
// Создаем WebSocket-соединение
|
|
const ws = new WebSocket('ws://localhost:8765/');
|
|
|
|
// Обработка сообщений от сервера
|
|
ws.onmessage = (event) => {
|
|
const newRandomNumber = event.data;
|
|
setRandomNumber(newRandomNumber);
|
|
};
|
|
|
|
// Закрытие соединения при размонтировании компонента
|
|
return () => {
|
|
ws.close();
|
|
};
|
|
}, []);
|
|
return (
|
|
<div className={cls.container}>
|
|
<div className={cls.select}>
|
|
<div>
|
|
<p className={cls.date}>
|
|
2020-23-21
|
|
</p>
|
|
<p className={cls.time}>
|
|
14:32
|
|
</p>
|
|
</div>
|
|
<span className={cls.line}></span>
|
|
<div>
|
|
<p className={cls.name}>
|
|
Cum
|
|
</p>
|
|
<p className={cls.number}>
|
|
№69
|
|
</p>
|
|
<svg width="24" height="22" viewBox="0 0 24 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M21 9.16699H3" stroke="black" strokeLinecap="round" strokeLinejoin="round"/>
|
|
<path d="M21 5.5H3" stroke="black" strokeLinecap="round" strokeLinejoin="round"/>
|
|
<path d="M21 12.833H3" stroke="black" strokeLinecap="round" strokeLinejoin="round"/>
|
|
<path d="M21 16.5H3" stroke="black" strokeLinecap="round" strokeLinejoin="round"/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
{randomNumber}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Camera;
|