/
dbataeva
/
tasksApp
Обзор
Документация
Войти
/
dbataeva
/
tasksApp
Код
Запросы
2
Задачи
Вики
Пакеты
0
Релизы
0
CI/CD
Аналитика
Безопасность
task9
appProject/src/features/webSocketLogger/ui/WebSocketLogger.tsx
58 строк
1 KB
Daria Bataeva
refactor(task7): move code into appProject folder
26 окт 2025, 14:56
26 окт 2025, 14:56
489b5b2
Код
Авторство
О чём код?
import React, { useCallback, useEffect, useRef } from 'react'; import styles from './WebSocketLogger.module.css'; const wsUri = 'http://localhost:8080/'; export const WebSocketLogger = () => { const socketRef = useRef<WebSocket>(null); const inputValueRef = useRef(''); const inputValueChangingHandle = useCallback( (event: React.ChangeEvent<HTMLInputElement>) => { inputValueRef.current = event.target.value; }, [] ); const buttonClickHandle = useCallback(() => { if (inputValueRef.current) { socketRef.current?.send(inputValueRef.current); } }, []); useEffect(() => { const handleOpen = () => { console.log('CONNECTED'); socketRef.current?.send('ping'); }; const handleMessage = (event: WebSocketEventMap['message']) => { console.log(`RECEIVED: ${event.data}`); }; if (!socketRef.current) { socketRef.current = new WebSocket(wsUri); socketRef.current.addEventListener('open', handleOpen); socketRef.current.addEventListener('message', handleMessage); } return () => { if (!socketRef.current?.readyState) { return; } socketRef.current.removeEventListener('open', handleOpen); socketRef.current.removeEventListener('message', handleMessage); socketRef.current.close(); }; }, []); return ( <div className={styles.container}> <input onChange={inputValueChangingHandle} /> <button onClick={buttonClickHandle}>отправить</button> </div> ); };