Polling 방식으로 인한 서버 다운 문제 해결하기

const POLLING_INTERVAL = 1000; // 1초마다 폴링
 
function useInterval(callback, delay) {
  useEffect(() => {
    const intervalId = setInterval(callback, delay);
    return () => clearInterval(intervalId);
  }, [callback, delay]);
}
 
const fetchSnapshots = useCallback(async () => {
  if (!roomUuid) return;
 
  try {
    const response = await fetch(`/api/rooms/${roomUuid}/snapshots`);
    // 데이터 처리...
  } catch (error) {
    console.error("Error fetching snapshots:", error);
  }
}, [roomUuid]);
 
// Polling - 1초마다 지속적으로 API 호출
useInterval(() => {
  fetchSnapshots();
}, POLLING_INTERVAL);

@Service
@RequiredArgsConstructor
public class SnapshotService {
 
    private final SnapshotRepository snapshotRepository;
 
    private final SnapshotSocketService snapshotSocketService;
 
    // ...
 
    @Transactional
    public SnapshotResponseDTO.SnapshotCreateResponse saveSnapshot(Long roomId, SnapshotRequestDTO.SnapshotCreateRequest request) {
        // ...
 
        // Snapshot 저장
        Snapshot savedSnapshot = snapshotRepository.save(snapshot);
 
        // WebSocket 알림 전송 - 스냅샷 생성 알림
        try {
            SnapshotResponseDTO.SnapshotDetailResponse snapshotDetail =
                    SnapshotResponseDTO.SnapshotDetailResponse.builder()
                            .snapshotId(savedSnapshot.getSnapshotId())
                            .title(savedSnapshot.getTitle())
                            .description(savedSnapshot.getDescription())
                            .code(savedSnapshot.getCode())
                            .createdAt(savedSnapshot.getCreatedAt())
                            .comments(List.of()) // 새로 생성된 스냅샷은 댓글이 없음
                            .build();
 
            snapshotSocketService.notifySnapshotCreated(room, snapshotDetail);
 
        } catch (Exception e) {
            // WebSocket 알림 실패 시 로깅만 하고 계속 진행
            log.warn("스냅샷 생성 WebSocket 알림 전송 실패: roomId={}, snapshotId={}, error={}", room.getRoomId(), savedSnapshot.getSnapshotId(), e.getMessage());
        }
 
        return response;
    }
}

@Slf4j
@Service
@RequiredArgsConstructor
public class SnapshotSocketService {
 
    private final SimpMessagingTemplate messagingTemplate;
 
    public void notifySnapshotCreated(Room room, SnapshotResponseDTO.SnapshotDetailResponse snapshot) {
        log.info("[WebSocket] 스냅샷 생성 알림: roomId={}, roomUuid={}, snapshotId={}", room.getRoomId(), room.getUuid(), snapshot.getSnapshotId());
 
        SnapshotSocketDTO.SnapshotCreatedResponse response =
                SnapshotSocketDTO.SnapshotCreatedResponse.builder()
                        .roomId(room.getRoomId())
                        .snapshot(snapshot)
                        .timestamp(LocalDateTime.now())
                        .build();
 
        // 해당 방의 모든 사용자에게 브로드캐스트
        messagingTemplate.convertAndSend("/topic/room/" + room.getUuid() + "/snapshots", response);
 
        log.info("[WebSocket] 스냅샷 생성 알림 전송 완료: roomId={}, roomUuid={}", room.getRoomId(), room.getUuid());
    }
}

export default function CodeShareRoomPage() {
  const [snapshots, setSnapshots] = useState<any[]>([]);
  const [roomInfo, setRoomInfo] = useState<RoomInfo | null>(null);
  const [isAuthorized, setIsAuthorized] = useState<boolean>(false);
 
  // ...
 
  // 초기 스냅샷 로드
  const fetchSnapshots = useCallback(async (): Promise<void> => {
    if (!roomInfo?.uuid || !isAuthorized) return;
 
    const response = await fetch(`/api/rooms/${roomInfo.uuid}/snapshots`);
    const data = await response.json();
 
    const formattedSnapshots = data.data
      .map((snapshot: any) => ({ /* ... */ }))
      .sort((a: any, b: any) => b.createdAt - a.createdAt);
 
    setSnapshots(formattedSnapshots);
  }, [roomInfo?.uuid, isAuthorized]);
 
  // WebSocket을 통한 실시간 스냅샷 업데이트
  const handleSnapshotUpdate = useCallback((newSnapshot: any) => {
    if (!newSnapshot.id) return;
 
    setSnapshots((prev) => {
      // 중복 체크
      if (prev.some((snapshot) => snapshot.id === newSnapshot.id)) {
        return prev;
      }
      return [newSnapshot, ...prev];
    });
  }, []);
 
  // 웹소켓 관리
  const { publishCode } = useWebSocketManager({
    roomInfo,
    isAuthorized,
    onSnapshotUpdate: handleSnapshotUpdate,
    // ...
  });
 
  // ...
}