Spring websocket 웹소켓, java 채팅 프로그램

 

웹 소켓

1. WebSocketConfig 생성

MessageBrokerRegistry 
enableSimpleBroker("/topic"); // 메시지 브로커를 활성화하고 subscribe 메시지 접두사를 설정합니다.
setApplicationDestinationPrefixes("/app"); // 클라이언트에서 발송한 메시지중 Destination이 해당 경로(/app)로 시작하는 메시지를 메시지 브로커에서 처리하게합니다.

StompEndpointRegistry
addEndpoint("/chatting") // 웹소켓 엔드포인트를 지정합니다. 추후 클라이언트에서 해당 경로로 서버와 handshake 하게 됩니다.
withSockJS(); // SockJS를 사용하여 브라우저에서 websocket을 지원하지 않을 경우 대체 옵션을 지원 합니다.

 

2. 메시지 모델 생성 : HtmlMessage

 

3. 메시지 처리 서비스 생성

private final SimpMessagingTemplate simpMessagingTemplate;
private final String TOPIC="/topic/1";

public void send( Map<String,Object> m) {
    simpMessagingTemplate.convertAndSend(this.TOPIC, m);
}

/topic/1 구독

 

4. 메시지 처리 컨트롤러 생성

 @MessageMapping("/chat/send") //메시지 경로를 매핑
    public void sendMsg(@Payload Map<String,Object> data){
        messageService.send(data);
    }

/app/chat/send
메시지 브로커로 메시지 전송

@MessageMapping
컨트롤러 메서드를 구성된 끝점에 연결

@SendTo
메시지를 처리한 후 @SendTo 어노테이션으로 정의된 적절한 대상으로 메시지를 보냅니다.
대상 의 모든 구독자 는 메시지를 받습니다.
@SendTo 혹은 SimpMessagingTemplate을 사용하여 메시지를 클라이언트에게 전달할 수 있습니다.

 

5. index.html 수정

var socket = new SockJS("/chatting");
stompClient = Stomp.over(socket); //do Handshake

WebSocketConfig.java에 설정된 endpoint로 SockJS 객체, StompClient 객체 생성

 stompClient.connect({}, function () {
    //subscribe(subscribe url,해당 url로 메시지를 받을때마다 실행할 함수)
    sub = stompClient.subscribe('/topic/1', function (e) {
        data = JSON.parse(e.body); //e.body에 전송된 data가 들어있다. 
        if (data.sender == undefined) {
            $('#chatting').append("<p style='margin: 0'>" + data.content + "</p>"); // div에 추가
        }
    });
},
function (e) {
    alert('connect 에러발생!!!!!!'); //에러 콜백
});

구독중, 데이터 조회

data = {
    'sender' :userId,
    'contents': $("#msg").val()
};
// send(destination,헤더,페이로드)
stompClient.send("/app/chat/send", {}, JSON.stringify(data)); // 메시지 브로커에서 처리