[Spring-Boot] WebSocket 구현하기 (2)

채팅화면 나타내기

Socket연결 시 javascript의 SockJS 사용하기 (CDN 연결)

<script src="https://cdnjs.cloudflare.com/ajax/libs/sockjs-client/1.4.0/sockjs.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/stomp.js/2.3.3/stomp.min.js"></script>

//처음 채팅방에 접속 시 SockJS 연결 
function connect(event){
	username = document.querySelector("#name").value.trim();
	
	if(username){
		
		var socket = new SockJS('/ws'); //WebSocketConfig에서 설정한 ws 요청주소
		stompClient = Stomp.over(socket);
		
		stompClient.connect({}, onConnected, onError);	
	}
	event.preventDefault();
}

// 웹소켓 연결 시 onConnected 함수 실행
function onConnected(){
	// public방을 구독함 public 채팅방에 메시지가 오면 onMessageReceived 실행
  	// onMessageReceived는 화면에 채팅내용을 어떻게 보여줄 지 실행하는 함수
	stompClient.subscribe("/roomname/public", onMessageReceived);
	// 서버에 입력한 username 전송함
	stompClient.send("/message/addUser", {}, JSON.stringify({sender: username, type: 'JOIN'}));
	
	connectingElement.classList.add('hidden');
}

// 웹소켓 연결 에러 발생 시 onError함수 실행
function onError(error){
	connectingElement.textContent = 'Could not connect to WebSocket server. Please refresh this page to try again!';
	connectingElement.style.color = 'red';
}

// 메세지 전송 시 실행되는 함수
function sendMessage(event) {
    var messageContent = messageInput.value.trim();
    if(messageContent && stompClient) {
        var chatMessage = {
            sender: username,
            content: messageInput.value,
            type: 'CHAT'
        };
        stompClient.send("/message/sendMessage", {}, JSON.stringify(chatMessage));
        messageInput.value = '';
    }
    event.preventDefault();
}

참고한 블로그 및 사이트

https://blog.naver.com/PostView.naver?blogId=qjawnswkd&logNo=222283176175&parentCategoryNo=&categoryNo=&viewDate=&isShowPopularPosts=false&from=postView

https://ratseno.tistory.com/71?category=773803

https://dev-gorany.tistory.com/212