웹소켓 connect 하나로 여러 기능이 구현되도록 수정

유형

java

javaScript

문제해결

Date

프로젝트

초기 구성

Controller의 기능별로 Subscribe를 수행→ 기능마다 연결이 늘어나는 문제

@MessageMapping("/recommand-plan/{tgIdx}")
public void recommandPlan(@DestinationVariable("tgIdx") Long tgIdx, ChatRequest dto) throws Exception {
  simpMessagingTemplate.convertAndSend("/topic/recommand-plan/" + tgIdx, recommandService.generateChat(dto));
}
@MessageMapping("/recommand-plan2/{tgIdx}")
public void recommandPlan2(@DestinationVariable("tgIdx") Long tgIdx, ChatRequest dto) throws Exception {
  simpMessagingTemplate.convertAndSend("/topic/recommand-plan2/" + tgIdx, recommandService.generateChat(dto));
}
Java
복사
자바 컨트롤러

  var stompClient = null;
	var stompClient2 = null;
	
	function connect() {
	    var socket = new SockJS('/gs-guide-websocket');
	    stompClient = Stomp.over(socket);
	    
	    stompClient.connect({}, function (frame) {
	        console.log('Connected: ' + frame);
	        stompClient.subscribe('/topic/recommand-plan/' + [[${tgIdx}]], function (recommand) {
	        	res = JSON.parse(recommand.body);
	          	console.dir(res)
	          	response.innerHTML += '<span style="background:yellow">' + res.userId + " :  " +res.message + '<br>'+'</span>';
	        }    
	        );
	    });
	}
	
	function connect2() {
	    var socket = new SockJS('/gs-guide-websocket');
	    stompClient2 = Stomp.over(socket);
	    
	    stompClient2.connect({}, function (frame) {
	        console.log('Connected: ' + frame);
	        stompClient.subscribe('/topic/recommand-plan2/' + [[${tgIdx}]], function (recommand) {
	        	res = JSON.parse(recommand.body);
	          	console.dir(res)
	          	response.innerHTML += '<span style="background:yellow">' + res.userId + " :  " +res.message + '<br>'+'</span>';
	        }    
	        );
	    });
	}
	
	function disconnect() {
	    if (stompClient !== null) {
	        stompClient.disconnect();
	    }
	    console.log("Disconnected");
	}
	function disconnect2() {
	    if (stompClient2 !== null) {
	        stompClient2.disconnect();
	    }
	    console.log("Disconnected");
	}
	
	function sendChat() {
		let message = con.value;
		let userId = user.value;
		
	    stompClient.send("/app/recommand-plan/" + [[${tgIdx}]], {}, JSON.stringify({'message':message, 'userId':userId}));
	}
	
	function sendChat2() {
		let message = con.value;
		let userId = user.value;
		
	    stompClient.send("/app/recommand-plan2/" + [[${tgIdx}]], {}, JSON.stringify({'message':message, 'userId':userId}));
	}
	
	connect();
	connect2();
JavaScript
복사
자바스크립트

수정된 구성

subscribe후에 분기를 나눠 하나의 connection으로 여러 기능을 수행

@MessageMapping("upload-accomodation/{tpIdx}/{tlIdx}")
	public void uploadAccomodation(
			@DestinationVariable("tpIdx") Long tpIdx,
			@DestinationVariable("tlIdx") Long tlIdx,
			AccomodationTodoRegistRequest dto
			) throws Exception {
		simpMessagingTemplate.convertAndSend("/topic/planner-message/" + tpIdx, 
				Map.of("type","upload-accomodation","msg",todoService.createAccomodationTodo(dto, tpIdx, tlIdx),"tlIdx",tlIdx));
		
	}
	
	@MessageMapping("upload-attractions/{tpIdx}/{tlIdx}")
	public void uploadAttractions(
			@DestinationVariable("tpIdx") Long tpIdx,
			@DestinationVariable("tlIdx") Long tlIdx,
			AttractionsTodoRegistRequest dto
			) throws Exception {
		simpMessagingTemplate.convertAndSend("/topic/planner-message/" + tpIdx, 
				Map.of("type","upload-attractions","msg",todoService.createAttractionsTodo(dto, tpIdx, tlIdx),"tlIdx",tlIdx));
		
	}
Java
복사
자바 컨트롤러

var stompClient = null;
        
//모듈화
function connect() {
    var socket = new SockJS('/gs-guide-websocket');

    stompClient= Stomp.over(socket);
    stompClient.connect({}, function (frame) {
        console.log('Connected: ' + frame);
        stompClient.subscribe('/topic/planner-message/' + [[${planner.tpIdx}]], function (recommand) {
                res = JSON.parse(recommand.body);
                }if(res.type === 'upload-accomodation'){
                	// 숙박 추가
                }else if(res.type === 'upload-attractions'){
                  // 관광지 추가
                }
            }
        );
    });
}

function modTodoListDisconnect() {
    if (stompClient !== null) {
        stompClient.disconnect();
    }
    console.log("Disconnected");
}

//숙박투두카드 추가
document.querySelectorAll('.actodoadd').forEach(e => {
    e.addEventListener('click', ev => {

        let todolistIdx = document.getElementById('tlidx'+tlIdx).value;
        let actodotitle = document.getElementById('actodotitleadd'+tlIdx).value;
        let actodocontent = document.getElementById('actodocontentadd'+tlIdx).value;
        let actododate = document.getElementById('actododateadd'+tlIdx).value;
        let actodoaddress = document.getElementById('actodoaddressadd'+tlIdx).value;
        let actodoprivate = document.getElementById('actodopvadd'+tlIdx).checked;

        stompClient.send("/app/upload-accomodation/" + [[${planner.tpIdx}]]+"/"+tlIdx, {},
            JSON.stringify({'title':actodotitle, 'contents':actodocontent, 'todoDate':actododate,
                'address':actodoaddress, 'isPrivate':actodoprivate}));
    });

})

//관광지투두카드 추가
document.querySelectorAll('.attodoadd').forEach(e => {
    e.addEventListener('click', ev => {
	
        let todolistIdx = document.getElementById('tlidx'+tlIdx).value;
        let attodotitle = document.getElementById('attodotitleadd'+tlIdx).value;
        let attodocontent = document.getElementById('attodocontentadd'+tlIdx).value;
        let attododate = document.getElementById('attododateadd'+tlIdx).value;
        let attodoinfo = document.getElementById('attodoinfoadd'+tlIdx).value;
        let attodoprivate = document.getElementById('attodopvadd'+tlIdx).checked;

        stompClient.send("/app/upload-attractions/" + [[${planner.tpIdx}]]+"/"+tlIdx, {},
            JSON.stringify({'title':attodotitle, 'contents':attodocontent, 'todoDate':attododate,
                'attractions':attodoinfo, 'isPrivate':attodoprivate}));

    });

})

connect();
JavaScript
복사
자바스크립트