[JavaScript] String-boot 웹 소켓(WebSocket)을 이용한 실시간 채팅 구현 - Session Storage 활용하기

소개

왜 WebSocket을 사용하였나?

Spring-boot WebSocket 사용법(설정법)

순수 자바스크립트로 작성해보기

발생한 문제와 해결 방법

   ㄴ HTTP session 가져오기 -> interception 사용

   ㄴ DB를 사용하지 않고 기존 메시지 저장하기 -> Session Storage 사용하기

 

최근 작성 중인 개인 프로젝트에서 웹에 접속한 클라이언트와 실시간 채팅을하는 기능을 구현해보려고 했다.

🤔 왜 WebSocket을 사용하였나?

여기서 말하는 웹 소켓은 Spring Framework의 STOMP가 아닌 순수 JavaScript를 활용한 예제 입니다.

jquery도 사용하지 않습니다.

 

WebSocket이 필요했던 이유

 

앞서말했듯 실시간 라이브 채팅 기능을 구현하고 싶었다. 하지만, 기본적으로 HTTP 통신에서는 클라이언트가 서버에 요청을하면 서버가 응답해줄 수 있었다. 라이브 채팅 기능이 구현되기 위해서는 서버가 클라이언트의 요청 없이도 데이터를 넘겨주어야 한다.

일반적인 HTTP 통신 방법

웹 소켓은 HandShake(악수)라는 과정으로 통해서 HTTP을 WS(WebSocket)프로토콜로 전환 해주는데 이후 서버가 클라이언트에게 먼저 메세지를 전할 수 있는 기능을 제공해준다.

사진출처: 위키백과

WS을 이용

🥸 Spring-boot WebSocket 사용법(세팅 방법)

1. WebSocket 의존성을 추가

dependencies {
    implementation 'org.springframework.boot:spring-boot-starter-websocket'
    }

gradle.build 파일 dependencies 안에 해당 코드를 삽입해주면 됩니다.

빌드 도구로는 gradle을 사용하였습니다. Maven을 사용하신다면 그에 맞게 설정 해주시면 됩니다.

 

2. Handler class 생성

WebSocket을 통해서 message를 전달하기 위해서는 WebSocketHandler 인터페이스를 상속 받은 TextWebSocketHandler를 상속 받아야 합니다. 더 상위 객체로는 AbstractWebSocketHandler가 있습니다.

위치는 core package 하위에만 있으면 됩니다.

package com.spacedev.board.handler;

import org.springframework.stereotype.Component;
import org.springframework.web.socket.CloseStatus;
import org.springframework.web.socket.TextMessage;
import org.springframework.web.socket.WebSocketSession;
import org.springframework.web.socket.handler.TextWebSocketHandler;

import lombok.extern.log4j.Log4j2;

@Component
@Log4j2
public class ChatHandler extends TextWebSocketHandler {

   // message
   @Override
   protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {

   }

   // connection established
   @Override
   public void afterConnectionEstablished(WebSocketSession session) throws Exception {

   }

   // connection closed
   @Override
   public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {
   
   }

}

TextWebSocketHandler를 상속 받으면 handleTextMessage, afterConnectionEstablished, afterConnectionClosed 추상화된 3가지 메소드를 오버라이드 해야합니다.

이름에서 유추할 수 있듯이 세 메소드의 기능은 아래와 같습니다.

 

handleTextMessage: websocket을 통해서 받은 메세지를 처리하는 메소드

afterConnectionEstablished: websocket에 session이 접속했을 때, 처리하는 메소드

afterConnectionClosed: websocket에 session이 접속을 해제 했을 때, 처리하는 메소드

 

3. WebSocketConfigurer 생성

package com.spacedev.board;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.config.annotation.EnableWebSocket;
import org.springframework.web.socket.config.annotation.WebSocketConfigurer;
import org.springframework.web.socket.config.annotation.WebSocketHandlerRegistry;
import org.springframework.web.socket.server.support.HttpSessionHandshakeInterceptor;

import com.spacedev.board.handler.ChatHandler;

import lombok.RequiredArgsConstructor;


@Configuration
@EnableWebSocket
@RequiredArgsConstructor
public class WebSocketConfig implements WebSocketConfigurer {
   
   @Autowired
   private final ChatHandler chatHandler;
   
   @Override
   public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
      registry.addHandler(chatHandler, "/ws/chat").setAllowedOrigins("*")
      .addInterceptors(new HttpSessionHandshakeInterceptor());   // interceptor for adding httpsession into websocket session
   }
   
}

WebSecketConfigurer 를 상속 받은 클래스에서 사용할 hanlder 클래스와 경로를 설정해주어야한다.

.setAllowedOrigins("*")는 ws프로토콜 /ws/chat 하위의 모든 uri에서 chatHandler를 사용한다는 의미이다.

 

.addInterceptors(new HttpSessionHandshakeInterceptor()) 는 핸드 쉐이크를 할 때, http의 session을 가져오기 위한 인터셉터를 추가하는 것인데 없어도 상관습니다. 사용한 이유는 아래에서 설명 합니다.

 

