GOLFANI-TECH-BLOG

개요

소켓을 이용한 실시간 알람뿐만 아니라 유저가 GOLFANI페이지에 존재하지 않아도
알람을 확인할 수 있는 기능이 있으면 좋겠다 생각했습니다.

따라서 FCM을 활용하여 Notification API를 이용해 알림을 제공하는 방법을 사용했습니다.

FCM?

FCM (Firebase Cloude Message)는 무료로 메시지를 안정적으로 전송할 수 있는 교차 플랫폼 메시징 솔루션입니다.

클라우드 메세지 서비스를 통해서 메세지를 전달하게 되면, 사용들이 서버에 접속하고 있지 않은 상황에서도 실시간으로 메세지를 받을 수 있게 됩니다.

실제 GOLFANI의 서버가 아닌 파이어베이스의 클라우드 메시징 서버를 사용하여 메세지를 전달합니다.

알림 구현

먼저, 전체적인 과정을 먼저 보게 되면

1) 유저가 로그인된 상태이면 FCM 토큰을 발급받습니다.
2) 해당 유저ID를 기반으로 발급받은 토큰을 FCM GROUP에 등록합니다.
3) 알람을 보내는 액션을 하게되면 FCM을통해 알림을 전송합니다.
4) FCM을 통해 메세지를 받으면 Notification API를 통해 알림을 보여줍니다.

- 서비스 워커를 등록해 백그라운드 상태에서도 메세지를 받을수 있도록 합니다.

이러한 과정을 통해 알림을 보여주게 됩니다.

아래는 대략적인 코드입니다.

// _app.tsx
useEffect(() => {
    if(로그인) {
        // 모바일 브라우저에서는 FCM 제공X
        if(!isMobile()) {
            // 유저들의 FCM 알림을 위해 권한요청을 강요!
            checkPermission();
            // FCM 토큰 얻기
            fcm.onGetToken();
        }
    }
}, []);

const onGetToken = () => {
    const message = getMessaging();
    // FCM 메세지를 받을 경우 동작하는 함수입니다.
    onMessage(message, (payload) => {
        const notification = new Notification(payload.notification?.title!, {body: payload.notification?.body});
    });
    // 토큰을 받아오는 로직입니다.
    getToken(message, {vapidKey: process.env.NEXT_PUBLIC_VAPID_KEY}).then(async (currentToken) => {
        if (currentToken) {
            try {
                // 그룹관리를 위해 실행하는 로직
                await manageNotificationGroup(currentToken);
            } catch (e) {
                //
            }
        } else {
            //
        }
    }).catch((err) => {
        //
    });
}

이때, 고려해야 할 사항들이 존재하는대요.

Noticication API를 사용하기 위해서는 브라우저 알림 권한을 받아야합니다.
같은 사용자가 여러 디바이스에서 로그인 할 수 있기 때문에 FCM 토큰으로 메세지를 전송하면 안된다.

1. 브라우저 알림 권한 받기

위 과정 중 1)번 과정에서 FCM토큰을 발급받을 때, 브라우저 알림 권한을 물어본 후 권한을 수락하면 FCM토큰을 발급받고, 거절하면 발급받지 않는 로직으로 기능을 만들었습니다.

FCM의 getToken() 함수를 이용하면 권한과 함께 토큰을 발급받을 수 있습니다.

또, FCM 토큰 발급받기 전 권한을 강요하여 사용자들의 FCM 을 이용한 알림 서비스를 받을 수 있도록 하였습니다.

2. 여러 디바이스 처리

메세지를 FCM 토큰으로 전송하게 되면, 마지막으로 로그인한 디바이스에서만 메세지를 받을 수 있습니다.
여러 디바이스에서 동시에 메세지를 받기 위해서 FCM GROUP을 이용하여 진행하였습니다.

유저들의 ID를 그룹명으로 하여, 각 디바이스에서 얻은 FCM 토큰을 등록하였습니다.
실제로 메세지를 보낼 때에는, FCM TOKEN이 아니라 해당 그룹으로 메세지를 보내게 됩니다.

그러면, 그룹에 해당하는 모든 FCM TOKEN에 메세지가 발송되게 됩니다.

1) 로그인 시, FCM 토큰 발급

2) 해당 유저에 대해 만들어진 그룹이 없으면 그룹 생성 후 발급받은 토큰 등록

3) 그룹이 있으면, 발급받은 토큰이 그룹에 등록되어 있지 않으면 토큰 등록

fcm_token

마무리

알람서비스에 FCM을 도입하게 되면서, 유저들은 백그라운드 상태에서도 알림을 받을수 있게 되었습니다.

소켓으로 알람서비스를 구현하는거에 비해, FCM은 공식 문서만 잘따라가면 쉽게 기능을 구현 할 수 있습니다.