setInterval로 DB 갱신 여부, WebSocket으로 개선하기

 

안녕하세요!

 

JSP를 활용한 웹 기반 키오스크 개발 과정에서 겪은 개선사항을 공유하려고 합니다.

 

많은 관심 부탁드립니다. 🙏

 

 

---

 

 

서론

고속도로 휴게소 식당에서 식사해 보신 적이 있나요?

 

손님이 키오스크로 주문하면, 주방에서 주문 목록을 확인하고 조리한 후, 손님은 조리 완료된 음식의 번호를 확인하고 직접 가져갑니다.

 

아래 이미지를 통해 프로세스를 확인해볼까요?

 

 

손님이 번호표를 받고 음식을 픽업하는 과정에서, 주문한 정보가 실시간으로 주방에 전달되어야 합니다.

이 과정에서 발생한 문제를 해결한 경험을 공유해보려 합니다.

 

 

---

 

 

문제 발생

기존에는 손님이 주문하면 해당 내용이 DB에 저장되고, 주방 페이지에서 이를 실시간으로 갱신하기 위해 setInterval을 사용하여 주기적으로 새로고침하는 방식으로 처리했습니다.

 

정말 비효율적입니다.

• 일정 주기마다 새로고침하면 변경 사항이 없더라도 불필요한 요청이 계속 발생합니다.
• 주기적인 새로고침마다 DB 조회가 이루어지기 때문에, 이는 DB 성능에도 부정적인 영향을 미칠 수 있습니다.
• 화면이 반복적으로 새로고침되면서 깜빡이는 현상이 발생할 수 있어 UX 측면에서도 좋지 않습니다.

 

기능적으로는 문제가 없지만, 성능상의 문제가 있고, 이러한 부분은 개발자가 해결해야 할 과제이죠?

 

 

---

 

 

WebSocket

저는 이러한 문제를 WebSocket을 사용하여 해결하였습니다.

 

먼저 WebSocket에 대해 알아봅시다.

 

 웹 개발을 하다보면, HTTP 프로토콜을 통해 클라이언트가 request를 보내면, 서버가 response 하는 구조를 경험하셨을 겁니다.

이 방식의 문제점은 서버가 클라이언트에게 먼저 데이터를 보낼 수 없기 때문에, 클라이언트가 새로운 데이터가 있는지 확인하려면 서버에 지속적으로 요청을 보내야 한다는 점입니다.

 

이러한 상황을 해결하기 위해 사용하는 것이 WebSocket입니다.

 

WebSocket은 웹 앱과 서버 간에 지속적인 연결을 제공하는 프로토콜입니다. HTTP는 매번 연결을 맺고 끊는 과정을 거쳐야 하지만, WebSocket은 한 번 연결을 맺은 후 지속적으로 연결을 유지한다는 점이 큰 차이점입니다.

 

 

그림을 보면 요청과 응답 형식으로 통신하는 방식이 보입니다. 반면, WebSocket은 HTTP 연결을 통해 연결을 맺은 후, WS 프로토콜로 전환되어 양방향 통신이 가능합니다.

 

 

---

 

 

코드

(Server)

@ServerEndpoint("/broadcasting")
public class Broadsocket {

	private static Set<Session> clients = Collections.synchronizedSet(new HashSet<Session>());
	
	public static void serverMessage(String message) {
		System.out.println("serverMessage 함수 호출");
		
		for (Session client : clients) {		
			try {
				client.getBasicRemote().sendText(message);
			} catch (IOException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
		}
	}
	
	@OnMessage
	public void onMessage(String message, Session session) throws IOException {
		System.out.println("onMessage 호출");
		System.out.println("클라이언트 크기 : "+clients.size());
		System.out.println(message);
		synchronized (clients) {
			// Iterate over the connected sessions
			// and broadcast the received message
			for (Session client : clients) {
				if (!client.equals(session)) {
					
					client.getBasicRemote().sendText(message);
				}
			}
		}
	}
	

	@OnOpen
	public void onOpen(Session session) {
		System.out.println("onOpen 호출");
		// Add session to the connected sessions set
		System.out.println(session);
		clients.add(session);
	}

	@OnClose
	public void onClose(Session session) {
		System.out.println("onClose 호출");
		// Remove session from the connected sessions set
		clients.remove(session);
	}
}

( JSP Model2 나만의 블로그 만들기 15강 - 내 프로젝트에 웹소켓 구축해보기 - 테스트 : 네이버 블로그 )

• @ServerEndpoint를 설정하여 ws://localhost:8080/broadcasting 같은 주소로 연결을 요청받을 수 있습니다.
• @OnOpen 메서드를 토대로 연결된 클라이언트의 Session을 clients 집합에 추가해줍니다.
• @onClose 메서드는 세션이 종료되면 클라이언트의 Session을 clients 집합에서 제거해줍니다.
• @OnMessage 메서드는 클라이언트로부터 메시지를 수신할 때 호출되는 메서드입니다. 이 메서드를 통해 실시간으로 수신된 메시지를 클라이언트에게 전달합니다.

 

 

(Client)

webSocket = new WebSocket('ws://${server_address}/KIOSK_F/broadcasting');

webSocket.onerror = function(event) {
	onError(event)
};

webSocket.onopen = function(event) {
	onOpen(event)
};

webSocket.onmessage = function(event) {
	onMessage(event)
};


// message를 받으면 호출되는 함수
function onMessage(event) { 
   // 주문 메뉴 처리, 화면에 출력
   order_menu(event.data);
   display();
}

 

클라이언트 코드입니다.

onMessage 함수를 통해 서버로 부터 실시간 데이터를 받아 처리를 할 수 있습니다.

 

 

---

 

 

결과

웹 소켓을 통해, 기존 방식 단점들이 해결되면서 시스템의 응답 속도와 효율성이 크게 향상되었습니다.

DB 데이터 갱신 여부를 확인할 때, setInterval 방식 대신 웹소켓을 사용하는 접근 방식이 더욱 효과적일 수 있습니다.