[STOMP] STOMP 테스트를 위한 apic 및 연결 오류 해결

apic란?

POSTMAN처럼 API를 빌드하고 테스트할 수 있는 프로그램.
직접 설치해서 사용할 수도 있고, 크롬 확장 프로그램으로도 사용할 수 있다.

 

APIC 링크

 

다운로드 페이지

https://apic.app/

apic — The complete API solution

웹 테스트 페이지
https://apic.app/online/#/tester

apic - The Complete API Solution

 

사용 방법

 

1. 다운로드 없이 크롬확장으로 사용하는 방법

1) 링크로 들어가면 해당 화면이 나온다, 여기서 ws라고 써있는 탭을 클릭

1) 첫페이지

 

2) ws 클릭 시 stomp를 테스트 할 수 있는 화면으로 바뀐다.

2) ws 클릭 시 stomp를 테스트 할 수 있는 화면으로 바뀐다.

 

3)  1. Request URL에 본인이 설정한 웹주소를 적는다 -> Connect를 누르면 접속 확인

 

• 본인은 2가지의 엔드포인트를 가지고있고 테스트해볼 코드는 채팅방이기때문에
• ws://localhost:8080/stomp/texiChat 로 작성
• STOMP는 http가 아니기때문에 Url을 보낼때 ws://주소/엔드포인트 형식으로 작성해야함!!

	@Override
	public void registerStompEndpoints(StompEndpointRegistry registry) {
        //웹소켓
		registry.addEndpoint("/ws/sevenCall").setAllowedOriginPatterns("*").withSockJS();

		//채팅방
		registry.addEndpoint("/stomp/texiChat").withSockJS();
	}

	@Override
	public void configureMessageBroker(MessageBrokerRegistry registry) {
		registry.enableSimpleBroker("/queue", "/topic","/sub");
		registry.setApplicationDestinationPrefixes("/app","/pub");
	}

 

 

4) Subscript URl에 주소적기

• 보내는 쪽 : config에 작성한 /pub +  @messagemapping  에 적은 주소 작성
• 받는 쪽 :   config에 작성한/ sub + /채팅방 +/ 채팅방 번호 + simpMessageSendingOperations.convertAndSend() 
  ()안에 적은 주소 작성까지 작성

* 연결 오류 해결법

 

• 1 번에서 주소를 적고 connect를 누르면 아래 그림과 같은 오류가 발생한다.

 

• JAVA 코드의 문제인 줄 알고 엔드포인트를 변경하거나의 방법을 사용했으나 결과는 같았다.
• HTML로 간단한 페이지를 만들어 시도해보니 연결은 문제없이되었다..
• apic에서만 ws프로토콜을 사용해서 들어가지 못했는데..원인은! 

 CONFIG 코드 : .withSockJS(); 가 문제였다

@Configuration
@EnableWebSocketMessageBroker
//@EnableWebSocket
public class StompConfig implements WebSocketMessageBrokerConfigurer {
    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/stomp").setAllowedOriginPatterns("*").withSockJS();

    }

    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {
        //메세지 받을때
        registry.enableSimpleBroker("/sub");
        //메시지 보낼때
        registry.setApplicationDestinationPrefixes("/pub");
    }

  

SockJS 는?
: 웹소켓 기능과 비슷한 원리로 구동되는 http 프로토콜 기반의 js 라이브러리.

 

→ 선언이유 : es5부터 지원하는 웹소켓이 들어가 있지 않은 브라우저들에서도 웹소켓을 사용하기 위해 필요.

withSockJS(); 를 사용하면겠다는 의미로, 웹소켓 컨드롤러를 사용할 수 없기 때문에.

html로는 연결이 되지만, APIC에서는 사용할 수없었던 것...!

 

해결 코드

@Override
public void registerStompEndpoints(StompEndpointRegistry registry) { registry.addEndpoint("/stomp").setAllowedOriginPatterns("*");
}

 

 

정상적으로 사용할 수있는 것을 확인할 수 있다.

 

 

* 구문을 빼고 사용할 경우 ui 에도 변동 사항이 있음.!

 //WithSockJS()를 뺴고 사용할 경우
 var socket = new WebSocket('ws://localhost:8080/stomp'); // WebSocket endpoint
 
  //WithSockJS()를 넣어 사용할 경우
 var socket = new SockJS('http://localhost:8080/stomp'); // WebSocket endpoint