이로써, spring boot에서 websocket을 사용하기 위한 기본적인 설정을 할 수 있습니다.

 

🧐 순수 자바스크립트로 작성해보기

<script>
	// websocket 생성
    const websocket = new WebSocket("ws://localhost:8080/ws/chat");
    websocket.onmessage = onMessage;	// 소켓이 메세지를 받을 때
    websocket.onopen = onOpen;		// 소켓이 생성될때(클라이언트 접속)
    websocket.onclose = onClose;	// 소켓이 닫힐때(클라이언트 접속해제)

    //on exit chat room
    function onClose(evt) {
    console.log("close event : " + evt);
    }

    //on entering chat room
    function onOpen(evt) {
    console.log("open event : " + evt);
    }

    // on message controller
    function onMessage(msg) {
    var data = JSON.parse(msg.data); // msg를 받으면 data 필드 안에 Json String으로 정보가 있음
    // 필요한 정보를 Json data에서 추출
     var senderId = data.senderId;
     var message = data.message;
     var time = data.time;
     var newOne = data.newOne;
     var outOne = data.outOne;
    }
    
    // send a message
    function send(){
    var message = document.getElementById("msg").value;
    
    // don't send when content is empty
    // 채팅 입력 칸이 비어있지 않을 경우만 정보를 Json형태로 전송
    if(message != "") {			
	let msg = {
   	'receiverId' : receiverId,
    	'message' : message
      	}

    	if(message != null) {
    	websocket.send(JSON.stringify(msg));	// websocket handler로 전송(서버로 전송)
    	}
    	document.getElementById("msg").value = '';
 	}
}

</script>

위 스크립트는 예시용 스크립트 입니다.

해당 스크립트가 포함되어있는 view에 파일의 url에 클라이언트가 접속할 때 웹 소켓이 생성이된다.

const websocket = new WebSocket("ws://localhost:8080/ws/chat");

http 프로토콜을 ws로 바꾸고 config에서 설정한 url로 접속해주면 된다.(8080 하위 주소 ex: ws/chat  -> 본인이 설정한 주소)

 

WebSocket으로 채팅방을 구현할때 사용되는 메소드는 4개였다.

 

1. 접속(Session connection): onopen

2. 연결해제(Session disconnection): onclose

3. 메세지를 수신(get): onmessage

4. 메세지를 송신(send): send

 

주로 볼 것은 메세지를 받을 때와 전송할 때이다.

 

채팅을 구현하기 위해서는 보낸시간, 받는사람, 보낸사람, 메세지 내용 등 다양한 정보가 필요한데 웹 소켓의 경우 String 타입의 message만 서버와 클라이언트 단에서 주고 받을 수 있었다.

 

그렇기에 필요한 데이터를 Json 형식으로 서버와 주고받을 수 있도록 구성하였다.

 

😱발생한 문제와 해결 방법

구현 중 문제가 발생하는데 바로 HTTP session을 가져오기이다.

클라이언트가 브라우저를 통해서 웹 사이트에 접속하면 서버는 클라이언트들을 구분할 수 있게 각자 고유의 값이 session을 생성해서 유저에게 전송하는데 이 session은 HTTP상의 session이다.

 

왜 문제가 될까?

Session 속에 들어있는 seesion id를 가공해서 사용할 필요가 있었는데 WS이 HTTP는 서로 다른 session을 생성한다는 것이다.

 

즉, 웹 페이지의 홈 session id를 가공하여 attribute에 저장해놓은 것을 WS에서 가져올 수 없었다는 것.

 

▶ 해결 방법: HTTP session 가져오기 -> interception 사용

내가 필요한건 많인 훌륭한 분들께서 다 만들어 놓으신 경우가 대부분이였기에 이번에도 해답을 찾았다.

@Configuration
@EnableWebSocket
@RequiredArgsConstructor
public class WebSocketConfig implements WebSocketConfigurer {
	
	@Autowired
	private final ChatHandler chatHandler;
	
	@Override
	public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
		registry.addHandler(chatHandler, "/ws/chat").setAllowedOrigins("*")
		.addInterceptors(new HttpSessionHandshakeInterceptor());	// interceptor for adding httpsession into websocket session
	}
	
}

Java에서 웹 소켓을 설정할때 WebSocketConfigurer 인터페이스를 상속 받고 resigerWebsocketHandlers 메소드를 상속 받아야한다.

 

