[WebSocket] 채팅프로그램 | 단순 채팅

결국에는 에어비앤비 프로젝트에 넣을 기능이기 때문에 다르게 설정될 부분을 제외하고 공통으로 들어갈 부분만 기록하겠습니다.

SocketHandler 클래스 생성

@Component
public class SocketHandler extends TextWebSocketHandler {
	
	@Override
	public void handleTextMessage(WebSocketSession session, TextMessage message) {
		//메시지 발송
	}
	
	@Override
	public void afterConnectionEstablished(WebSocketSession session) throws Exception {
		//소켓 연결
	}
	
	@Override
	public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {
		//소켓 종료
	}
}

• TextWebSocketHandler : handleTextMessage를 실행시키며, 메시지 타입에 따라 handleBinaryMessage또는 handleTextMessage가 실행됩니다.
• handleTextMessage : 메시지를 수신하면 실행됩니다.
• afterConnectionEstablished : 웹소켓 연결이 되면 동작합니다.
• afterConnectionClosed : 웹소켓 연결이 종료되면 동작합니다.

SocketHandler | handleTextMessage 메소드

HashMap<String, WebSocketSession> sessionMap = new HashMap<>(); 

@Override
	public void handleTextMessage(WebSocketSession session, TextMessage message) {
		//메시지 발송
		String msg = message.getPayload();
		for(String key : sessionMap.keySet()) {
			WebSocketSession wss = sessionMap.get(key);
			try {
				wss.sendMessage(new TextMessage(msg));
			}catch(Exception e) {
				e.printStackTrace();
			}
		}
	}

• message.getPayload() : 메시지에 담긴 텍스트값을 얻어올 수 있습니다.
• wss.sendMessage(new TextMessage(msg)); : msg를 다시 텍스트 메시지로 변환하여 seesionMap에 저장된 모든 세션에 메시지를 보냅니다.

SocketHandler | afterConnectionEstablished 메소드

@Override
	public void afterConnectionEstablished(WebSocketSession session) throws Exception {
		//소켓 연결
		super.afterConnectionEstablished(session);
		sessionMap.put(session.getId(), session);
	}

• sessionMap.put(session.getId(), session); : 받은 세션의 아이디(String)와 세션(WebSocketSession)을 sessionMap에 넣습니다.

SocketHandler | afterConnectionClosed 메소드

@Override
	public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {
		//소켓 종료
		sessionMap.remove(session.getId());
		super.afterConnectionClosed(session, status);
	}

• sessionMap.remove(session.getId()); : 종료되어 넘겨진 세션의 아이디(key)를 통해 sessionMap에서 세션을 제거합니다.

WebSocketConfig 클래스 생성

@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer{

	@Autowired
	SocketHandler socketHandler;
	
	@Override
	public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
		registry.addHandler(socketHandler, "/chating");
	}
}

• @Configuration : 설정파일을 만들기 위한 어노테이션 입니다.
• @EnableWebSocket : 웹소켓에 대해 대부분 자동설정을 합니다.

chat.jsp | javascript 부분

var ws;

	function wsOpen(){
		ws = new WebSocket("ws://" + location.host + "/chating");
		wsEvt();
	}
		
	function wsEvt() {
		ws.onopen = function(data){
			//소켓이 열리면 초기화 세팅하기
		}
		
		ws.onmessage = function(data) {
			var msg = data.data;
			if(msg != null && msg.trim() != ''){
				$("#chating").append("<p>" + msg + "</p>");
			}
		}

		document.addEventListener("keypress", function(e){
			if(e.keyCode == 13){ //enter press
				send();
			}
		});
	}

	function chatName(){
		var userName = $("#userName").val();
		if(userName == null || userName.trim() == ""){
			alert("사용자 이름을 입력해주세요.");
			$("#userName").focus();
		}else{
			wsOpen();
			$("#yourName").hide();
			$("#yourMsg").show();
		}
	}

	function send() {
		var uN = $("#userName").val();
		var msg = $("#chatting").val();
		ws.send(uN+" : "+msg);
		$('#chatting').val("");
	}

• ws = new WebSocket("ws://" + location.host + "/chating"); : ws라는 특수 프로토콜을 이용하여 웹소켓 커넥션을 만듭니다.

#Reference
https://myhappyman.tistory.com/100