[WebSocket] Stomp - React 구현

[WebSocket] Stomp - React 구현

설치

npm i @stomp/stompjs
npm install sockjs-client

연결

const chatPrivateConnect = () => {
        const serverURL = `서버URL/endpoint`;
    
        let socket = new SockJS({serverURL}); // SockJS를 사용하여 WebSocket 연결을 설정
				// WebSocket 클라이언트를 생성
        let client = new Client({ 
						// jwt 인증 위해 token 필요
            connectHeaders: {
                Authorization: `Bearer ${accessToken}`,
            },
						// WebSocket 연결을 만들기 위한 함수를 지정
            webSocketFactory: () => socket });

        client.onConnect = () => { // 연결이 성공하면 수행할 작업
            console.log("연결 성공")
						
						// client 구독
            client.subscribe(`/sub/${personalChatId}`, 
						// 구독이 성공하고 채널로부터 메시지를 수신했을 때 실행될 콜백 함수를 정의
            (res) => {
								// 받은 메시지를 이전에 받은 메시지 리스트에 추가, JSON 형식으로 파싱하여 배열에 추가
                setRecvList(prevRecvList => [...prevRecvList, JSON.parse(res.body)]);
            });
        };

        client.activate(); // 클라이언트 활성화하여 연결 시작

        // WebSocket 연결 중에 오류가 발생하면 실행할 콜백 함수를 정의
				// 콘솔에 오류를 출력하고, 일정 시간 후에 다시 연결을 시도
        client.onStompError = (frame) => {
            console.error('WebSocket 연결 오류:', frame);
            setTimeout(client.activate(), 5000); //
        };
				// WebSocket 클라이언트 객체를 상태로 설정
        setStompClient(client);
    }

전송

const send = (stompClient, sender,message, personalChatId) => {
    if (stompClient && stompClient.connected) { // 연결이 유지될때만 실행
        let msg = {
            sender: sender,
            text: message,
            personalChatId: personalChatId
        };
				// 구성된 메시지를 목적지(destination)로 발행
        stompClient.publish({
            destination: "/pub/api/chat/send/" + personalChatId,
            body: JSON.stringify(msg)
        });

    } else {
        alert("서버 오류로 인해 메시지 전송이 실패하였습니다!");
    }
};