feat: websocket 도입

[fromitive]

현재 크루들의 출결 현황은 GET /crew을 요청한 후 처리합니다.

milky-way/src/main/resources/static/index.html

Lines 42 to 49 in 255439c

	function fetchCrews() {
	fetch('/crews')
	.then(response => response.json())
	.then(data => {
	updateWordCloud(data);
	})
	.catch(error => console.error('Error fetching data:', error));
	}

문제는 최초로 출결현황을 받은 뒤 아래의 코드로 인해 크루 업데이트가 5초마다 1번씩 새로고침되어 프론트 페이지가 끊깁니다.

milky-way/src/main/resources/static/index.html

Lines 94 to 96 in 255439c

	document.addEventListener("DOMContentLoaded", function () {
	fetchCrews(); // Initial fetch
	setInterval(fetchCrews, 5000); // Fetch every 5 seconds

이를 비동기적으로 처리기 위해 서버에 websocket 을 도입하면 아래와 같이 시스템을 개선시킬 수 있습니다.

1. 크루 출결이 업데이트 되면 실시간으로 처리되는 느낌을 줄 수 있습니다.
2. 누가 출석했는지 토스트 메시지로 띄어주는 기능을 페이지에 추가할 수 있으며, 출석을 한 사용자가 출석했음을 바로 확인할 수 있습니다.

[donghoony]

websocket을 사용하는 것도 방법이 될 수 있지만, 크롤링을 사용하지 않고, Google Form에서 Script를 사용해 Webhook을 사용하면 더 간편하게 할 수 있어 보이네요 (Reference)