socketio 사용법

실시간으로 통신하기 위해서 Socket.io를 사용하기로했다.

1. 설치

npm install socket.io-client

2. 통신환경 설정

socket.js

import io from 'socket.io-client';

export const sio = io('https://localhost', 
    {path: '/api/socket.io/', 
    cors: {
        origin: "*",
        methods: ["GET", "POST"],
        transports: ['websocket', 'polling'],
        credentials: true
    },
    allowEIO3:true
});

3. 사용법
   사용할 때 connect, 연결이 끝났을 때 disconnect로 socket을 제어해야한다. 안그러면 쓸일없는 데이터가 계속해서 전송되는 참사가..

useEffect(()=>{
	setIsConnect(true);
    sio.connect();
    console.log('socket connected')

    return () => {
      if(isConnect) {
        setIsConnect(false);
        sio.disconnect();
        console.log('socket disconnected')
      }
  };
  }, [])

emit를 이용하면 backend에 데이터를 전달해줄 수 있다.

useEffect(()=>{
    if(isConnect) {
        sio.emit('start')
        console.log('socket start')
    } else {
        sio.emit('stop')
    }
  }, [])

on을 이용해서 이벤트를 받아온다.

useEffect(() => {
        sio.on('comment', (data) => {
            setChatList([...chatList, {user: data[0], message:data[1]}])
        })

        console.log(chatList)

        return () => {
            sio.off('comment')
        }
    
      })

이벤트가 끝나면 꼭 off해줘야 한다.

만약 통신이 안된다면 backend에서 CORS에러가 발생하지 않았는지 확인해보자.