RailsとFirebaseで作るリアルタイムチャット

Transcript

1. freee 株式会社
 freee Slide Format RailsとFirebaseで作るリアルタイムチャット


2. • freee株式会社所属
 • Engineer
 • 開発効率高めるのが好き
 • 趣味はrubocopの適用
 山崎遼介 moai


   Engineer
 2

3. 3 今日のゴール
 RailsとFirebaseで作るリアルタイムチャットの仕組みを紹介


4. 4 前提
 作りたい機能、技術stack


5. 5 プロジェクト管理freee
 • プロジェクトにまつわる業務を楽にしたい


6. 6 作るモチベーション
 • プロジェクトに関する情報を雑に記録する
 • 経営者 <-> プロジェクトマネージャー 間で気になったことを聞ける


7. 7 • 


8. 8 技術スタック：前提
 • Ruby on Rails
 • OpenApi
 • TypeScript


   • React


9. 9 課題


10. 10 リアルタイムのチャットをどう作るか？（ざっくり）
 • つまりはポーリングどうするの？
 ◦ ロングポーリング？ ◦ 世の中に有るイベントサブスクライブサービス使う？ ◦ Firebase？(NEW!)

11. 11 Firebase使う懸念は？
 • 個人情報はどこに置くのか？
 ◦ Firebaseに個人情報置く？ ◦ 置くとするとセキュリティはどう担保する？ • Railsとの連携はどうするのか？


    ◦ RailsとID連携？ 


12. 12 Firebase使う懸念は？
 • 個人情報はどこに置くのか？
 ◦ Firebaseに個人情報置く？ ◦ 置くとするとセキュリティはどう担保する？ • Railsとの連携はどうするのか？


    ◦ RailsとID連携？

13. 13 どうなったの？


14. 14 アーキテクチャざっくり
 Data Fetch 
 個人情報のやり取り
 Event Publish
 イベントが
 起こったことだけ


    を通知
 Event Subscribe
 イベントが
 起きたことだけを受 信
 新しい Event 有る？


15. 15 Rails側擬似コード
 class TimeLineMessage < ApplicationRecord after_create_commit -> { Gcp::Firestore.client.col('timeline_notifications').doc.set(

    identifier: "#{id}-timeline", created_at: Time.current ) } end


16. 16 firebaseのデータ


17. 17 JavaScript側擬似コード
 export const ChatContainer = (id) => { 2

    const [timelines, setTimeLines] = React.useState([]); const [latestId, setLatestId] = React.useState(0); 3 const reloadTimeline = (id) => { Api.fetchTimeline(setTimeLines); setLatestId(id);}; 4 const usePushNotification(reloadTimeline) = firestore 5 .collection('timeline_notifications').where('identifier', '==', "${id}-timeline") 6 .limit(1).nSnapshot(querySnapshot => { 7 if( querySnapshot.docs[0].id !== latestId ) reloadTimeline(querySnapshot.docs[0].id); 8 }); 9 React.useEffect(() => { usePushNotification(reloadTimeline) } ); 10 return (<Table rows={timelines} />); }

18. 18 良かったこと


19. 19 サブスクライブ処理はfirebaseにおまかせできた
 新しい Event 有る？
 ここはFirebase Client がやってくれる Data Fetch

    
 個人情報のやり取り
 Event Subscribe
 イベントが
 起きたことだけを受 信
 Event Publish
 イベントが
 起こったことだけ
 を通知


20. 20 フロント側の処理はここだけ
 export const ChatContainer = (id) => { 2

    const [timelines, setTimeLines] = React.useState([]); const [latestId, setLatestId] = React.useState(0); 3 const reloadTimeline = (id) => { Api.fetchTimeline(setTimeLines); setLatestId(id);}; 4 const usePushNotification(reloadTimeline) = firestore 5 .collection('timeline_notifications').where('identifier', '==', "${id}-timeline") 6 .limit(1).nSnapshot(querySnapshot => { 7 if( querySnapshot.docs[0].id !== latestId ) reloadTimeline(querySnapshot.docs[0].id); 8 }); 9 React.useEffect(() => { usePushNotification(reloadTimeline) } ); 10 return (<Table rows={timelines} />); }

21. 21 Firebaseには顧客情報置かなくて済んだ
 class TimeLineMessage after_create_commit -> { Gcp::Firestore.client.col('timeline_notifications').doc.set( identifier: "#{id}-timeline",

    created_at: Time.current ) } end
 通知イベントのみFirebaseに連携

22. 22 じつは


23. 23 社内で先行事例が
 • Takumi Ohashi@_tohashi による
 Firebaseを使ってチャット機能を作る先行事例があった
 


24. 24 まとめ


25. 25 まとめ
 • FirebaseをEvent通知だけに限定して使うのはめちゃ良い
 • Railsと一緒に使う場合もそんなに悪くない。
 ◦ ただ、ログイン連携は闇の気配。 


26. Firebaseはいいね


27. 27 EOF