#[Firebase] FCM 푸시 메세지



이 글을 읽고 있는 당신!!!

FCM을 이용해 푸시 메세지를 보낸 적이 있는가?

완전 짱 신기함!!!!

쉽고

빠르게

대량 푸시를 하여

누군가에게 차단당할 수 있다!!!

ㅎㅎㅎ

장난이고

이번 주는 Firebase FCM 기능을 이용한 푸시 메세지를 포스팅하려 한다.


생각보다 간단하고 무료이므로

관심없는 이들도

재미삼아 만들어 보는 것도 좋을 듯하다.


작동원리를 간단히 설명하자면

당신의 컴퓨터에서 Firebase Cloud에 메세지를 보낸다.

당연히 메세지를 보낼 때

당신이 누구인지?, 누구에게 보낼 건지?, 메세지 내용 등

을 포함해서 보낸다.

그러면 Firebase가 해당 컴퓨터나 스마트폰에 푸시 메세지를 날려준다.


1. Firebase 계정만들기

Firebase FCM을 이용하므로 당연히 계정을 만들어야한다.

(무료 요금제 - Spark 요금제)


계정을 만들었으면 프로젝트를 추가한다.

위치는 대한민국이 있으니 설정하고 긍정적으로 체크하고 프로젝트를 만든다.


2. 푸시 메세지를 보내기 위한 정보 찾기

왼쪽 위의 설정버튼에서 프로젝트 설정을 클릭한다.



클라우드 메세징 탭을 보면

당신의 서버 키가 보일 것이다!!

이걸 복사하여 메모장에 잠시 가져다 놓자


다시 홈 화면으로 돌아오면

여기서 맨 오른쪽 거 </>라고 생긴 것을 클릭하자

이 버튼이 웹 앱에 Firebase를 추가하는 버튼이다.


그럼 다음과 같은 창이 뜰 것이다.

이것도 복사를 해 메모장에 일단 보관해놓자!


3. html 파일 만들기

html 파일을 만드는 이유는 토큰 값을 얻기 위해서다.

토큰 값은 쉽게 말해 바로 누구에게 보낼 지 알려주는 값이다.

나도 자세히는 모르지만

약간 주소 같은 느낌이 들었다.

주소를 알아야 택배 아저씨가 택배를 가져다 주니까...ㅎ


근데 스마트폰의 토큰 값은 바뀌지 않고

데스크 톱 토큰 값은 한번 껏다키니까 바뀌어 있었다.

이 부분에 대해서는 더 공부해야 할 듯 싶다(과연? ㅎ)


오늘 포스팅은 intellij로~

Web Application으로 프로젝트를 만든다.

아 !! 톰캣 꼭 설치되어 있어야 한다.


프로젝트를 만들고나면

아무 html 파일과 firebase-messaging-sw.js를 만들자!

(주의!) firebase-messaging-sw.js 이거 글자 틀리면 안된다!!


자바스크립트 파일(firebase-messaging-sw.js)은 다음과 같이 작성한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
importScripts('https://www.gstatic.com/firebasejs/4.8.1/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/4.8.1/firebase-messaging.js');
 
// Initialize Firebase
var config = {
  apiKey: "enter api key",
    authDomain: "test-4e9a6.firebaseapp.com",
    databaseURL: "https://test-4e9a6.firebaseio.com",
    projectId: "test-4e9a6",
    storageBucket: "test-4e9a6.appspot.com",
    messagingSenderId: "90275796882"
};
firebase.initializeApp(config);
 
const messaging = firebase.messaging();
messaging.setBackgroundMessageHandler(function(payload){
 
    const title = "Hello World";
    const options = {
            body: payload.data.status
    };
 
    return self.registration.showNotification(title,options);
});
cs


html 파일도 다음과 같이 작성한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
</head>
<body>
 
<h1 id="order"></h1>
 
<h1> 파이어 메세지</h1>
<script src="https://www.gstatic.com/firebasejs/5.5.9/firebase.js"></script>
<script>
    // Initialize Firebase
    var config = {
        apiKey: "API KEY를 넣어주세요~~~~~~~~~~~~~~~~~~~~~~~~",
        authDomain: "test-4e9a6.firebaseapp.com",
        databaseURL: "https://test-4e9a6.firebaseio.com",
        projectId: "test-4e9a6",
        storageBucket: "test-4e9a6.appspot.com",
        messagingSenderId: "90275796882"
    };
    firebase.initializeApp(config);
 
    const messaging = firebase.messaging();
 
    //token값 알아내기
    messaging.requestPermission()
        .then(function(){
            console.log("Have permission");
            return messaging.getToken();
        })
        .then(function(token){
            console.log(token);
        })
        .catch(function(arr){
            console.log("Error Occured");
        });
 
 
</script>
 
</body>
</html>
cs

apikey에 자신의 api key를 넣고

톰캣을 실행한다.

html 파일에 들어가면


다음과 같이 토큰값이 정상적으로 나오는 것을 확인할 수 있다.

이 토큰 값을 메모장에 옮겨놓는다.


4. 푸시 메세지 보내기

빨리 자고싶어서.....

메세지 보내는 html 파일 만들지는 않고

간단히 Restlet으로 해보려고 한다ㅎㅎ


Authorization에 서버 키를 넣고

"to" : 에는 토큰 값을 넣는다.


send 버튼을 누르면

겁나 빨리

푸시 메세지가 뜨는 것을 볼 수 있다.


친구에게 푸시 메세지를 보내고 싶다면

자신의 서버를 열어놔야 한다.


서버를 열어 해킹당할까봐 무섭다면

Firebase의 Hosting 서비스를 사용할 수 있다.


아까 만든 html과 js 파일을 hosting해놓고

친구가 호스팅 주소에 들어가 토큰 값을 알려준다면

당신은 그 친구에게 무한 푸시를 할 수 있다.


물론 차단하면 모든 노력은 물거품이 되지만... ㅎㅎ


안드로이드까지는 무리없이 웹으로 쉽게 푸시가 가능하다.

그러나 ios는 인증 과정을 거쳐야 해서 까다롭다.

역시 나는 안드로이드가 좋다.


언젠간...

Firebase FCM 푸시 메세지를 호스팅하는 글을 올려야 할 듯 싶다ㅎㅎ




To be continued.........




Made by 꿩












'Database > Firebase' 카테고리의 다른 글

[Firebase] FCM 푸시 메세지 - Notification  (2) 2019.01.06

+ Recent posts

티스토리툴바