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
720
RailsとFirebaseで作るリアルタイムチャット
Railsとfirebaseでどのようにリアルタイムチャットを作ったのかを話します。
moai
March 26, 2021
Tweet
Share
More Decks by moai
See All by moai
プロダクトビジョンから作る機能を落とし込む
ryosukeyamazaki
2
470
with コロナは支社でも成果が出しやすい
ryosukeyamazaki
1
160
自分らしいリーダーシップ
ryosukeyamazaki
2
2.6k
エンジニアが始めるUX(5分版)
ryosukeyamazaki
0
240
広く複雑なプロダクトの 高速キャッチアップに取り組む
ryosukeyamazaki
0
8.1k
エンジニアが始めるUX
ryosukeyamazaki
3
8.8k
Other Decks in Programming
See All in Programming
Ruby×iOSアプリ開発 ~共に歩んだエコシステムの物語~
temoki
0
320
GitHubとGitLabとAWS CodePipelineでCI/CDを組み比べてみた
satoshi256kbyte
4
240
AWS発のAIエディタKiroを使ってみた
iriikeita
1
190
Testing Trophyは叫ばない
toms74209200
0
880
AIコーディングAgentとの向き合い方
eycjur
0
270
AI Coding Agentのセキュリティリスク:PRの自己承認とメルカリの対策
s3h
0
230
Deep Dive into Kotlin Flow
jmatsu
1
350
1から理解するWeb Push
dora1998
7
1.9k
MCPでVibe Working。そして、結局はContext Eng(略)/ Working with Vibe on MCP And Context Eng
rkaga
5
2.3k
Android 16 × Jetpack Composeで縦書きテキストエディタを作ろう / Vertical Text Editor with Compose on Android 16
cc4966
2
230
Improving my own Ruby thereafter
sisshiki1969
1
160
機能追加とリーダー業務の類似性
rinchoku
2
1.3k
Featured
See All Featured
A Modern Web Designer's Workflow
chriscoyier
696
190k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
How to Think Like a Performance Engineer
csswizardry
26
1.9k
The World Runs on Bad Software
bkeepers
PRO
70
11k
Automating Front-end Workflow
addyosmani
1370
200k
Imperfection Machines: The Place of Print at Facebook
scottboms
268
13k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.6k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Six Lessons from altMBA
skipperchong
28
4k
Navigating Team Friction
lara
189
15k
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