Spring : 알림 기능 구현

개요

이전 글에 이어서 [멋쟁이사자처럼 백엔드 TIL] Spring : 알림 기능 구현 종류 :: 미정 (tistory.com)

DB 알림함을 만들어서 알림기능을 관리하기로 결정했다.

 

 

나의 환경

Window 11

intelliJ

java 21 

spring Boot 3.3.0

 

 

---

1. 엔티티 생성

 

Notification.java

@Entity
@Getter @Setter
@JsonInclude(JsonInclude.Include.NON_NULL)
public class Notification {
    
    @Id @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    private String username;
    private String message;
    private boolean isRead;

    @Column(name = "created_at")
    private LocalDateTime createdAt;

    @PrePersist
    public void prePersist() {
        if (createdAt == null) {
            createdAt = LocalDateTime.now();
        }
    }
}

알림을 담을 엔티티를 하나 생성했다. isRead는 읽었는지 안읽었는지 확인하는 칼럼이다.

이때 username은 알림을 받을 사용자이다.

 

 

2. 레포지토리

NotificationRepository.java

public interface NotificationRepository extends JpaRepository<Notification, Long> {
    List<Notification> findByUsername(String username);

    List<Notification> findByUsernameAndIsRead(String username, boolean isRead);

    // '읽음'으로 표시된 알림 중 특정 시간 이전에 생성된 알림을 찾는 메서드
    List<Notification> findByIsReadAndCreatedAtBefore(boolean isRead, LocalDateTime cutoffTime);
}

DB에 저장하기 위한 레포지토리이다. 그리고 스케쥴링을 통해 관리를 하기 위해 메서드를 하나 추가한다.

 

 

 

3. 서비스

NotificationService.java

@Service
public class NotificationService {

    private final NotificationRepository notificationRepository;
    public NotificationService(NotificationRepository notificationRepository) {
        this.notificationRepository = notificationRepository;
    }

	// 알림을 생성
    @Transactional
    public void createNotification(String username, String message) {
        Notification notification = new Notification();
        notification.setUsername(username);
        notification.setMessage(message);
        notification.setRead(false);  // 기본값: 읽지 않음
        notificationRepository.save(notification);
    }

    // 알림 리스트 목록에서 버튼을 누르면 알림을 읽은 상태로 표시
    public void markAsRead(Notification notification) {
        notification.setRead(true);
        notificationRepository.save(notification);
    }

	// 알림이 보낼 때 상태
    @Transactional
    public void markAsRead(Long notificationId) {
        Notification notification = notificationRepository.findById(notificationId)
                .orElseThrow(() -> new RuntimeException("알림을 찾을 수 없습니다."));
        notification.setRead(false);
        notificationRepository.save(notification);
    }

    // 특정 ID로 알림을 가져옴
    public Notification getNotificationById(Long id) {
        return notificationRepository.findById(id)
                .orElseThrow(() -> new RuntimeException("알림을 찾을 수 없습니다."));
    }

    // 사용자에게 보낸 알림 목록을 반환
    public List<Notification> getUnreadNotificationsByUsername(String username) {
        return notificationRepository.findByUsernameAndIsRead(username, false);
    }
}

각 메서드의 역할은 위에 주석으로 설명했다.

markAsRead는 매개변수 값이 달라서 혼동하지 않아야 한다.

 

 

4. 컨트롤러

NotificationRestController.java

@RestController
@RequiredArgsConstructor
@RequestMapping("/api/notifications")
public class NotificationRestController {

    private static final Logger log = LoggerFactory.getLogger(NotificationRestController.class);
    private final NotificationService notificationService;
    private final UserService userService;

    private final CopyOnWriteArrayList<SseEmitter> emitters = new CopyOnWriteArrayList<>();

