javascript — WebSockets с функциональными компонентами

WebSockets с функциональными компонентами

Я использую веб-сокеты в своем приложении React. Приложение должно состоять только из компонентов функции.

Представьте, что приложение состоит из двух «вкладок»: одна не имеет значения, а другая — чат с использованием веб-сокетов. Учитывая это, мы хотим наладить соединение через веб-сокет, как только пользователь войдет во вкладку чата.

Как компонент должен обрабатывать объект websocket? Поскольку мы хотим выполнить очистку после того, как пользователь переключится на другую вкладку ( WebSocket.close() ), похоже, что здесь мы должны использовать эффект-хук.

 const Chat = () ={amp}gt; { const [messages, setMessages] = useState([]); useEffect(() ={amp}gt; { const webSocket = new WebSocket("ws://url"); webSocket.onmessage = (message) ={amp}gt; { setMessages(prev ={amp}gt; [...prev, message.data]); }; return () ={amp}gt; webSocket.close(); }, []); return {amp}lt;p{amp}gt;{messages.join(" ")}{amp}lt;/p{amp}gt;; }; 

Работает! Но теперь представьте, что мы хотим сослаться на переменную webSocket где-то за пределами области действия useEffect — скажем, мы хотим отправить что-то на сервер, как только пользователь нажмет кнопку.

Теперь, как это должно быть реализовано? Моя текущая идея (хотя я считаю, что она ошибочна):

 const Chat = () ={amp}gt; { const [messages, setMessages] = useState([]); const [webSocket] = useState(new WebSocket("ws://url")); useEffect(() ={amp}gt; { webSocket.onmessage = (message) ={amp}gt; { setMessages(prev ={amp}gt; [...prev, message.data]); }; return () ={amp}gt; webSocket.close(); }, []); return {amp}lt;p{amp}gt;{messages.join(" ")}{amp}lt;/p{amp}gt;; }; 

Вроде работает, тем не менее я чувствую, что есть лучшее решение.

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector