Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
RailsとFirebaseで作るリアルタイムチャット
Search
moai
March 26, 2021
Programming
0
700
RailsとFirebaseで作るリアルタイムチャット
Railsとfirebaseでどのようにリアルタイムチャットを作ったのかを話します。
moai
March 26, 2021
Tweet
Share
More Decks by moai
See All by moai
プロダクトビジョンから作る機能を落とし込む
ryosukeyamazaki
2
460
with コロナは支社でも成果が出しやすい
ryosukeyamazaki
1
150
自分らしいリーダーシップ
ryosukeyamazaki
2
2.6k
エンジニアが始めるUX(5分版)
ryosukeyamazaki
0
240
広く複雑なプロダクトの 高速キャッチアップに取り組む
ryosukeyamazaki
0
8k
エンジニアが始めるUX
ryosukeyamazaki
3
8.7k
Other Decks in Programming
See All in Programming
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
530
XP, Testing and ninja testing
m_seki
3
200
ReadMoreTextView
fornewid
1
480
Java on Azure で LangGraph!
kohei3110
0
170
Hypervel - A Coroutine Framework for Laravel Artisans
albertcht
1
100
「Cursor/Devin全社導入の理想と現実」のその後
saitoryc
0
160
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
1
690
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
330
Julia という言語について (FP in Julia « SIDE: F ») for 関数型まつり2025
antimon2
3
980
Rubyでやりたい駆動開発 / Ruby driven development
chobishiba
1
440
Kotlin エンジニアへ送る:Swift 案件に参加させられる日に備えて~似てるけど色々違う Swift の仕様 / from Kotlin to Swift
lovee
1
260
WindowInsetsだってテストしたい
ryunen344
1
200
Featured
See All Featured
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
BBQ
matthewcrist
89
9.7k
Six Lessons from altMBA
skipperchong
28
3.8k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Scaling GitHub
holman
459
140k
The Pragmatic Product Professional
lauravandoore
35
6.7k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.3k
A designer walks into a library…
pauljervisheath
207
24k
How to train your dragon (web standard)
notwaldorf
94
6.1k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
5
210
Transcript
freee 株式会社 freee Slide Format RailsとFirebaseで作るリアルタイムチャット
• freee株式会社所属 • Engineer • 開発効率高めるのが好き • 趣味はrubocopの適用 山崎遼介 moai
Engineer 2
3 今日のゴール RailsとFirebaseで作るリアルタイムチャットの仕組みを紹介
4 前提 作りたい機能、技術stack
5 プロジェクト管理freee • プロジェクトにまつわる業務を楽にしたい
6 作るモチベーション • プロジェクトに関する情報を雑に記録する • 経営者 <-> プロジェクトマネージャー 間で気になったことを聞ける
7 •
8 技術スタック:前提 • Ruby on Rails • OpenApi • TypeScript
• React
9 課題
10 リアルタイムのチャットをどう作るか?(ざっくり) • つまりはポーリングどうするの? ◦ ロングポーリング? ◦ 世の中に有るイベントサブスクライブサービス使う? ◦ Firebase?(NEW!)
11 Firebase使う懸念は? • 個人情報はどこに置くのか? ◦ Firebaseに個人情報置く? ◦ 置くとするとセキュリティはどう担保する? • Railsとの連携はどうするのか?
◦ RailsとID連携?
12 Firebase使う懸念は? • 個人情報はどこに置くのか? ◦ Firebaseに個人情報置く? ◦ 置くとするとセキュリティはどう担保する? • Railsとの連携はどうするのか?
◦ RailsとID連携?
13 どうなったの?
14 アーキテクチャざっくり Data Fetch 個人情報のやり取り Event Publish イベントが 起こったことだけ
を通知 Event Subscribe イベントが 起きたことだけを受 信 新しい Event 有る?
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 firebaseのデータ
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 良かったこと
19 サブスクライブ処理はfirebaseにおまかせできた 新しい Event 有る? ここはFirebase Client がやってくれる Data Fetch
個人情報のやり取り Event Subscribe イベントが 起きたことだけを受 信 Event Publish イベントが 起こったことだけ を通知
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 Firebaseには顧客情報置かなくて済んだ class TimeLineMessage after_create_commit -> { Gcp::Firestore.client.col('timeline_notifications').doc.set( identifier: "#{id}-timeline",
created_at: Time.current ) } end 通知イベントのみFirebaseに連携
22 じつは
23 社内で先行事例が • Takumi Ohashi@_tohashi による Firebaseを使ってチャット機能を作る先行事例があった
24 まとめ
25 まとめ • FirebaseをEvent通知だけに限定して使うのはめちゃ良い • Railsと一緒に使う場合もそんなに悪くない。 ◦ ただ、ログイン連携は闇の気配。
Firebaseはいいね
27 EOF