    @GetMapping("/stream")
    public SseEmitter streamNotifications(Authentication authentication) {
        SseEmitter emitter = new SseEmitter(60000L); // 60초 타임아웃 설정
        emitters.add(emitter);

        emitter.onCompletion(() -> emitters.remove(emitter));
        emitter.onTimeout(() -> {
            emitters.remove(emitter);
            emitter.complete();
        });
        emitter.onError((e) -> {
            emitters.remove(emitter);
            emitter.completeWithError(e);
        });

        // 사용자 인증 확인
        if (authentication == null) {
            emitter.complete();
            return emitter;
        }

        String username = authentication.getName();
        Optional<User> userOptional = userService.findByUserName(username);

        if (!userOptional.isPresent()) {
            emitter.complete();
            return emitter;
        }

        String user = userOptional.get().getUserName();

        // 새로운 쓰레드에서 알림을 전송
        new Thread(() -> {
            try {
                while (true) {
                    if (emitters.contains(emitter)) {
                        List<Notification> notifications = notificationService.getUnreadNotificationsByUsername(user);

                        if (!notifications.isEmpty()) {
                            for (Notification notification : notifications) {
                                if (!notification.isSent()) { // 알림이 전송되지 않았는지 확인
                                    emitter.send(SseEmitter.event()
                                            .name("notification")
                                            .data(notification.getMessage()));

                                    // 알림을 읽음 상태로 업데이트 및 전송됨 상태로 설정
                                    notificationService.markAsRead(notification.getId());
                                }
                            }
                        }
                    } else {
                        break; // emitter가 이미 완료된 경우 반복문 종료
                    }
                    Thread.sleep(10000); // 10초마다 알림을 체크
                }
            } catch (Exception e) {
                log.info(e.getMessage());
                // emitter.completeWithError(e);
            }
        }).start();
        return emitter;
    }
}

서버가 클라이언트로 실시간 데이터를 전송할 수 있게 해주는 코드이다.

메서드를 보면 SseEmitter 객체를 생성하여 반환한다. SseEmitter는 서버가 클라이언트에게 비동기적으로 데이터를 전송할 수 있도록 해준다. SSE 방식으로 알림을 구현한다면 사용되는 객체이다.

• new SseEmitter(60000L): 60초 타임아웃을 설정하여 SseEmitter를 생성한다.
• notificationService를 통해 사용자의 읽지 않은 알림 목록을 가져온다.
• 읽지 않은 알림이 있으면, emitter.send() 메서드를 사용하여 각 알림을 클라이언트에게 전송한다.
• 전송 후에는 알림을 읽음 상태로 업데이트한다.
• 만약 알림이 한번 전송된 후에는 다시 전송되지 않도록 관리할 수 있다.

이 코드를 통해 사용자는 새로운 알림이 있을 때마다 즉시 알림을 받을 수 있고 알림은 한번만 울리도록 설정했다.

 

 

 

NotificationController.java

@Controller
@RequiredArgsConstructor
@RequestMapping("/notifications")
public class NotificationController {
    private final NotificationService notificationService;

    /**
     * 로그인한 사용자의 읽지 않은 알림 리스트
     */
    @GetMapping
    public String getNotifications(Model model, Authentication authentication) {
        if (authentication == null || !authentication.isAuthenticated()) {
            return "redirect:/loginform"; // 로그인 페이지로 리다이렉트
        }
        String username = authentication.getName();
        List<Notification> notifications = notificationService.getUnreadNotificationsByUsername(username);
        model.addAttribute("notifications", notifications);
        return "notifications";
    }

    // 알림을 읽음 상태로 변경하는 메서드
    @PostMapping("/api/notifications/mark-as-sent/{id}")
    @ResponseBody
    public ResponseEntity<String> markAsRead(@PathVariable("id") Long id) {
        Notification notification = notificationService.getNotificationById(id);
        if (notification != null) {
            notificationService.markAsRead(notification);
            return ResponseEntity.ok("Notification marked as read");
        } else {
            return ResponseEntity.status(HttpStatus.NOT_FOUND).body("Notification not found");
        }
    }
}

 

알림 목록을 받을 코드와 알림 리스트에서 읽음 버튼을 눌렀을 때 읽음 처리가 될 수 있도록 처리할 메서드를 생성한다.

 

 

