knaka Tech-Blog

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

Laravel 5.8 + firebase Cloud Messaging で、web push通知対応の チャット機能の作成

前のLaravel 関係で
firebase Cloud Messaging, Notification API 等で web push通知対応の
チャット機能の作成となります。

参考のコード

github.com

画面

・通知
 メンバーからの、通知ポップアップと。着信音が出力されます

f:id:knaka0209:20200119171018p:plain

・チャットの画面
dbに、メッセージを保存しておき。
過去の投稿も表示可能です。

f:id:knaka0209:20200119171046p:plain

・チャット一覧
 ほぼCRUDですが、チャット作成、参加が可能
f:id:knaka0209:20200119171612p:plain

実装など

・ルーティング 、画面や API

Route::get('/chats/add_member', 'ChatsController@add_member')->name('chats.add_member');
Route::resource('chats', 'ChatsController');
//
Auth::routes();
//
Route::get('/home', 'HomeController@index')->name('home');


/**************************************
 * API
 **************************************/
Route::prefix('api')->group(function(){
    Route::get('/apichats/get_post', 'ApiChatsController@get_post');
    Route::post('/apichats/update_token', 'ApiChatsController@update_token');
    Route::post('/apichats/update_post', 'ApiChatsController@update_post');
});

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

・Blade
チャット画面: chats/show.blade.php
https://github.com/kuc-arc-f/lara58a_6chat/blob/master/resources/views/chats/show.blade.php

・FCM(firebase Cloud Messaging) の設定や、
 鍵等の取得は、前のブログと同様です

参考のページ

Cloud Messaging の設定など
knaka0209.hatenablog.com

デモ

https://knaka0209.net/chats
ログイン必要です。