NCMB と Pusher で作る リアルタイムチャット

2018年02月28日に岡山で開催された Monaca UG OKAYAMA #1でのLT資料です。

https://monacaug.connpass.com/event/78703/

Transcript

1. PAGE DAY 2018/02/28 # MOONGIFT X / 30 NCMB と Pusher で作る リアルタイムチャット
2. PAGE X / 18 # MOONGIFT #MONACA_UG DAY 2018/02/16 自己紹介 @goofmint fb.me/goofmint 中津川 篤司 MOONGIFT 代表取締役 オープンソース・ソフトウェアを毎日紹介 https://www.moongift.jp/ Monaca UG メンバー ニフクラ mobile backend エバンジェリスト
3. PAGE # MOONGIFT X / 12 DAY 2018/02/28 NCMBとは？ BaaS@rakuzaみたいなもの
4. PAGE # MOONGIFT X / 12 DAY 2018/02/28 NCMBとは？ ニフクラ mobile backendの略 スマートフォンアプリに必要なバックエンド機能をまるっと提供 データストア/ファイルストア/プッシュ通知/会員管理/スクリプト 月間200万APIアクセス/200万プッシュ通知まで無料 IUUQNCDMPVEOJGUZDPN
5. PAGE X / 18 # MOONGIFT #MONACA_UG DAY 2018/02/16 デモ
6. PAGE # MOONGIFT X / 12 DAY 2018/02/28 今日の本題 Pusherすげー！
7. PAGE # MOONGIFT X / 12 DAY 2018/02/28 Pusherって？ リアルタイム通信プラットフォーム WebSocket/MQTT/REST API めっちゃ簡単に使える https://pusher.com
8. PAGE # MOONGIFT X / 12 DAY 2018/02/28 きっかけ •Firebaseが「一応」ライバル •Firebaseといえばリアルタイムチャット •いいなー
9. PAGE # MOONGIFT X / 12 DAY 2018/02/28 問題1 NCMBにはWebSocketなどのリアルタイム 通信機能がない！
10. PAGE # MOONGIFT X / 12 DAY 2018/02/28 l::::::::::::::::::|＿!::lヽ:::::::::ﾊ::::::::::::::::::::::::::::::::i､::!　ノ !:::::::::::::::::l-‐ｪ!;ﾄ ヽ:::::l ´!:::::::::::::::::::::::::::::l ｀　ヽ　　 幺ク　亡 月　|　　┼‐　.|] |] l:::::::::::::::::「（;;;)ヽ､__､::ﾚ'´ｌ:::::::::/l､:::::::::::::l　　 /　 　小巴　三l三. ヽ_ﾉ / こ　o o 　!:::::::::/l:::l＿_,,,rﾀ"ﾞ､;!)､__!::::/ノ 〉､::::::::l　　 ＼ 　 l::::/　lヽ!　　　　_　_　　 l;/´　 !　>､::l　　 ／　　NCMBに絶望した！！ 　ﾉノlヽ､_!　　　 r――‐┐　　 /_ノ:::|　　／ 　　　l::::::>､　　 ﾚ,二二ェ!　　/i:::::::::::l　　￣￣|＿　　　　 ／ヽ、　 /＼　　 /＼　　　 ／ 　　　l:::/ /::ヽ、 `ｰ-―-'　,ｨ'::::!＼:::::l　　　 （ヽ､/／＼／　　　＼/　　 ＼/　　 ＼／ 　　　ﾚ' ム-''´lヽ､　　_,,.／! ﾞヾ!＿_ヽ!　　　　ヽ´ヽ、ヽ 　　 　 　 　 　 !　 ￣ 　 　 レ;'´　　|　　（,ゝ、　＼ ヽ　l､ 　　　　　　　／|　＿,,.-／´　 ;;　.,,,-!　　ヽ､ ヽ、　|　|　! l 　　　　　　/ 斤'"〇 /´　　　 ,;;:''" _,l_　　　ヽ　ヽ/　 l　| l 　　　　　/;　l､」＿,,/　　　　 '' ﾞ;;／　 ヽ､　　 〉　 ｀ヽ　 l/ 　 　 ／!,r''´!/　 /　　　　　';,/"ﾞ''':;,,,,;;'' ＼ /　　　　　,! 　 　/　l ,;;　 |l　 /`'';, ,,　　 /　　 ,;;''"ﾞ''　　 l　　　　　/
11. PAGE # MOONGIFT X / 12 DAY 2018/02/28 lllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllll llllllllllllllllllllllllll／￣￣ヽlllllllllllllllllllllllllllllllllllllllllll lllllllllllllllllllll /　　　　　　ヽllllllllllllllllllllllllllllllllllllll iiiiiiiiiiiiiiiiiiiiii　 試 そ あ　.iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii iiiiiiiiiiiiiiiiiiiii|　 合 こ き　 |iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii ;;;;;;;;;;;;;;;;;;;;;|　 終 で ら　 |;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;;;;;;;;;;;;;;;;;;;;;|　 了　　め　 |;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;:;:;:;:;:;:;:;:;:;:;|　 だ　　.た　 |:;:;:;:;:;:;:;:;:;:;:;:;:;:;:;:;:;:;: ;:;:;:;:;:;:;:;:;:;:;|　 よ 　　ら　 |:;:;:;:;:;:;:;:;:;:;:;:;:;:;:;:;:;:;: :.:.:.:.:.:.:.:.:.:.:ヽ、　　　　　 /.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.: :. :. :. :. :. :. :. :. ‐‐--‐‐':. :. :. :. :. :. :. :. :. :. :. :. : : : : : : : : : : : : : : : : : : : : : : : :　,.‐- 、 : : : : 　　　　　　　　　　　　　　　　　　廴ﾐﾉ 　　　　　　　　　　　　　　　　　／//¨' ､ 　　　　　　　　　　　　　　　　 y':;:;:;:/⌒i! 　　　　　　　　　　　　　　　　⑪:;:;:;:;};:;:/;}, 　　　　　　;il||||li'　　　　　　　t`'---‐';:;:;:l 　　　　 ,.r'"''､,┘　　　　　　　 7;:;:;:;:;:;:;:;「 　　　　ﾉ4　(⌒i　　　　　　　　.}:;:;:;:;:;:;;/ 　　　/..,__彡{, |　　　　　　　　　`i:;:;:;:;:;} 　　 （　　.ミi!} l､　　　　　　　　　.」:;:;:丿 　　ｸｭ二二`Lっ)　　　　　　　　`==='
12. PAGE # MOONGIFT X / 12 DAY 2018/02/28 WebScoketがないならPusherを使えばいいじゃない
13. PAGE # MOONGIFT X / 12 DAY 2018/02/28 使ってみる Pusher イベント購読 データ投稿 NCMB REST API 通知
14. PAGE # MOONGIFT X / 12 DAY 2018/02/28 画面 <ons-page id="login"> <div class="join-area" style="text-align: center; margin-top: 30px;"> <h4>チャットルームにログインしてください</h4> <p> <ons-input id="userName" modifier="underbar" placeholder="ユーザ名" float> </ons-input><br /> <ons-input id="chatId" modifier="underbar" placeholder="chatId" float>
 </ons-input> </p> <p style="margin-top: 30px;"> <ons-button onclick="join()">Join</ons-button> </p> </div> </ons-page>