5. 특정 행위에 대한 알림을 받을 곳에 코드 추가

@Service
@RequiredArgsConstructor
public class CommentService {

    private final PostRepository postRepository;
    private final CommentRepository commentRepository;
    private final UserRepository userRepository;
    private final NotificationService notificationService;

    /**
     * 댓글 추가
     */
    @Transactional
    public Comment addComment(Long postId, String content) {
        String username = getCurrentUsername();
        if (username == null) {
            throw new IllegalStateException("로그인된 사용자만 댓글을 작성할 수 있습니다.");
        }

        User user = userRepository.findByUserName(username)
                .orElseThrow(() -> new UserNotFoundException("해당 사용자를 찾을 수 없습니다. username: " + username));
        Post post = postRepository.findById(postId)
                .orElseThrow(() -> new PostNotFoundException("해당 포스트를 찾을 수 없습니다. postId: " + postId));

        Comment comment = new Comment();
        comment.setPost(post);
        comment.setUser(user);
        comment.setContent(content);
        Comment savedComment = commentRepository.save(comment);

        // 댓글 작성 후 알림 전송
        sendCommentNotification(post, user, content);
        
        return savedComment;
    }

    /**
     * 댓글 작성 시 알림 전송
     */
    private void sendCommentNotification(Post post, User commenter, String content) {
        User postAuthor = post.getUser();        // 게시글 작성자 정보 가져오기
        // 댓글을 작성한 사용자와 게시글 작성자가 동일하지 않을 때만 알림을 보냄
        if (!commenter.getUserId().equals(postAuthor.getUserId())) {
            notificationService.createNotification(postAuthor.getUserName(), commenter.getUserName() + "님이 댓글을 달았습니다: "
            );
        }
    }
}

일단 나는 댓글을 달 때 알림을 받기를 원하니깐 CommentService에서 알림 로직을 추가한다.

위와 같이 알림서비스의 createNotification 메서드를 호출하여 댓글이 달렸을 때 해당 게시글의 작성자한테 알림을 보낸다.

 

 

7. HTML

메인 홈 HTML

<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>velog</title>
  <link href="/css/home.css" rel="stylesheet"/>
</head>
<body>

<nav class="navbar navbar-expand-lg navbar-light bg-light shadow-sm">
  <div class="container">
    <a class="navbar-brand text-white" href="#">NewsFeed</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <!-- 알림 링크 추가 -->
        <li class="nav-item" th:if="${username != null and username != ''}">
          <a class="nav-link text-white notification-dot" th:href="@{/notifications}">📪</a>
        </li>
      </ul>
      <div th:if="${username != null and username != ''}" class="d-flex align-items-center ms-auto">
        <a class="btn btn-outline-light me-3" th:href="@{/posts/create}">새 글 작성</a>
        <div th:unless="${username == 'admin'}" class="dropdown">
          <a href="#" class="d-flex align-items-center text-decoration-none" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
            <img class="profile-image" th:src="@{${profileImage}}" alt="Profile Image">
            <i class="bi bi-caret-down-fill text-white"></i>
          </a>
          <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuButton">
            <li><a class="dropdown-item" th:href="@{/mypage}">내 벨로그</a></li>
            <li><a class="dropdown-item" th:href="@{/api/logout}">로그아웃</a></li>
          </ul>
        </div>
      </div>
      <div th:if="${username == null or username == ''}" class="d-flex">
        <a class="btn btn-outline-dark me-2" th:href="@{/loginform}">로그인</a>
      </div>
    </div>
  </div>
</nav>

<main class="container my-5">

  <!-- 알림 배너 -->
  <div id="notification-banner" class="alert alert-info d-none position-fixed top-0 end-0 m-3" role="alert">
    <span id="notification-message">새 알림</span>
    <button type="button" class="btn-close" aria-label="Close"></button>
  </div>
