리액트 - 웹 소켓(ws) 통신 + useEffect에서 웹 소켓(ws) 사용 with useRef

 

ws-server.js (웹 소켓 서버측)

const WebSocketServer = require('ws').Server;

const wss = new WebSocketServer({ port: 8080 });

wss.on('connection', function connection(ws) {
  ws.on('message', function message(data) {
    console.log('received: %s', data);
  });

  ws.send('something');
});

 

index.js (리액트)

import React, { useState ,useEffect, useRef} from 'react';


const [socketConnted, setSocketConnected] = useState(false);
const ws = useRef(null);

useEffect( ()=>{ 
    ws.current = new WebSocket('ws://localhost:8080/ws'); // 웹 소켓 연결

    ws.current.onopen = ()=>{
      console.log('웹 소켓 연결 성공!');
      setSocketConnected(true);
    }
    ws.current.onclose = (error)=>{
      console.log('웹 소켓 연결 종료.');
      console.log('error: ' + error);
    }
    ws.current.onerror = (error)=>{
      console.log('웹 소켓 에러 발생.')
      console.log('error: ' + error);
    }
    ws.current.onmessage = (msg)=>{
      console.log('상대 메시지: ' +msg.data );
      setTranslate( msg.data );
    }

    return () =>{
      ws.current.close();
    }
}, []);    
    

// 다른 useEffect에서 ws 사용
useEffect( ()=>{
    if(socketConnted)
      ws.current.send(finalTranscript);
}, [object] )

 

 

참고

 

https://sunnykim91.tistory.com/139

세상 쉬운 React로 WebSocket통신해보기 server,client 다 있음!(with TypeScript)

 

https://jcon.tistory.com/186

react 컴포넌트에 websocket 적용하기

 

[웹소켓 인스턴스의 scope 문제 - useEffect hook 안에서 정의가 되기 때문에 다른 함수에서 웹소켓 인스턴스를 사용할 수 없게 된다. 이를 해결하는 방안으로 useRef hook을 사용]

https://velog.io/@ysung327/react-native%EC%9B%B9%EC%86%8C%EC%BC%93-%EC%A0%81%EC%9A%A9%ED%95%98%EA%B8%B0

[react native]웹소켓 적용하기

 

[useRef 사용법 및 예제]

https://itprogramming119.tistory.com/entry/React-useRef-%EC%82%AC%EC%9A%A9%EB%B2%95-%EB%B0%8F-%EC%98%88%EC%A0%9C

[React] useRef 사용법 및 예제