firebase

【Nuxt.js】開発ブログ:firebaseでチャットアプリ①

前置き

RDBを活かしてチャットでも作ろう!
と思い立ってやった系の記事です🐣💭
Cloud Firestoreばかり
使っていたので…。

そしてWebSocket, Socket.IOを使用すると
サーバー側の実装が大変です💥笑
ということで
使用したことのある
Firebase Realtime Database
にしました🎈🧸

いつもの丁寧な解説ではなく、
こんなこと調べて
こういう手順で試してみた
という内容です💡

まだ完全完成ではないです!
呟いたらリアルタイムで表示できる
という最低限のレベル。

Vuex使って、とか
超スマートな書き方はしていません✍️
でも最初から使った方が楽ですね絶対←
その辺を後々…。

firebaseで使用したのはrealtime databasefirebase hostingです。
realtime databaseを使用することで、dbが更新されるとすべてのクライアントのローカル情報を更新してくれるので、
サーバー側の実装は一切していません。

firebase hostingは静的コンテンツのデプロイサービスです。
今回のチャットはhtml、css、jsだけなので、静的コンテンツを無料でデプロイしてくれる機能を使用しました。

ゴリラチャット作りました

➡️ゴリラチャット面白いので
 やってみてください🦍 {ウホッ
 クソアプリアドベントカレンダー
 面白いです🤣

⬇️プロジェクトの作成方法や
 基本的なデータの追加、取得は
 こちらをご覧ください👀
【Nuxt.js】firebase導入編(RDB版):データの追加 取得をしよう

参考:
Firebaseでリアルタイムチャットを構築する
FirebaseとFRP Reactでチャット
【続】javascriptとhtmlだけ5分で作れるチャット!+ Firebaseを使ってWeb上に公開しちゃおう!
FirebaseのRealtime Databaseをざっくり使ってみる ~導入から取得編(保存に関しては編集中)~

そういえばLICEcapが
アプデの関係?で使えなくなりました、、、
PC画面を簡単に
gifにできるソフトほしいですね🤔


firebaseの使い方を確認

どうやらRDBにデータの追加をする
firebase.database().ref().child('message').push
内でon()メソッドを使うことにより
データ追加などの監視ができるらしいです👀ジーッ

公式ガイド: value イベントのリッスン

とりあえずやってみる

firebaseにpush、pushしたものを表示

ひとまずpushだけして、
たった今pushした物をcheck✅
画像は上から
firebaseRDB
console
ローカル表示です。

.on('value')の問題

とりあえずはできましたが、
ref().child("message")の中にある
自動生成されるランダムなid(?)を
どう指定するかの問題が出てきました。

まぁ、チャットするなら
メッセージを追加した後に
また全体のデータを
再取得すれば良いので
この部分は使わなくて良いし
豆知識くらいに思ってください…🤭笑

onの引数がvalueだと
データ全体を返してしまうようです。
ちなみにsnapshotのデータは
val()で取得しています。

コード

bodyというkeyは
ちょっと違うなと思ったので変えます🤔💦

.on('child_added')

value以外でchild_**が使えるようです。
データを追加した時に
そのデータを取得できれば良いので
child_addedにしてみました。
こうすることでmessageの表示が可能に!
message.messageって分かりにくいので
せめて複数にするとかにします…

FirebaseのRealtime Databaseをざっくり使ってみる ~導入から取得編(保存に関しては編集中)~


全てのmessageを取得

現状では
その場でつぶやいた
messageしか取得できません。
ということでRDB上にある
全てのmessageを取得していきます💫

APIはjson形式なので
取得はaxiosを使ってみます。

⬇️axiosの基礎はこちら
【Nuxt.js】axios導入編:かんたん・お手軽API通信

ちなみにjsonにすると
push()メソッドを使ってからの
child_addedが効かなくなるので
送信にはjsonが使えませんね。
でも追加したものだけを
取得することはしなくて良いので
豆知識な感じで…笑

ということで
on()メソッドを消え去り、
pushが成功したら
再取得するようにしました🌟
変数とかぐちゃぐちゃなので
整理しつつ、
Vuexに移行したり
自分が投稿者の時だけ
右に表示させるようにします♪


まとめ

on()を使わなくても良い
と気付くのに
時間がかかってしまいました🤣笑
最初に全体のコードをイメージするのって
本当に大事ですよね…

-firebase
-,

© 2024 aLiz Nuxt