</main>
<script>
  (function(){var w=window;if(w.ChannelIO){return w.console.error("ChannelIO script included twice.");}var ch=function(){ch.c(arguments);};ch.q=[];ch.c=function(args){ch.q.push(args);};w.ChannelIO=ch;function l(){if(w.ChannelIOInitialized){return;}w.ChannelIOInitialized=true;var s=document.createElement("script");s.type="text/javascript";s.async=true;s.src="https://cdn.channel.io/plugin/ch-plugin-web.js";var x=document.getElementsByTagName("script")[0];if(x.parentNode){x.parentNode.insertBefore(s,x);}}if(document.readyState==="complete"){l();}else{w.addEventListener("DOMContentLoaded",l);w.addEventListener("load",l);}})();

  ChannelIO('boot', {
    "pluginKey": "{channerTalk key}"
  });
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
  document.addEventListener('DOMContentLoaded', function() {
    const eventSource = new EventSource('/api/notifications/stream');
    const notificationDot = document.querySelector('.notification-dot');

    eventSource.addEventListener('notification', function(event) {
      try {
        // 수신된 데이터를 문자열로 받음
        const notificationMessage = event.data;

        // 메시지와 배너를 업데이트
        const notificationElement = document.getElementById('notification-message');
        notificationElement.textContent = notificationMessage;

        const notificationBanner = document.getElementById('notification-banner');
        notificationBanner.classList.remove('d-none');

        // 빨간색 점 활성화
        if (notificationDot) {
          notificationDot.classList.add('active');
        }

        // 5초 후 배너를 숨김
        setTimeout(() => {
          notificationBanner.classList.add('d-none');
        }, 5000);

      } catch (error) {
        console.error('SSE 메시지 처리 오류:', error);
      }
    });

    eventSource.onerror = function(event) {
      console.error('SSE 연결 오류:', event);
      if (event.readyState === EventSource.CONNECTING) {
        console.error('연결 재시도 중...');
      } else if (event.readyState === EventSource.CLOSED) {
        console.error('연결이 닫혔습니다.');
      }
      console.error('상태:', event.target.readyState);
    };

    document.getElementById('notification-banner')
            .querySelector('.btn-close')
            .addEventListener('click', function() {
              const notificationBanner = document.getElementById('notification-banner');
              notificationBanner.classList.add('d-none');
            });

    window.addEventListener('beforeunload', function() {
      eventSource.close();
    });
  });
</script>
</body>
</html>

메인 홈 화면 폼이다. 여기에서는 알림이 오면 우측 상단에 메시지가 뜨며 📪 여기에 빨간 점이 표시된다. 알림을 읽지 않은 상태에서 표시되고 알림을 읽으면 사리지도록 구현했다. 아래는 위에 폼에 대한 css 코드이다.

