Firebase Realtime Databaseでチャット機能を爆速開発する




どうも高妻です。Twitterでプログラミングのことや暗号通貨のことをつぶやいているのでよかったらフォローしてください。  

Firebase Realtime Databaseとは

Firebase Realtime Database はクラウドでホスティングされるデータベースです。データは JSON として保存され、接続されているすべてのクライアントとリアルタイムで同期されます。iOS、Android、JavaScript SDK を使用してクロスプラットフォーム アプリを構築した場合、すべてのクライアントが、1 つの Realtime Database インスタンスを共有して、最新のデータによる更新を自動的に受信します。

クライアントから直接アクセスできて、データの変更をリアルタイムで受け取って状態を反映させることができる良いう優れものです!最近だとFirebase Realtime Databaseの上位互換となるCloud Firestoreというものがリリースされています。

初めて触るのでとりあえずFirebaseから順番に触ってみたいと思います!

主な機能

この機能の中でも特にすごいなと思ったのがオフライン機能ですね。アプリでSDKを使った時だけだと思いますが、端末がオフライン中にデータ更新をした場合、ローカルディスクに永続化してオンラインになった時に差分をデータベースに更新してくれる機能です。

差分更新で問題が出ないかきになるところですが、UX的によくなりそうですね!

チャット開発

それではFirebase Realtime Databaseを使ってチャットを開発していきます。まずはGCPのコンソール上でプロジェクトを作成します。

Firebase Realtime Databaseを作成

Firebaseのコンソールにアクセスしてプロジェクトを作成します。

https://console.firebase.google.com/

サイドメニューからDatabaseを選択し、Realtime Databaseのデータベースを作成します。

モードは簡単に読み書きできるようにテストモードで実行します。

これだけでFirebase Realtime Databaseの作成が完了します。簡単ですね!

クライアントの実装

WEBブラウザからアクセスするためのプログラムを書きます。メッセージの読み込みと書き込みだけなので下記のようになります。

最初に読み込んでいるfirebase-app.jsは必須のスクリプトになります。次に読み込んでいるfirebase-database.jsがRealtime Database用のスクリプトになります。initializeAppに設定する値はプロジェクトのトップから取得できます。

下記1行でコレクションに対して出たを登録したり、変更のイベントを取得できるようになります。

メッセージの受信はchild_addedイベントから取得します。

メッセージの送信はpush関数を使ってデータベースに登録します。

dockerでnginxを起動

Firebaseはlocalhostか指定したドメインからしかアクセスできないのでnginxを使ってサーバを立てます。下記docker-compose.ymlを同じディレクトリに準備します。

下記コマンドでdockerを起動できたらhttp://localhost:8080にアクセスします。

複数タブを開いてリアルタイムにメッセージのやりとりが確認できたら完成です。

Firebaseのコンソールからも同様にデータが確認できます。

The following two tabs change content below.

高妻智一

2013年CyberAgent新卒入社 スマホゲームを作る子会社に所属し、サーバーサイドのエンジニアを担当。2年目の終わりから新規子会社の立ち上げに参加し、サーバーサイドのエンジニアリーダーとしてサービースのリリースから運用までを担当。 現在はTwitterなどSNSのテキスト解析を行うソーシャルメディア分析のサーバーサイドを開発中。言語はNode.js、Kotlinを使用。






よく読まれている関連記事はこちら



コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です