Recibí un error al conectar WebSocket pero no puedo solucionarlo, ¿cuál es el problema de mis códigos? Cuando se carga mi página, trato de enviar un mensaje (también espero unos segundos) pero no funciona.

¡Usé este método webSocket.current.readyState === WebSocket.OPEN pero no respondió!

Mi código:

 export default function ChatRoom() { const [input, setInput] = useState(""); const handleChange = (e) => setInput(e.target.value); const handleOnEnter = (e) => { if (e.charCode === 13 || e.which === 13) { sendMessage(); setInput(""); } }; const webSocket = useRef(null); const [chatMessages, setChatMessages] = useState([]); useEffect(() => { console.log("Opening WebSocket"); webSocket.current = new WebSocket("ws://localhost:3000"); const openWebSocket = () => { webSocket.current.onopen = (event) => { console.log("Open:", event); }; webSocket.current.onclose = (event) => { console.log("Close:", event); }; }; openWebSocket(); return () => { console.log("Closing WebSocket"); webSocket.current.close(); }; }, []); useEffect(() => { webSocket.current.onmessage = (event) => { const chatMessageDto = JSON.parse(event.data); console.log("Message:", chatMessageDto); setChatMessages([ ...chatMessages, { content: input, }, ]); }; }, [chatMessages]); const sendMessage = () => { console.log("WebSocket.OPEN === ", WebSocket.OPEN); console.log("webSocket.current.readyState === ", webSocket.current.readyState); if (webSocket.current.readyState === WebSocket.OPEN) { console.log("Send!"); webSocket.current.send( JSON.stringify({ content: input, }) ); } else if (webSocket.current.readyState === WebSocket.CONNECTING) { webSocket.current.addEventListener("open", () => sendMessage()); } }; return ( <div className={styles.chatWrapper}> </div> <div> {chatMessages.map((item) => ( <div>{item.content}</div> ))} </div> )} <div> <input value={input} placeholder={"type message ..."} onChange={(e) => handleChange(e)} onKeyPress={handleOnEnter} /> </div> </div> ); }

mi consola:

 WebSocket.OPEN === 1 webSocket.current.readyState === 0