웹 실시간 알림(Firebase)(11/25~11/27)

 

Firebase 사용

https://console.firebase.google.com/?hl=ko

 

보통 웹은 실시간 알람을 잘 사용하지는 않음

-> 웹에서는 토큰을 받고 인증할 때 pc가 바뀔 수 있으므로 pc가 바뀌어 로그인하면 해당하는 pc에 대한 토큰으로 교체해줘야 함.(pc가 휴대폰처럼 하나만 사용하기에 고정되어 있지 않음)

 

프론트에서 알람을 생성하면 구글로 보내면 구글이 백으로 보내주고,

백에서 firebase(fcm cloud)에 테이블에 알람을 저장하고 알람(message로)을 보내면 firebase에서 알림을 프론트로 보내줌

 

firebase에서 앱 생성 후 프로젝트 설정 얻어오기

Front(react.js) - (11.26)

service worker 설정

 

firebase 앱을 생성하고 얻은 설정을 입력한다.

 

Jotai 세션 스토리지에서 사용할 fcm token과 알람 리스트를 추가한다.

 

App.js에서 useEffect를 사용해서 앱이 실행되자마자 service worker가 등록되고, fcm token을 얻어오도록 한다.(Jotai에 fcmToken 저장)

 

로그인 시

1. 로그인 요청(spring security 사용)

2. 로그인 성공 시 Jotai에 token 저장, 사용자 정보 요청(spring security 사용)

3. 사용자 정보 요청 성공 시 Jotai에 member 저장, fcm token 요청(firebase 사용)

4. fcm token 요청 성공 시 데이터베이스의 member에 fcmToken이 저장, 해당하는 storeCode의 알람 리스트 요청

5. 알람 리스트 요청 성공 시 Jotai에 alarms 저장

 

가맹점 헤더에 알람이 있으므로 Jotai의 알람 리스트를 얻어와서 설정해준다.

 

알람 개수 표시해주고, 알람 리스트를 모달 안에 보여준다.

 

 

Back(springboot)

build.gradle에 firebase 의존성 추가

 

resources에 firebase package 생성 후 키 추가

-> firebase 프로젝트 설정> 서비스 계정 > IAM 관리자에서 서비스 계정 > 키 관리 > 키 추가 > Json 파일 다운로드

 

FCMConfig 파일 추가 후 추가한 키를 입력해준다.

 

알람 리스트를 가져오려면 해당하는 storeCode가 필요하므로 로그인했을 때 member에 해당하는 Store를 모두 가져온 후 하나를 넣어준다.(member에 저장)

 

알람 Controller

 

알람 Service

 

 

결과

로그인 시 Jotai 세션스토리지에 알람 리스트와 fcm token이 들어간다.

 

알람 개수 표시됨

 

알람 아이콘 클릭 시 모달이 열리며 알람 리스트가 보인다.

체크 박스 클릭하면 알람은 사라지고, 데이터베이스에 alarmStatus가 true로 바뀌어 리스트에 보이지 않게 된다.

 

 

BackEnd에서 알림 생성 하기

Scheduler 사용

스케쥴러 활성화 하기

 

 

매일 오전 1시에 알람 데이터베이스에 생성하기

1. 유통기한이 3일 이하 남은 stock에 대한 알람 생성

 

2. 재고가 3개 이하 남은 stock에 대한 알람 생성

 

3. 주요 공지사항 등록 시 활성화되어 있는 모든 가맹점에 대한 알람 생성

 

결과

생성된 알람이 로그인 시 알람창에 뜬다.