위 메소드의 인자 registry에 .addInterceptors(new HttpSessionHandshakeInterceptor()를 추가해주면 HTTP를 WS으로 변경할때 interceptor가 작용해 HTTP session의 attrubutes를 가져올 수 있다.

@Component
public class ChatHandler extends TextWebSocketHandler {

	@Override
	protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {

		String senderId = (String) session.getAttributes().get("sessionId");
}

handler 내의 WebSocketSession에서 httpSession에서 설정한 attribute를 "getAttrubutes().get(저장한 애트리뷰트이름)을 통해서 가져올 수 있었다.

▶ DB를 사용하지 않고 기존 메시지 저장하기 -> Session Storage 사용하기

<script>
	// save chat history
    function setChatHistory(name){
    var value =[];
    document.querySelectorAll('.message-li').forEach(item => {
    
    var time = item.querySelector('.message-data > .message-data-time').textContent;
    var message = item.querySelector('.message').textContent;
    var senderId;
    var type = item.querySelector('.message').classList[1];
    if(type == 'my-message'){
    senderId = myId;
    } else {
    senderId = name;
    }
    
    data = {
    	"time":time,
        "message":message,
        "senderId":senderId
        }
        value.push(data);
   
   })
        	 
	sessionStorage.setItem(name, JSON.stringify(value));
     };
         
	// insert pre chat history
	function getChatHistory(name){
	var data = JSON.parse(sessionStorage.getItem(name));
        	 
	if(data != null) {
		data.forEach(item => {
		var time = item.time;
		var message = item.message;
		var senderId = item.senderId;

		insertMessage(senderId, time, message);
		})
	}
};
</script>

상대방의 id를 session stroage의 key로 상대방과의 대화 내용은 Json String으로 만들어 value로 넣어줬다.

 

sessionStorage를 사용한 이유?

내가 필요한 부분은 실시간 라이브 채팅이지만, 1:1 채팅이였기에 채팅 상대를 바꾸는 과정이 있기에 채팅 히스토리를 저장할 공간이 필요했다.

 

sessionStorage는 localStorage나 DB 저장과는 다르게 session이 만료되면 사라지는 정보이다. 해당 웹 페이지는 익명으로 채팅에 참여하는 것이고 중요한 정보를 저장할 필요가 없기에 세션이 종료시 사라지는 휘발성 저장 공간이 필요했기에 사용하기 적절해 사용하였다.

▶ sessionStorage 사용법

<script>
if(sessionStorage.getItem(senderId) != null) {
	container = JSON.parse(sessionStorage.getItem(senderId));
	console.log('stagine message container >>> ', container);
	container.push(data);
 } else {
 	container.push(data);
 }
 sessionStorage.setItem(senderId, JSON.stringify(container));
 </script>

sessionStorage는 key(String), value(String)로 이뤄집니다.

 

setItem(key, value) 메소드를 통해서 값을 저장하고 getItem(key)를 통해서 저장한 데이터를 불러올 수 있습니다.

 

위의 예시 내용

메세지를 받았을 때, senderId(보내는 사람)의 key를 가진 sessionStorage가 null이 아닐 때

-> 이미 senderId와 메세지를 주고 받은적이 있는 경우

=> 메세지를 저장해 놓은 container 배열 뒤에 추가 해준다. 

 

sessionStorage에 senderId와 일치하는 key가 없는 경우

-> 메세지를 주고 받은적이 없다.

=> 비어있는 container에 추가 해준다.

 

위 코드의 문제점

host의 경우 대화상대를 바꿀 때마다 sessionStorage에 기존의 대화 내용을 모두 저장하고 다시 모두 불러와야 한다.

대화 내용과 대화 상대가 매우 많아 진다면 host(master)의 브라우저에 부하가걸릴 확률이 높다.

 

해결책?

1. host와 대화할 수 있는 session 제한하기

2. 저장할 메세지의 개수를 제한하기 -> 확장: 저장할 대화 내용의 양을 host가 직접 조절할 수 있는 기능 제공

 

2번 방안이 조금 더 유용할 순 있지만, 근본적인 해결책이라고 보기는 어려울 것 같다.

더 좋은 해결방안이 있다면 댓글로 의견주시면 감사합니다.

😶‍🌫️아무튼 결과...

guest

채팅방은 guest로 접속하냐 master로 접속하냐로 나뉩니다. 누군가 접속하게되면 접속 메세지를 남기게되는데 마스터의 경우 모든 게스트들에게 접속 메세지를 날리게합니다.

좌: guest 우: master(host)

 

마스터의 경우 게스트가 많을 수 있으므로 게스트를 선택적으로 대화할 수 있습니다. 

 

대화 중이 아닌 게스트가 마스터에게 메세지를 보낸다면 보낸 만큼 카운팅되고 마스터 화면에 표시되게 해놨습니다. 여기선 seesionStorage에 상대의 메세지를 저장시켜 놓습니다.

화면에 표시되는 동그란 표시는 canvas를 이용해서 그렸습니다.

게스트를 선택하는 순간 해당 게스트의 아이디와 동일한 sessionStorage에서 메세지를 가져와 형식에 맞게 보여줍니다.

 

이렇게 실시간 채팅의 기능을 비슷하게 구현해봤습니다. 

 

JS와 Java 전체코드를 적는건 너무 길어서 필요한 틀만 작성했으니 내용이 필요하신 부분은 깃헙에서 확인해주세요.

 

chatHandler.java, chat.html(<script>)를 찾아서 확인 하시면 될 것 같습니다. 

 

부족한 부분이 많을텐데 이슈가 될만한 부분은 깃헙 이슈에 남겨주시면 감사합니다.

 

프로젝트 전체 소스: https://github.com/wjgin/Spring-boot-drill/tree/master/itsme