728x90
웹 소켓
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 HandshakeWebSocketConfig.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)); // 메시지 브로커에서 처리
728x90