15. PAGE # MOONGIFT X / 12 DAY 2018/02/28
16. PAGE # MOONGIFT X / 12 DAY 2018/02/28 チャット画面 <ons-page id="chat"> <ons-toolbar> <div class=“left"> <ons-back-button>Back</ons-back-button> </div> <div class="center"></div> </ons-toolbar> <input type="hidden" id="channelId" /> <div class="chat-area"> <ons-list id="chats"></ons-list> </div> <div class="send-area"> <ons-input id="message" placeholder="メッセージ">
 </ons-input> <ons-button onclick="send()" modifier="quiet">
 送信 </ons-button> </div> </ons-page>
17. PAGE # MOONGIFT X / 12 DAY 2018/02/28
18. PAGE # MOONGIFT X / 12 DAY 2018/02/28 Pusher/NCMBの初期化 let pusher; let ncmb; const pusherId = 'YOUR_PUSHER_ID'; const applicationKey = 'YOUR_APPLICATION_KEY'; const clientKey = 'YOUR_CLIENT_KEY'; // グローバル変数の処理 ons.ready(function() { pusher = new Pusher(pusherId, { encrypted: true }); ncmb = new NCMB(applicationKey, clientKey); });
19. PAGE # MOONGIFT X / 12 DAY 2018/02/28 Pusherの購読 // Pusherに接続する処理 const connectPusher = (userName, chatId) => { const channel = pusher.subscribe(chatId); channel.bind('message',(data) => { showChat(userName, data); }); };
20. PAGE # MOONGIFT X / 12 DAY 2018/02/28 データ投稿 & Pusherへの通知 Pusher イベント購読 データ投稿 NCMB REST API 通知
21. PAGE # MOONGIFT X / 12 DAY 2018/02/28 問題2 NCMBにはWebhook的な 仕組みがない！
22. PAGE # MOONGIFT X / 12 DAY 2018/02/28 l::::::::::::::::::|＿!::lヽ:::::::::ﾊ::::::::::::::::::::::::::::::::i､::!　ノ !:::::::::::::::::l-‐ｪ!;ﾄ ヽ:::::l ´!:::::::::::::::::::::::::::::l ｀　ヽ　　 幺ク　亡 月　|　　┼‐　.|] |] l:::::::::::::::::「（;;;)ヽ､__､::ﾚ'´ｌ:::::::::/l､:::::::::::::l　　 /　 　小巴　三l三. ヽ_ﾉ / こ　o o 　!:::::::::/l:::l＿_,,,rﾀ"ﾞ､;!)､__!::::/ノ 〉､::::::::l　　 ＼ 　 l::::/　lヽ!　　　　_　_　　 l;/´　 !　>､::l　　 ／　　NCMBに絶望した！！ 　ﾉノlヽ､_!　　　 r――‐┐　　 /_ノ:::|　　／ 　　　l::::::>､　　 ﾚ,二二ェ!　　/i:::::::::::l　　￣￣|＿　　　　 ／ヽ、　 /＼　　 /＼　　　 ／ 　　　l:::/ /::ヽ、 `ｰ-―-'　,ｨ'::::!＼:::::l　　　 （ヽ､/／＼／　　　＼/　　 ＼/　　 ＼／ 　　　ﾚ' ム-''´lヽ､　　_,,.／! ﾞヾ!＿_ヽ!　　　　ヽ´ヽ、ヽ 　　 　 　 　 　 !　 ￣ 　 　 レ;'´　　|　　（,ゝ、　＼ ヽ　l､ 　　　　　　　／|　＿,,.-／´　 ;;　.,,,-!　　ヽ､ ヽ、　|　|　! l 　　　　　　/ 斤'"〇 /´　　　 ,;;:''" _,l_　　　ヽ　ヽ/　 l　| l 　　　　　/;　l､」＿,,/　　　　 '' ﾞ;;／　 ヽ､　　 〉　 ｀ヽ　 l/ 　 　 ／!,r''´!/　 /　　　　　';,/"ﾞ''':;,,,,;;'' ＼ /　　　　　,! 　 　/　l ,;;　 |l　 /`'';, ,,　　 /　　 ,;;''"ﾞ''　　 l　　　　　/
23. PAGE # MOONGIFT X / 12 DAY 2018/02/28 lllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllll llllllllllllllllllllllllll／￣￣ヽlllllllllllllllllllllllllllllllllllllllllll lllllllllllllllllllll /　　　　　　ヽllllllllllllllllllllllllllllllllllllll iiiiiiiiiiiiiiiiiiiiii　 試 そ あ　.iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii iiiiiiiiiiiiiiiiiiiii|　 合 こ き　 |iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii ;;;;;;;;;;;;;;;;;;;;;|　 終 で ら　 |;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;;;;;;;;;;;;;;;;;;;;;|　 了　　め　 |;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;:;:;:;:;:;:;:;:;:;:;|　 だ　　.た　 |:;:;:;:;:;:;:;:;:;:;:;:;:;:;:;:;:;:;: ;:;:;:;:;:;:;:;:;:;:;|　 よ 　　ら　 |:;:;:;:;:;:;:;:;:;:;:;:;:;:;:;:;:;:;: :.:.:.:.:.:.:.:.:.:.:ヽ、　　　　　 /.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.: :. :. :. :. :. :. :. :. ‐‐--‐‐':. :. :. :. :. :. :. :. :. :. :. :. : : : : : : : : : : : : : : : : : : : : : : : :　,.‐- 、 : : : : 　　　　　　　　　　　　　　　　　　廴ﾐﾉ 　　　　　　　　　　　　　　　　　／//¨' ､ 　　　　　　　　　　　　　　　　 y':;:;:;:/⌒i! 　　　　　　　　　　　　　　　　⑪:;:;:;:;};:;:/;}, 　　　　　　;il||||li'　　　　　　　t`'---‐';:;:;:l 　　　　 ,.r'"''､,┘　　　　　　　 7;:;:;:;:;:;:;:;「 　　　　ﾉ4　(⌒i　　　　　　　　.}:;:;:;:;:;:;;/ 　　　/..,__彡{, |　　　　　　　　　`i:;:;:;:;:;} 　　 （　　.ミi!} l､　　　　　　　　　.」:;:;:丿 　　ｸｭ二二`Lっ)　　　　　　　　`==='
24. PAGE # MOONGIFT X / 12 DAY 2018/02/28 Webhookがないならスクリプトを使えばいいじゃない
25. PAGE # MOONGIFT X / 12 DAY 2018/02/28 スクリプトで乗り越える スクリプト：NCMB上に置けるJavaScript （Node.js） データ登録 & Pusher への通知を一緒に行う
26. PAGE # MOONGIFT X / 12 DAY 2018/02/28 問題3 スクリプトでは任意のライブラリを取り 込めない！
 Pusherには専用ライブラリがあるのに！
