knaka Tech-Blog

AI, IoT, DIYエレクトロニクス, データサイエンスについて投稿予定です。

Vue CLI+ Laravel 5.8で チャット作成、firebase Cloud Messaging対応 #Laravel #Vue.js #firebase #SPA #PWA

概要

前の 、クロスドメイン構成の
Vue-CLI + Laravel 関連となり。チャット機能の作成です

・会員制となり、Google認証で
 ログインに対応しています。
・PWAも対応しています
・ 前のLaravel版チャットを、Vue CLIに移植した形です

構成

PWA
firebase Cloud Messaging / FCM
Notification API
Vue CLI
vue-router
vue/cli-service : 4.4.0
API サービス:
Laravel 5.8
nginx
mysql
・フロント設置ドメイン ,Vue-CLI:
netlify / ホスティングサービス

参考のコード

github.com

デモのページ

https://code-kuc.netlify.app

ヘッダ部分> Chats で、開けます。
code-kuc.netlify.app

画面

・web push 受信時の、通知API で。タスクバー表示
f:id:knaka0209:20200619163540p:plain

・チャット画面、詳細
f:id:knaka0209:20200619163548p:plain

・一覧
左側に、参加チャットの表示
f:id:knaka0209:20200619163559p:plain

実装など

・package.json
https://github.com/kuc-arc-f/vue_spa3a_4chat/blob/master/package.json

・コントローラ
https://github.com/kuc-arc-f/lara58a/blob/master/app/Http/Controllers/ApiCrosChatsController.php

・web push / FCMの設定を、mixin に記載しました。鍵、送信者ID
https://github.com/kuc-arc-f/vue_spa3a_4chat/blob/master/src/mixin.js

                messagingSenderId: ' ',
                FCM_PublicVapidKey : " ",
                FCM_SERVER_KEY : " ",