リアルタイムチャットの実装

今回実装するアプリケーション

LocalStorage を利用したメモ帳アプリケーションでは,データを「ブラウザ」自体に保存する処理を実装した.

今回は更に発展させ,オンライン上にデータを保存する処理を実装し,リアルタイムに表示が更新されるチャットアプリケーションを実装する.

チャットアプリケーションのイメージ

このような動きを実装するために,Google が提供する「Firebase」を活用する.

Firebase(Cloud Firestore)とは

Firebase は、クライアントからアクセス可能なデータベースとして Firebase Realtime Database( 以下 Realtime Database)と Cloud Firestore の 2 つを用意しています.

Realtime Database は,リアルタイムでクライアント全体の状態を同期させる必要があるモバイルアプリ向けの効率的で低レイテンシなものです.

Realtime Database はクラウド上でホスティングされる NoSQL のデータベースです.データはすべてのクライアントにわたってリアルタイムに同期され、アプリがオフラインになっても利用可能です.クロスプラットフォームアプリを構築した場合でも,すべてのクライアン トが 1 つの Realtime Database を共有して,最新のデータへの更新を自動的に行います.またクライアントからも直接アクセスが可能なため自前のサーバなしで使えるデータベースとしても活用できます.

Cloud Firestore は,直感的な新しいデータモデルで,Realtime Database の性能をさらに向上しており,Realtime Database よりも豊かで高速なクエリとスケールを備えています.Cloud Firestore は 2017 年の Google I/O で発表されたプロダクトであり,2018 年 5 月現在はベータ版リリースです.

引用:WEB+DB PRESS vol.105 第 4 章(※2019 年 2 月より正式版として運用されています.)

つまり..?

  • サーバ上にデータを保存できる!
  • 保存したデータをリアルタイムに同期できる!
  • 異なるデバイスでもデータを共有可能!
    • PC とスマホでリアルタイムにデータを同期できる.
  • JavaScript のみで実装可能!
    • Swift, Go, Python など他の言語でも使用可!
データの保存場所データを使用できる範囲
LocalStorageブラウザ自分の PC(ブラウザ)
Firebaseオンライン上のサーバ同じアプリケーションを動かしている端末全て

Firebase を活用するにはアカウントやプロジェクトの準備が必要になるため,次項から進める.