Spring - 11. Socket 통신 2

JS단의 처리

실제 소켓 통신을 하게 되면 메세지를 읽어오고 알맞게 채팅방에 뿌리기 위한 처리를 js에서 하게 된다.

let ws; // 웹 소켓

$(document).ready(()=>{
	

    if(ws == null){
        ws = new WebSocket("ws://" + location.hostname +':8080' + "/fin/chatting" );
        // 모든 방을 조회해서 넣는다.
        
        let userNo = document.getElementById("hiddenUserNo").value;
        if(userNo != null && userNo != ""){
            checkRoom(userNo);
        }
        wsOpen();
    }else{
        ws = new WebSocket("ws://" + location.hostname +':8080' + "/fin/chatting" );
        
        // 모든 방을 조회해서 넣는다.
        let userNo = document.getElementById("hiddenUserNo").value;
        if(userNo != null && userNo != ""){
            checkRoom(userNo);
        }
        wsOpen();
    }
    // 모든 인원을 소켓에 초대

구현 방식은 제각각이다. 기본적으로 인터셉터를 통해서 가로채어 httpsession의 로그인 정보를 넣어준다.
위의 경우 회원 가입 구현 전에 만들어진 채팅방이어서 임의로 세션에 회원 VO 정보를 넣어서 페이지 input에 정보를 심어두었다.

function wsOpen(){
    ws.onopen = function(){
    // 웹 소켓이 열렸을 때의 처리
    }
	// 메세지를 받았을 때 처리
    ws.onmessage = function(data){
        
        let chatUser = document.getElementById("hiddenUserNo").value;
	// 세션에 있는 유저정보를 가저온다.
        let parsedData = JSON.parse(data.data);
        let serverChatRoomNo = parsedData.chatRoomNo;

        if(serverChatRoomNo == inChatRoomNo){
            if(parsedData.sessionUserNo == chatUser){
                $("#middleChatRoom").append("<div class='outgoing'><div class='bubble'>" + parsedData.msg + "</div></div>");
                $("#middleChatRoom").scrollTop($("#middleChatRoom")[0].scrollHeight);
            }else{
                $("#middleChatRoom").append("<div class='incoming'><div class='bubble'>" + parsedData.msg + "</div></div>");
                $("#middleChatRoom").scrollTop($("#middleChatRoom")[0].scrollHeight);
            }
        }
    }
}

이 채팅방 구현에서 상대편과 내 메세지 구분을 처리하고 있다.