Firebase Realtime Databaseを使って3分でチャットを開発する方法




どうも高妻です。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のコンソールからも同様にデータが確認できます。

まとめ

WEBでのチャット開発がものすごく簡単になったことが分かったと思います。Firesbaseを使うとチャット以外にもリアルタイムな要素をもったサービスを簡単に作れます。

Firestoreは他にもホスティング機能、Cloud Functions、Cloud Strageの機能があり、サービス開発を楽にしてくれるので是非試してみてください。

The following two tabs change content below.

高妻智一

2013年CyberAgent新卒入社 スマホゲームを作る子会社に所属し、サーバーサイドのエンジニアを担当。2年目の終わりから新規子会社の立ち上げに参加し、サーバーサイドのエンジニアリーダーとしてサービースのリリースから運用までを担当。 2018年仮想通貨のスマホウォレットを提供するGinco Incにブロックチェーンエンジニアとして入社。






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



2 件のコメント

  • 初めまして、私は現在日本の大学で学生をやっているものです。
    現代のコミュニティに興味があり、xcodeでアプリ開発をやっています。
    アプリを活用するにあたってfirebaseに目を付け、データベースの構築に現在取り組もうとしているのですが、様々な文献を頼りに学習を行ってもどうしても上手くアウトプット出来ませんでした。
    そんな中、このような記事を拝見させていただき、とても分かりやすく感じました。
    そこで、この記事と全く同じように操作を行い勉強を試みたく思い、もし差しさわりありませんでしたら。
    お使いになられていた「チャットアプリケーション」のデータを頂けませんでしょうか。

    大変失礼であるとは思いますが、お力添え頂けると大変嬉しいです。
    どうかよろしくお願い致します。

  • 三浦さんコメントありがとうございます。

    「チャットアプリケーション」のデータがプログラムの事でしたら「クライアントの実装」という項目だけなのでこの記事だけで完結できます。
    もしGCPの設定が分からないようでしたらまたコメントください!

  • コメントを残す

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