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 Parser progress report 2025
yui_knk
1
440
速いWebフレームワークを作る
yusukebe
5
1.7k
Azure SRE Agentで運用は楽になるのか?
kkamegawa
0
2.1k
CloudflareのChat Agent Starter Kitで簡単!AIチャットボット構築
syumai
2
480
Updates on MLS on Ruby (and maybe more)
sylph01
1
180
GitHubとGitLabとAWS CodePipelineでCI/CDを組み比べてみた
satoshi256kbyte
4
220
AIでLINEスタンプを作ってみた
eycjur
1
230
請來的 AI Agent 同事們在寫程式時,怎麼用 pytest 去除各種幻想與盲點
keitheis
0
120
意外と簡単!?フロントエンドでパスキー認証を実現する WebAuthn
teamlab
PRO
2
740
rage against annotate_predecessor
junk0612
0
170
今から始めるClaude Code入門〜AIコーディングエージェントの歴史と導入〜
nokomoro3
0
110
AIコーディングAgentとの向き合い方
eycjur
0
270
Featured
See All Featured
Optimizing for Happiness
mojombo
379
70k
Visualization
eitanlees
148
16k
A Tale of Four Properties
chriscoyier
160
23k
Thoughts on Productivity
jonyablonski
70
4.8k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
920
A designer walks into a library…
pauljervisheath
207
24k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Producing Creativity
orderedlist
PRO
347
40k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.6k
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