🔥 TIL - Day 64 SSE를 이용한 실시간 알림

전체코드 Github

📌 SSE (Server-Sent Event)

Websocket과 같이 서버에서 클라이언트로 단방향 통신을 가능하게 하는 솔루션 중 하나이다.
가장 큰 차이점으로는 WebSocket의 경우 완전히 양방향 통신을 지원한다. 클라이언트에서 서버로, 서버에서 클라이언트로 통신이 가능하다. 반면 SSE의 경우 서버에서 클라이언트로 보내는 것만 가능하다.

추가로 Websocket보다는 가볍고 Springboot 기준 구현이 쉽다는 장점을 갖고있다.

이번 프로젝트에 실시간 알림기능을 적용해보기 위해 가볍게 다뤄봤다.

---

📌 설정

Springboot 의 경우 따로 의존성 추가는 필요없다.

일단 구현에 앞서서 요구사항을 말로 풀어봤다. ( 말로 하니까 좀 이상하긴하다..)

• 로그인 된 사용자만 이벤트를 받으면 되므로 로그인 된 사용자만 서버와 연결되도록 한다.
  (연결 == 구독)
• 로그인 된 사용자는 pk, username, 권한 등이 포함된 토큰을 sessionStorage에 갖는다. (실제 데이터와 관계없는 pk정도는 토큰에서 관리해도 되지 않을까 ?)
• 페이지가 로드되었을 때 sessionStorage에 토큰이 있다면 토큰을 쿼리스트링으로 전달하면서 서버와 연결한다.
• 어떤 게시글에 댓글이 달렸을 때 서버는 해당 게시글의 pk로 해당 게시글의 주인(user)를 찾고 주인(user)의 pk와 매핑된 emitter로 이벤트 스트림을 보낸다.

클라이언트 측 보다는 서버 측 처리가 쪼끔 복잡하니 클라이언트 측 처리부터 보자.
클라이언트는 토큰을 보유하고 있을 때만 서버를 구독하면 된다.

let subscribeUrl = "http://localhost:8080/sub";

$(document).ready(function() {

    if (sessionStorage.getItem("mytoken") != null) {
        let token = sessionStorage.getItem("mytoken");
        let eventSource = new EventSource(subscribeUrl + "?token=" + token);

        eventSource.addEventListener("addComment", function(event) {
            let message = event.data;
            alert(message);
        })

        eventSource.addEventListener("error", function(event) {
            eventSource.close()
        })
    }
})

아직 소개하진 않았지만 서버측에서 구독(연결)을 위해 열어놓은 엔드포인트는 /sub이다.
이 엔드포인트에 쿼리스트링으로 토큰값과 함께 요청하고 있다.

연결을 이렇게 하면 끝이다. (쏘 간단)

다음으로 서버에서 발헹된 이벤트에 대한 처리를 한다.
addComment라는 이름으로 이벤트가 발생했다면 함께 전달된 data를 alert하는 간단한 처리를 하고 있다.

이제 서버측 처리이다.

@RequiredArgsConstructor
@Slf4j
@RestController
public class SseController {

    public static Map<Long, SseEmitter> sseEmitters = new ConcurrentHashMap<>();
    private final JwtUtils jwtUtils;

    @CrossOrigin
    @GetMapping(value = "/sub", consumes = MediaType.ALL_VALUE)
    public SseEmitter subscribe(@RequestParam String token) {
			
        // 토큰에서 user의 pk값 파싱
        Long userId = jwtUtils.getUserIdFromToken(token);
		
        // 현재 클라이언트를 위한 SseEmitter 생성
        SseEmitter sseEmitter = new SseEmitter(Long.MAX_VALUE);
        try {
            // 연결!!
            sseEmitter.send(SseEmitter.event().name("connect"));
        } catch (IOException e) {
            e.printStackTrace();
        }
        
        // user의 pk값을 key값으로 해서 SseEmitter를 저장
        sseEmitters.put(userId, sseEmitter);

        sseEmitter.onCompletion(() -> sseEmitters.remove(userId));
        sseEmitter.onTimeout(() -> sseEmitters.remove(userId));
        sseEmitter.onError((e) -> sseEmitters.remove(userId));

        return sseEmitter;
    }
}

가장 중요한 부분은 전달받은 토큰에서 user의 pk값을 파싱하고 파싱된 pk값을 키 값으로 하여 SseEmitter를 저장하는 부분이다.

이로써 사용자별로 SseEmitter를 식별하여 이벤트를 보낼 수 있게 되었다.

마지막으로 알림(이벤트)을 보내기 위한 처리가 남았다.

@RequiredArgsConstructor
@Service
public class NotificationService {

    private final MemoRepository memoRepository;

    public void notifyAddCommentEvent(Long memoId) {
        // 댓글에 대한 처리 후 해당 댓글이 달린 게시글의 pk값으로 게시글을 조회
        Memo memo = memoRepository.findById(memoId).orElseThrow(
                () -> new IllegalArgumentException("찾을 수 없는 메모입니다.")
        );
        Long userId = memo.getUser().getId();

        if (sseEmitters.containsKey(userId)) {
            SseEmitter sseEmitter = sseEmitters.get(userId);
            try {
                sseEmitter.send(SseEmitter.event().name("addComment").data("댓글이 달렸습니다!!!!!"));
            } catch (Exception e) {
                sseEmitters.remove(userId);
            }
        }
    }
}

위 메서드는 댓글에 대한 처리를 마친 후에 호출된다.
파라미터로 받은 게시글의 주인(user)의 pk를 조회한다.

우리는 user의 pk와 연결된 SseEmitter 저장소를 갖고 있다.
SseEmitter 저장소에 현재 user의 pk가 존재한다면 (게시글의 주인이 현재 서버와 연결되어 있는 상태라면) 이벤트를 발행하면 된다.

알림을 위한 메서드를 호출하는 부분

    @PostMapping("/memo/{id}/comment")
    public ResponseEntity addComment(
            @AuthenticationPrincipal UserDetailsImpl userDetails,
            @PathVariable Long id,
            @RequestBody CommentDto commentDto) {
        Memo memo = memoService.addComment(id, userDetails.getUser(), commentDto);

	// 알림 이벤트 발행 메서드 호출
        notificationService.notifyAddCommentEvent(memo);
        
        return ResponseEntity.ok("ok");
    }

구현 끝~~

---

📌 테스트

---

📌 참고

https://www.youtube.com/watch?v=HoxPgU4lFGE

https://www.youtube.com/watch?v=4HlNv1qpZFY