[React][TypeScript] SockJS, STOMP 연결 (기록)

STOMP? 

https://minf.tistory.com/220

[STOMP] STOMP란 무엇일까?

 

 

 

ㅇ. NPM 설치

npm i @types/sockjs-client
npm i sockjs-client
npm i @types/stompjs
npm install @stomp/stompjs

ㅇ. 코드

import { Client } from "@stomp/stompjs";
import SockJS from "sockjs-client";

  const connectToWebSocket = () => {
    const topic = "/sub/hello"; // 구독할 주제
    const stompClient = new Client(); // Client 객체 생성

    stompClient.configure({
      // brokerURL: url, // 일반 소켓으로 연결 할 떄
      // 다른 STOMP 클라이언트 설정
      webSocketFactory: () => new SockJS(`http://172.../stomp/ws"), // 링크 + 서버에서 설정해놓은 엔드포인트
      debug(str) {
        console.log(str);
      },
    });

    stompClient.onConnect = () => {
      stompClient.subscribe(topic, (message) => {
        // 메시지 수신 시 처리할 작업
        console.log("Received message:", message.body);
      });

      // 연결 성공 후 수행할 작업
      console.log("WebSocket connected");
    };

    stompClient.onStompError = (frame) => {
      console.log(`Broker reported error: ${frame.headers.message}`);
      console.log(`Additional details: ${frame.body}`);
    };
    stompClient.onDisconnect = (message) => {
      console.log(`onDisconnect: ${message}`);
    };
    stompClient.activate();
  };

SockJS, Stomp