[Spring] WebSocket sockJS 실시간 알림 구현하기 (3)

 

[Spring] WebSocket sockJS Q&A 실시간 알림 구현하기 (1)

[Spring] WebSocket sockJS Q&A 실시간 알림 구현하기 (2)

Q&A뿐만아니라 공지사항이나 다른 부분에서도 글이 insert 될때

WebSocket을 백단에서 호출해 실시간 알림을 구현해보았다.

 

[ 개발 부분 ] 

1. 메서드가 자동으로 호출되고, 인스턴스가 자동으로 주입

사용할 controller 에 추가 (예 : boardController.java)

@Autowired
private WebSocketHandler websocketHandler;

2. handleTextMessage 이동 

WebSocketHandler.java 부분의 handleTextMessage를 자신이 사용하는 (예 : boardController.java)로 이동.

public void boardSocket(String who,LoginVO loginVO) throws Exception{
  Map<String, WebSocketSession> users = websocketHandler.getUserMap();
  for (WebSocketSession responseIdSession : users.values()) {
    if (responseIdSession != null) {
      //JSON.parse로 넘길떄 
      TextMessage tmpMsg = new TextMessage("{\"code\" : \""+ who +"\", \"id\" : \""+ loginVO.getId() +"\"}");

      //JSON.stringify로 넘길떄 
      //TextMessage tmpMsg = new TextMessage(who);
      responseIdSession.sendMessage(tmpMsg);
    }
  }
}

//수정 
public void broadCast(String who, LoginVO loginVO) throws Exception{
    Map<String, WebSocketSession> users = websocketHandler.getUserMap();
    for (WebSocketSession responseIdSession : users.values()) {
        Map<String,Object> map = responseIdSession.getAttributes();
        LoginVO vo = (LoginVO) map.get("LoginResultVO");
        if (responseIdSession != null) {
            if(vo.getId() != loginVO.getId()){
                TextMessage tmpMsg = new TextMessage("{\"code\" : \""+ who +"\"}");
                //TextMessage tmpMsg = new TextMessage("{\"code\" : \""+ who +"\", \"id\" : \""+ loginVO.getId() +"\"}");
                responseIdSession.sendMessage(tmpMsg);
            }
        }
    }
}

 

3. insert 되는 부분에 함수 메서드 호출 

boardService.insertBoard(~~);

// 메서드 호출 
broadSocket("qna",loginVO);

4. 프론트 부분

webSocketConnect : function(){
        var socket = null;
        // localhost:8082를 얻기위함 
        var uriGet2 = window.location.origin.substring(6);  
        // Path을 얻기위함 
        var offset = location.href.indexOf(location.host)+location.host.length;
        var ctxPath = location.href.substring(offset,location.href.indexOf('/',offset+1));

        var ws = new WebSocket("ws://" + uriGet2 + ctxPath +"/websocket");
        socket = ws;

        ws.onopen = function() {
            console.log('Info: connection opened.');
        };

        ws.onmessage = function(event) {
            var msg;
            try{
                msg = JSON.parse(event.data);
            }catch(error){
                console.error(error);
            }

            var websocketQna = $(".websocketQna");
            var li;

            var userSessionId = $("#userSessionId").val();
			
            // 자신을 제외하기 위함 => 컨틀로러에서 수행도록 수정했음.
            //if(userSessionId != msg.id){
                $("#boardMenuTop").css("color","#fcff3a");
                switch(msg.code) { // board,noice,qna 구분 
                case "notice":
                    $("#noticeMenuBtn").css("color","red");
                    li = $('<li>새로운 공지사항 글이 등록되었습니다.</li>');
                    break;
                case "board":
                    $("#boardMenuBtn").css("color","red");
                    li = $('<li>새로운 게시판 글이 등록되었습니다.</li>');
                    break;
                case "qna":
                    $("#qnaMenuBtn").css("color","red");
                    li = $('<li>새로운 Q&A 글이 등록되었습니다.</li>');
                    break;
                }
            //}
            websocketQna.append(li);
            setTimeout(function(){ 
                $(".websocketQna").find(li).remove();
            }, 3000);
        };

        ws.onclose = function(event) {
            console.log('Info: ws connection closed');
        };
        ws.onerror = function(err) {
            console.log('ws Error:', err);
        };
    },
}

 

JSON 객체 차이는 아래에 정리해 놓았다. 

JSON 객체의 parse / stringify 차이