[Node.js] Push.js를 이용해 푸시 알림 띄우기

Node.js로 웹 앱을 만드는 마지막 기능으로 푸시 알림 기능을 넣어야 했다. FCM 자료를 찾아보는데 Device Token 값을 이용하는 예제만 무지하게 나와서 절망스러웠다.

그러다 Node.js 공식 도큐먼트의 Push.js 모듈을 찾았다. 그리고 생각보다 간단한 코드로 푸시 알림을 띄웠을 때는 정말 기뻤다 ..

• Push.js로 웹 푸시 알림 띄우기

'app.js'

npm install push.js --save var app = require('express')(); var server = require('http').Server(app); var io = require('socket.io')(server); server.listen(80); app.get('/', function (req, res) {   res.sendfile(__dirname + '/index.html'); }); io.on('connection', function (socket) {      socket.emit('pushNotification', { success: true, msg: 'hello' }); }); Colored by Color Scripter

cs

백엔드에서 해줘야 하는 작업이다. Push.js 사용을 위해 모듈을 설치해준다. express와 socket.io 모듈또한 msg 에 넣은 메세지가 푸시 알림에 출력될 메세지다.

다음으로 프론트에서도 코드를 작성해줘야 한다.

<script src="./push.min.js"></script> <!-- CDN link --> <script src="/socket.io/socket.io.js"></script> <script>   var socket = io.connect('http://localhost:3000');   socket.on('pushNotification', function (data) {     console.log(data);     Push.create("Hello world!", {         body: data.msg, //this should print "hello"         icon: '/icon.jpg',         timeout: 4000,         onClick: function () {             window.focus();             this.close();         }     });   }); </script> Colored by Color Scripter

cs

push.min.js 파일은 CDN 링크에서 다운받은 파일을 프로젝트 폴더에 직접 추가하거나 src에 다운로드 링크를 그대로 입력하는 방법이 있다. 

이 중 마음에 드는 것으로 사용하면 된다!

서버를 시작하고 해당 페이지에 들어가면 처음 들어갔을 때는 페이지의 알림 수신을 허용 할 지 묻는 팝업창이 뜨고, 허용을 누르면 그때부터 오른쪽 하단에 푸시 메세지가 출력된다. 구글의 Firebase를 사용하는 FCM 방식은 방법은 비슷하지만 다른 모듈을 사용해야 한다. 다음 포스트에서 다룰 것이다.

참고 

https://riptutorial.com/node-js/example/32616/web-notification