{"id":95420,"date":"2025-01-31T16:20:04","date_gmt":"2025-01-31T12:50:04","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/5-%d9%82%d9%84%d8%a7%d8%a8-%d8%b3%d9%81%d8%a7%d8%b1%d8%b4%db%8c-%d8%a8%d8%b1%d8%aa%d8%b1-%d8%a8%d8%b1%d8%a7%db%8c-react\/"},"modified":"2025-01-31T16:20:04","modified_gmt":"2025-01-31T12:50:04","slug":"5-%d9%82%d9%84%d8%a7%d8%a8-%d8%b3%d9%81%d8%a7%d8%b1%d8%b4%db%8c-%d8%a8%d8%b1%d8%aa%d8%b1-%d8%a8%d8%b1%d8%a7%db%8c-react","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/5-%d9%82%d9%84%d8%a7%d8%a8-%d8%b3%d9%81%d8%a7%d8%b1%d8%b4%db%8c-%d8%a8%d8%b1%d8%aa%d8%b1-%d8%a8%d8%b1%d8%a7%db%8c-react\/","title":{"rendered":"5 \u0642\u0644\u0627\u0628 \u0633\u0641\u0627\u0631\u0634\u06cc \u0628\u0631\u062a\u0631 \u0628\u0631\u0627\u06cc React"},"content":{"rendered":"
\n

\u0633\u0644\u0627\u0645 \u0628\u0647 \u0647\u0645\u0647 Slao \u0627\u0633\u062a \u060c
\u0645\u0648\u0627\u0631\u062f \u0632\u06cc\u0631 5 \u0642\u0644\u0627\u0628 \u0628\u0631\u062a\u0631 \u0645\u0646\u0627\u0633\u0628 \u0648 \u062c\u062f\u06cc\u062f \u0628\u0631\u0627\u06cc \u0647\u0645\u0647 \u062e\u0648\u0627\u0647\u062f \u0628\u0648\u062f \u06a9\u0647 \u0647\u0645\u0647 \u0628\u062a\u0648\u0627\u0646\u0646\u062f \u0627\u0632 \u0622\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u0646\u062f <\/p>\n

usemediaquery<\/strong><\/p>\n

Usemediaquery \u0628\u0647 \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u0631\u0633\u0627\u0646\u0647 \u0627\u06cc \u06af\u0648\u0634 \u0645\u06cc \u062f\u0647\u062f \u0648 \u0628\u0647 \u0634\u0645\u0627 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u0627\u0646\u0648\u0627\u0639 \u06cc\u0627 \u0631\u0641\u062a\u0627\u0631\u0647\u0627\u06cc \u062e\u0627\u0635\u06cc \u0631\u0627 \u0628\u0631 \u0627\u0633\u0627\u0633 \u0627\u0646\u062f\u0627\u0632\u0647 \u062a\u062c\u0647\u06cc\u0632\u0627\u062a \u0627\u0639\u0645\u0627\u0644 \u06a9\u0646\u06cc\u062f<\/p>\n

\n
import { useEffect, useState } from 'react';\n\nfunction useMediaQuery(query) {\n  const [matches, setMatches] = useState(false);\n\n  useEffect(() => {\n    const mediaQuery = window.matchMedia(query);\n    setMatches(mediaQuery.matches);\n\n    const handler = event => setMatches(event.matches);\n    mediaQuery.addEventListener('change', handler);\n\n    return () => mediaQuery.removeEventListener('change', handler);\n  }, [query]);\n\n  return matches;\n}\n<\/code><\/pre>\n
\n
\n    \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    \n<\/svg><\/p>\n
    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    \n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n
\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0631\u062f\u0646<\/p>\n
\n
const isLargeScreen = useMediaQuery('(min-width: 1024px)');\n\n<\/code><\/pre>\n
\n
\n    \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    \n<\/svg><\/p>\n
    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    \n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n
\u0627\u0633\u062a\u0641\u0627\u062f\u0647<\/strong><\/p>\n
HOOK CEASEWEBECKETE \u0628\u0631\u0646\u0627\u0645\u0647 \u0634\u0645\u0627 \u0631\u0627 \u0628\u0647 \u0633\u0631\u0648\u0631 WebSocket \u0645\u062a\u0635\u0644 \u0645\u06cc \u06a9\u0646\u062f \u0648 \u0628\u0647 \u0631\u0627\u062d\u062a\u06cc \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u0632\u0645\u0627\u0646 \u0648\u0627\u0642\u0639\u06cc \u0631\u0627 \u0627\u0631\u0633\u0627\u0644 \u0648 \u062f\u0631\u06cc\u0627\u0641\u062a \u0645\u06cc \u06a9\u0646\u062f. \u0627\u06cc\u0646 \u0627\u062a\u0635\u0627\u0644\u0627\u062a \u060c \u0628\u0627\u0641\u0631 \u067e\u06cc\u0627\u0645 \u0648 \u0631\u0633\u06cc\u062f\u06af\u06cc \u0628\u0647 \u0631\u0648\u06cc\u062f\u0627\u062f\u0647\u0627 \u0631\u0627 \u067e\u0631\u062f\u0627\u0632\u0634 \u0645\u06cc \u06a9\u0646\u062f \u0648 \u0628\u0647 \u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc \u0622\u0646 \u0622\u0633\u0627\u0646 \u0627\u0633\u062a<\/p>\n
\u0627\u06cc\u0646 \u0645\u062b\u0627\u0644 \u06cc\u06a9 Webocket Hook \u0631\u0627 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f \u06a9\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0628\u0627 \u0645\u062f\u06cc\u0631\u06cc\u062a \u0627\u062a\u0635\u0627\u0644 \u060c \u067e\u0631\u062f\u0627\u0632\u0634 \u0631\u0648\u06cc\u062f\u0627\u062f\u0647\u0627 \u0648 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u062a\u0645\u06cc\u0632 \u06a9\u0646\u0646\u062f\u0647 \u0628\u0647 \u0637\u0648\u0631 \u0645\u0631\u062a\u0628 \u0645\u0648\u0631\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0642\u0631\u0627\u0631 \u06af\u06cc\u0631\u062f.<\/p>\n
\n
import { useState, useEffect, useRef, useCallback } from 'react';\n\nfunction useWebSocket(url, options = {}) {\n  const { reconnect = true, reconnectInterval = 5000, onOpen, onMessage, onError, onClose } = options;\n  const [isConnected, setIsConnected] = useState(false);\n  const [lastMessage, setLastMessage] = useState(null);\n  const websocketRef = useRef(null);\n  const reconnectTimeout = useRef(null);\n\n  const connect = useCallback(() => {\n    websocketRef.current = new WebSocket(url);\n\n    websocketRef.current.onopen = (event) => {\n      setIsConnected(true);\n      onOpen && onOpen(event);\n    };\n\n    websocketRef.current.onmessage = (event) => {\n      setLastMessage(event.data);\n      onMessage && onMessage(event);\n    };\n\n    websocketRef.current.onerror = (event) => {\n      onError && onError(event);\n    };\n\n    websocketRef.current.onclose = (event) => {\n      setIsConnected(false);\n      onClose && onClose(event);\n      if (reconnect) {\n        reconnectTimeout.current = setTimeout(connect, reconnectInterval);\n      }\n    };\n  }, [url, reconnect, reconnectInterval, onOpen, onMessage, onError, onClose]);\n\n  const sendMessage = useCallback((message) => {\n    if (isConnected && websocketRef.current) {\n      websocketRef.current.send(message);\n    }\n  }, [isConnected]);\n\n  useEffect(() => {\n    connect();\n\n    return () => {\n      if (websocketRef.current) {\n        websocketRef.current.close();\n      }\n      clearTimeout(reconnectTimeout.current);\n    };\n  }, [connect]);\n\n  return { isConnected, sendMessage, lastMessage };\n}\n<\/code><\/pre>\n
\n
\n    \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    \n<\/svg><\/p>\n
    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    \n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n
\u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc UseWebocket<\/p>\n