body {
    font-family: 'Noto Sans KR', sans-serif;
    background-color: #1E1E1E;
    color: #E0E0E0;
}
.navbar {
    background-color: #121212 !important;
}
.navbar-brand, .navbar-nav .nav-link {
    color: #FFFFFF !important;
}
.btn-outline-light {
    color: #FFFFFF;
    border-color: #FFFFFF;
}
.btn-outline-light:hover {
    background-color: #007bff;
    color: #FFFFFF;
}
.btn-outline-dark {
    color: #FFFFFF;
    border-color: #FFFFFF;
}
.btn-outline-dark:hover {
    background-color: #007bff;
    color: #FFFFFF;
}
.profile-image {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}
.profile-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: white;
}
.profile-info {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}
.profile-info img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin-right: 20px;
}
.profile-info .username {
    font-size: 24px;
    font-weight: bold;
}
.profile-info .greeting {
    font-size: 18px;
    color: #AAAAAA;
}
.tags {
    margin-bottom: 20px;
}
.tags a {
    color: #E0E0E0;
    text-decoration: none;
    margin-right: 10px;
}
.post-title {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 10px;
}
.post-content {
    color: #AAAAAA;
    margin-bottom: 20px;
}
.emphasized {
    font-weight: bold;
}
.card-img {
    width: 40%;
    height: auto;
    object-fit: cover;
}
.space-between {
    margin-right: 280px;
}
.card {
    height: 400px; 
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.card-body {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.card-text {
    flex-grow: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    white-space: normal;
}
.card-footer {
    margin-top: auto;
}
/* home.css */
.notification-dot {
    position: relative;
    display: inline-block;
}

.notification-dot::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: red;
    transform: translate(50%, -50%);
    display: none;
}

.notification-dot.active::after {
    display: block;
}

 

알림 리스트 HTML

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>내 알림</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div class="container">
    <h1>내 알림</h1>
    <div>
        <ul>
            <li th:each="notification : ${notifications}" class="notification-card">
                <p class="notification-message" th:text="${notification.message}"></p>
                <div class="notification-actions">
                    <button class="btn btn-outline-dark mark-as-read-button"
                            data-id="[[${notification.id}]]"
                            th:text="${notification.isRead ? '읽음' : '읽음으로 표시'}"></button>
                </div>
            </li>
        </ul>
    </div>
    <a href="/trending" class="home-link">홈으로 돌아가기</a>
</div>
<script>
    $(document).ready(function() {
        $('.mark-as-read-button').click(function() {
            var notificationId = $(this).data('id');
            var button = $(this);

            $.ajax({
                url: '/api/notifications/mark-as-sent/' + notificationId,
                type: 'POST',
                success: function(response) {
                    alert('알림이 읽음으로 표시되었습니다.');
                    button.text('읽음');
                    button.attr('disabled', true);  // 버튼 비활성화
                },
                error: function(xhr) {
                    alert('알림 상태를 변경하는 중 오류가 발생했습니다.');
                }
            });
        });
    });
</script>
</body>
</html>

나한테 울린 알림 목록을 보여주는 폼이다. 여기서 저 버튼을 누르면 읽음 표시가 되어서 디비에서 읽은 상태로 바뀌게 된다.

 

하지만 나는 레디스를 사용하지 않아서 RDB에 그대로 알림이 쌓여져 간다. 그렇기 때문에 스케줄링을 통해 알림을 관리할려고 한다.

SchedulingConfig.java

@Configuration
@EnableScheduling
public class SchedulingConfig {
    // 스케줄링 관련 설정
}

@EnableScheduling 을 붙임으로써 스케쥴링을 하겠다는 의미이다.

@Component
@RequiredArgsConstructor
public class NotificationBatchProcessor {

    private final NotificationRepository notificationRepository;

    /**
     * 주기적으로 호출되어 10분 이상 경과한 읽지 않은 알림을 삭제합니다.
     * 예: 생성된 지 10분 이상 경과한 읽지 않은 알림을 삭제
     */
    @Scheduled(cron = "0 0/5 * * * ?") // 매 5분마다 실행
    public void deleteUnReadNotifications() {
        // 현재 시간 기준으로 10분 이상 경과한 알림을 조회
        LocalDateTime cutoffTime = LocalDateTime.now().minusMinutes(10);
        List<Notification> notificationsToDelete = notificationRepository.findByIsReadAndCreatedAtBefore(false, cutoffTime);

        // 알림 삭제
        notificationRepository.deleteAll(notificationsToDelete);
    }
}

스케쥴링같은 경우는 cron 표현을 사용해서 구현한다. [Cron] 크론(cron) 표현식 정리 (tistory.com)

테스트용이라서 5분마다 메서드를 실행하는데, 현재 시간에서 10분 전 시간을 계산하여 cutoffTime에 저장한다.

10분 전에 생성된 알림을 고려해서 삭제한다는 의미이다.

• notificationRepository.findByIsReadAndCreatedAtBefore(false, cutoffTime)
  • 이 부분에서 isRead가 false(읽지 않은)이고, createdAt이 cutoffTime보다 이전인 알림들을 조회한다.
  • 따라서, 10분 이상 경과한 false인 읽지 않은 알림을 조회하는 것이다.

 

 

이렇게 알림 기능 구현 완료~ 약간 복잡해서 어려웠다.