27. PAGE # MOONGIFT X / 12 DAY 2018/02/28 l::::::::::::::::::|＿!::lヽ:::::::::ﾊ::::::::::::::::::::::::::::::::i､::!　ノ !:::::::::::::::::l-‐ｪ!;ﾄ ヽ:::::l ´!:::::::::::::::::::::::::::::l ｀　ヽ　　 幺ク　亡 月　|　　┼‐　.|] |] l:::::::::::::::::「（;;;)ヽ､__､::ﾚ'´ｌ:::::::::/l､:::::::::::::l　　 /　 　小巴　三l三. ヽ_ﾉ / こ　o o 　!:::::::::/l:::l＿_,,,rﾀ"ﾞ､;!)､__!::::/ノ 〉､::::::::l　　 ＼ 　 l::::/　lヽ!　　　　_　_　　 l;/´　 !　>､::l　　 ／　　NCMBに絶望した！！ 　ﾉノlヽ､_!　　　 r――‐┐　　 /_ノ:::|　　／ 　　　l::::::>､　　 ﾚ,二二ェ!　　/i:::::::::::l　　￣￣|＿　　　　 ／ヽ、　 /＼　　 /＼　　　 ／ 　　　l:::/ /::ヽ、 `ｰ-―-'　,ｨ'::::!＼:::::l　　　 （ヽ､/／＼／　　　＼/　　 ＼/　　 ＼／ 　　　ﾚ' ム-''´lヽ､　　_,,.／! ﾞヾ!＿_ヽ!　　　　ヽ´ヽ、ヽ 　　 　 　 　 　 !　 ￣ 　 　 レ;'´　　|　　（,ゝ、　＼ ヽ　l､ 　　　　　　　／|　＿,,.-／´　 ;;　.,,,-!　　ヽ､ ヽ、　|　|　! l 　　　　　　/ 斤'"〇 /´　　　 ,;;:''" _,l_　　　ヽ　ヽ/　 l　| l 　　　　　/;　l､」＿,,/　　　　 '' ﾞ;;／　 ヽ､　　 〉　 ｀ヽ　 l/ 　 　 ／!,r''´!/　 /　　　　　';,/"ﾞ''':;,,,,;;'' ＼ /　　　　　,! 　 　/　l ,;;　 |l　 /`'';, ,,　　 /　　 ,;;''"ﾞ''　　 l　　　　　/
28. PAGE # MOONGIFT X / 12 DAY 2018/02/28 lllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllll llllllllllllllllllllllllll／￣￣ヽlllllllllllllllllllllllllllllllllllllllllll lllllllllllllllllllll /　　　　　　ヽllllllllllllllllllllllllllllllllllllll iiiiiiiiiiiiiiiiiiiiii　 試 そ あ　.iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii iiiiiiiiiiiiiiiiiiiii|　 合 こ き　 |iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii ;;;;;;;;;;;;;;;;;;;;;|　 終 で ら　 |;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;;;;;;;;;;;;;;;;;;;;;|　 了　　め　 |;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;:;:;:;:;:;:;:;:;:;:;|　 だ　　.た　 |:;:;:;:;:;:;:;:;:;:;:;:;:;:;:;:;:;:;: ;:;:;:;:;:;:;:;:;:;:;|　 よ 　　ら　 |:;:;:;:;:;:;:;:;:;:;:;:;:;:;:;:;:;:;: :.:.:.:.:.:.:.:.:.:.:ヽ、　　　　　 /.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.: :. :. :. :. :. :. :. :. ‐‐--‐‐':. :. :. :. :. :. :. :. :. :. :. :. : : : : : : : : : : : : : : : : : : : : : : : :　,.‐- 、 : : : : 　　　　　　　　　　　　　　　　　　廴ﾐﾉ 　　　　　　　　　　　　　　　　　／//¨' ､ 　　　　　　　　　　　　　　　　 y':;:;:;:/⌒i! 　　　　　　　　　　　　　　　　⑪:;:;:;:;};:;:/;}, 　　　　　　;il||||li'　　　　　　　t`'---‐';:;:;:l 　　　　 ,.r'"''､,┘　　　　　　　 7;:;:;:;:;:;:;:;「 　　　　ﾉ4　(⌒i　　　　　　　　.}:;:;:;:;:;:;;/ 　　　/..,__彡{, |　　　　　　　　　`i:;:;:;:;:;} 　　 （　　.ミi!} l､　　　　　　　　　.」:;:;:丿 　　ｸｭ二二`Lっ)　　　　　　　　`==='
29. PAGE # MOONGIFT X / 12 DAY 2018/02/28 ライブラリが使えないなら自作すればいいじゃない
30. PAGE # MOONGIFT X / 12 DAY 2018/02/28 var Pusher = require('pusher'); var pusher = new Pusher({ appId: '148932', key: '443a8868e3321344be81', secret: 'fc4056e7e6cb5610a212', encrypted: true }); pusher.trigger('my-channel', 'my-event', { "message": "hello world" });
31. PAGE # MOONGIFT X / 12 DAY 2018/02/28 const sendPusher = (authKey, secretKey, appId, body) => { const authTimestamp = Date.now() / 1000; const authVersion = '1.0'; const medhod = 'POST'; const path = `/apps/${appId}/events`; const message = { data: JSON.stringify({ userName: body.userName, message: body.message }), name: "message", channel: body.channel }; const bodyMd5 = crypto .createHash('md5') .update(JSON.stringify(message)) .digest('hex'); const queryString = `auth_key=${authKey}& auth_timestamp=${authTimestamp}&auth_version=${authVersion}&body_md5=${bodyMd5}`; const authSigning = [ medhod, path, queryString ].join("\n"); const signature = crypto .createHmac("SHA256", secretKey) .update(authSigning) .digest("hex"); return request .post(`https://api.pusherapp.com${path}?${queryString}&auth_signature=${signature}`) .set('Content-Type', 'application/json') .send(JSON.stringify(message)) }
32. PAGE # MOONGIFT X / 12 DAY 2018/02/28 結論 NCMBはBaaS@rakuzaみたいなもの Pusherいいよ！ Firebaseいいなぁ… NCMBにもWebSocket機能欲しい！ NCMBにイベントトリガー機能欲しい！ 詳細はブログで！ http://blog.mbaas.nifcloud.com