서버사이드 렌더링에서 알림 서비스 구현하는 법

Question

안녕하세요! 현재 작은 게시판 커뮤니티 서비스를 개발하고 있습니다. 화면 렌더링은 Thymeleaf + JS 기반 SSR(Server-Side Rendering) 방식으로 하고 있고, 백엔드는 Spring을 사용하고 있습니다. 알림기능을 구현하려고 여러 기술들을 살펴보니 아래 방식들이 있더군요 .PollingLong PollingSSE(Server-Sent Events)WebSocket처음에는 사용자가 웹 사이트에 최초 접속할 때 SSE로 서버와 연결을 맺고 알림을 push받는 방식을 생각했습니다. 하지만 SSR 환경에서는 페이지 이동마다 클라이언트 - 서버 SSE 연결이 끊어지는 문제가 있어 고민 중입니다.현재 생각으로는 결국 Polling 또는 Long Polling 방식 밖에 선택지가 없어 보이는데,이보다 더 좋은 접근 방식이 있을까요?Polling계열은 사용자가 많아졌을 때, 주기적인 요청이 서버에 부담이 될 것 같아 걱정입니다. SSR 환경에서 알림기능을 효율적으로 구현하기 위한 방법이나 추천하는 구조가 있다면 조언 부탁드립니다.

catcode · Answer

알림을 굳이 실시간급으로 가져올 필요는 없다고 생각합니다. 특히 커뮤니티라면요메인화면, 글 조회, 게시판 이동과 같은 API호출 할 때 알림 API도 같이 호출하는 방식은 어떠신지요

캐티 · Answer

돈이 많이 깨지므로 활동이 있음 1분 상한 정도 sse를 쳐주고 이 다음 부터는 10분 마다 피드백을 추천해요. 켜놓고 집에가는 분들이 있어서 안그럼 망하빈담.

Ganymede Ganymedian · Answer

각 브라우저 벤더마다 브라우저 노티피케이션을 서비스하고 있습니다.10년 전에는 socket 처리가 일반적이었으나, 이제는 서버 기반 Realtime 처리가 일반적입니다.브라우저 벤더의 Realtime 서버가 처리해주므로, 본인 서버에는 부하가 전혀 발생하지 않습니다.Web Push Notification 이 공식 명칭이고,mdn 공식 문서는 여깁니다.https://developer.mozilla.org/en-US/docs/Web/API/Notification원리는 이러합니다.현존 메이저 브라우저는 모두 노티피케이션 서버를 운영하고 있습니다. Chrome-FCM, Safari-APNs, Firefox...웹앱은, 사용자로부터 노티피케이션-웹도메인 의 사용 권한을 승인받습니다.웹앱의 코드로, 브라우저 내장 Notification 객체를 사용해, 브라우저 벤더에 subscription 객체를 요청합니다. Notification 객체는, 각 브라우저마다 자사의 API 로 연결되고, 사용되는 코드는 모두 같습니다.subscription 객체에는, 사용자 고유 타겟 어드레스와 복호화 key 가 포함됩니다. 이를 db 에 보관합니다.노티피케이션 이벤트 발생시, 해당 유저의 subscription 객체를 db 에서 꺼내옵니다.노티피케이션 payload 를 생성하고, 이를 암호화 합니다.'web-push' 라이브러리를 사용해서 노티피케이션 요청을 전송합니다.브라우저 벤더가 이를 처리하고, 타겟 어드레스에 노티피케이션 객체를 push 해줍니다.웹 앱의 service worker 가 노티피케이션 도착을 리스닝하고 있습니다.노티피케이션이 도착하면, service worker 가 이를 화면에 표시해주고, 클릭시 딥링크를 포함한 링크 처리를 해줍니다.node 기반으로 설명드렸습니다만, spring 쪽에도 'web-push' 라이브러리는 있을 것 같습니다.node/React 예제: 3~4번 과정// Service Worker 등록 navigator.serviceWorker.register('/sw.js') .then(async registration => { console.log('Service Worker 등록 성공'); // Unit8Array 로 반드시 변환해줘야 함 const applicationServerKey = urlBase64ToUint8Array(VAPID_PUBLIC_KEY); // PushManager를 통한 구독 const subscription = await registration.pushManager.subscribe({ userVisibleOnly: true, applicationServerKey }); // 구독 정보를 서버로 전송 await fetch('/api/save-subscription', { method: 'POST', body: JSON.stringify(subscription), headers: { 'Content-Type': 'application/json' } }); subscription 객체 example:{ "endpoint": "https://fcm.googleapis.com/fcm/send/ABC-123_xyz...", "expirationTime": null, "keys": { "p256dh": "BDP-A-L1qT6X2k5qT2x-3x-7y_c3k4z...", "auth": "38a0c29f8a37f00d20d4d8c6b9b3c4f7" } }

서버사이드 렌더링에서 알림 서비스 구현하는 법

3개의 답변

#spring 목록