React Javascript WebSocket - Server 포함

ws 프로토콜 기반으로 클라이언트와 서버 사이에 지속적인 양방향 연결 스트림을 만들어 주는 기술

WebSocket 연결

1. 브라우저에서 WebSocket 제공 시간이 걸리니 useEffect 내에서 연결
2. WebScoket은 꼭 전역변수로 사용

const ws = useRef(null);
useEffect(() => webSocketLogin(), []);

const webSocketLogin = useCallback(() => {
  // 웹소켓 연결
  ws.current = new WebSocket('ws://localhost:8080/socket/chat');
   // 메세지 받으면 행동
ws.current.onmessage = message => setSocketData(JSON.parse(message.data));, []);

Message 전송

// 소켓이 생성됐으나 미연결 상태로 연결되면 메세지 전송
if (ws.current.readyState === 0) {
    ws.current.onopen = () => ws.current.send(sendData);
} else {
  // 메시지 전송
  ws.current.send(sendData);
}

 

Node WebSocket Server

Spring WebSocket Server - React

GitHub - arkhyeon/WebSocket