[React] webSocket onopen 오류

🚨 문제점

리액트와 스프링 서버간의 웹소켓 연결이 안됨

IDE에서는 아무런 오류가 뜨지 않음

install

React sockjs-client, stomp 설치

npm install @stomp/stompjs
// 버전 문제시 --force 붙혀준다

npm install sockjs-client
// 버전 문제시 --force 붙혀준다

모듈 import가 안됨
아래 에러메세지 뜸

yarn remove sockjs-client, stomp 후 재설치

yarn add @types/stompjs @types/sockjs-client

import 오류 해결 !

import SockJS from 'sockjs-client';
import StompJs from 'stompjs';

  const socket = new SockJS('/websocket-endpoint'); // 웹소켓 엔드포인트 URL
    const stompClient = StompJs.over(socket);

    // 연결 성공 시 실행될 콜백 함수
    const connectCallback = () => {
      console.log('WebSocket 연결 성공');

      // 구독 설정
      stompClient.subscribe('/topic/messages', (message) => {
        console.log('받은 메시지:', message.body);
      });

      // 메시지 발송
      stompClient.send('/app/sendMessage', {}, JSON.stringify({ text: 'Hello WebSocket' }));
    };

    // 연결 시도
    stompClient.connect({}, connectCallback);

    // 컴포넌트 언마운트 시 연결 종료
     // 컴포넌트 언마운트 시 연결 종료
    return () => {
      stompClient.disconnect(() => {
        console.log('WebSocket 연결 종료');
        // 추가로 수행할 로직 작성 가능
      });
    };

인줄알았는데 아니였음. 🪓..

컴파일 에러가 발생했다 흑흑

ERROR in ../../node_modules/stompjs/lib/stomp-node.js 12:8-22
Module not found: Error: Can't resolve 'net' in 

import 구문을 수정하고 StompJS.over > StompJS.Client()로 변경

import * as StompJS from '@stomp/stompjs';

useEffect(() => {
    // 웹소켓 연결 설정
    const socket = new SockJS('https://localhost:8080/ws/connect-websocket'); // 웹소켓 엔드포인트 URL
    // const stompClient = StompJS.over(socket);
    // var stompClient = require("stompjs/lib/stomp.js").Stomp
    const stompClient = new StompJS.Client();


    const connectCallback = () => {
      console.log('WebSocket 연결 성공');

      // 구독 설정
      stompClient.subscribe('/topic/messages', (message) => {
        console.log('받은 메시지:', message.body);
      });

      // 메시지 발송
      stompClient.publish({
        destination: '/app/sendMessage',
        body: JSON.stringify({ text: 'Hello WebSocket' }),
      });
    };

    // const errorCallback = (error) => {
    //   console.error('WebSocket 연결 에러:', error);
    // };

    socket.onopen = () => {
      console.log('WebSocket 연결 열림');
      stompClient.configure({
        brokerURL: 'https://localhost:8080/ws/connect-websocket',
        onConnect: connectCallback,
        // onError: errorCallback,
      });
      stompClient.activate();
    };

    socket.onclose = () => {
      console.log('WebSocket 연결 종료');
    };

    // 컴포넌트 언마운트 시 연결 종료
    return () => {
      stompClient.deactivate();
      socket.close();
    };

  }, []);