Spring Boot 및 React.js를 통한 Websocket 연결

Question

React.jsocks 클라이언트를 Spring Boot 백엔드 웹 소켓에 연결하려고 하는데 연결할 수 없습니다. Chrome 콘솔에 다음과 같은 오류가 표시됩니다.

크롬 콘솔 오류

Spring Boot 부분에는 오류가 없지만 다음과 같은 경고가 있습니다.

스프링 부트 콘솔

왜 연결할 수 없는가 내 React.js 부분은 다음과 같습니다:

으아아아

그리고 내 Spring Boot 구성 클래스는 다음과 같습니다.

으아아아

웹 소켓 컨트롤러와 마찬가지로 다음 부분을 썼습니다:

으아아아

React.js 프런트엔드와 스프링 부트 백엔드를 연결하기 위해 양말을 사용하려고 했지만 연결할 수 없습니다.

내 process.env.REACT_APP_ROOT_URL은: http://localhost:1998 및 @Value("${blog.app.front}") 비공개 문자열 URL입니다. 이 부분의 값은 http://localhost:3000

입니다.

Answer 1

문제는 클라이언트측 또는 서버측일 수 있습니다. 첫 번째 단계는 테스트 도구를 사용하여 격리된 상태에서 서버를 테스트할 수 있는 것입니다. 코드가 SockJS에서 STOMP 프로토콜을 사용하기 때문에 쉽지 않습니다.

SockJS를 사용할 필요는 없을 것입니다. SockJS와 함께 STOMP 사용을 참조하세요. 따라서 첫 번째 단계는 SockJS 사용을 제거하고 작동하는지 확인하는 것입니다.

다음 단계는 STOMP 이용을 취소하는 것입니다. 더 간단한 접근 방식은 일반 텍스트 메시지를 사용하는 것입니다. 이렇게 하면 wscat 같은 명령줄 도구나 WebSocketKing 같은 Chrome 브라우저 플러그인을 사용하여 서버를 직접 테스트할 수 있습니다. 서버가 테스트 하네스와 함께 작동하면 테스트용 클라이언트 코드를 사용할 수 있습니다.

저도 비슷한 문제에 부딪혔고 WebSocket 문자 메시지로 전송된 JSON 메시지를 사용하여 자체 프로토콜을 개발하게 되었습니다. WebSocket King을 사용하여 서버를 격리하여 테스트할 수 있습니다. WebSocket King을 사용하는 예를 보려면 Brill Middleware 끝으로 스크롤하세요.