[React/WebSocket] 기본적인 React에서의 WebSocket 연결

어쩌다보니, 채팅 프로그램 비슷하게 만들일이 생겨서 웹소켓을 공부하게 되어, 간단하게 React에서 연결하는 걸 보여주려고 한다.

 

react에서 사용하는 라이브러리중 socket.io-client 를 사용하였다.

 

npm install socket.io-client

or

yarn add socket.io-client

 

방식으로 설치할 수 있다.

 

우선 웹소켓을 연결할 준비가 되어있다는 전제로

import { useEffect } from 'react';
import io from 'socket.io-client';

export default function WebSocket() {

    const socket = io('ws://localhost:8000');
    useEffect(() => {
        socket.on('event', (data) => {
            console.log('백엔드에서 송신된 데이터:', data);
        });

        return () => {
            socket.disconnect();
        };
    }, []);

    return null;
}

 

연결할 백엔드 주소를 입력하고, socket.on 을 사용하여 전송할 이벤트 명을 입력하면 그 이벤트로 연결이 되고, 백엔드에서도 이벤트 명을 통하여, 다시 데이터를 전송 시킬수 있다.

 

socket.emit('event',test);

 

와 같은 방식으로 연결된 이벤트에 데이터를 전송할 수 있다.

 

아래는 전체적인 코드이다.

import { useEffect } from 'react';
import io from 'socket.io-client';

export default function WebSocket() {
	const socket = io('ws://localhost:8000');
    useEffect(() => {
        socket.on('event', (data) => {
            console.log('백엔드에서 송신된 데이터:', data);
        });

        return () => {
            socket.disconnect();
        };
    }, []);
    
    const testData = { message: 'Hello from client!' };

    const handleClick = () => {
        if (socket) {
            socket.emit('event', testData);
        }
    };

    return (
    <>
      <div>
        <button onClick(handleClick)> send Data </button>
      </div>
    </>
    );
}

 

웹소켓을 연결 후 버튼을 클릭할 경우 message를 연결된 웹소켓의 이벤트에 전송한다.

 

 

이러한 방식을 로컬에서 사용할 경우에서는 잘 되지만, 실제 서버에 올릴 경우에는 연결된 nginx과 같은 서버 소프트웨어 설정을 따로 해주어야된다.