LaravelからSupabaseでリアルタイム更新を楽しもう
これは何？
SupabaseのRealtime機能を使ってユーザのステータスをリアルタイムで確認可能なサンプルアプリです🤩
動きとしては、ログインしたセールス部隊が自分のステータス（フリー、顧客対応中、VIP対応中）をリアルタイムで共有する内容となっています📺
必要なもの
- Supabaseのアカウント（無料！）
- Laravelが動く環境（無料！）
- npm（無料！）
セットアップ
下記の手順でセットアップ出来ます
git clone [email protected]:askdkc/Realtime-SupaLaraSvelte.git
cd Realtime-SupaLaraSvelte
cp .env.example .env
composer install
npm i
.env用設定取得
Supabaseに無料枠を作ってある前提で話を進めます
ログインしてDashboardにアクセス
New Projectで新規プロジェクトを作成(NameとPasswordは適当に)
.envのDATABASE関係の情報を取得：Setting（左下の歯車） > Database の Connection info を参照
上記を参照に.envを下記のようにします
Before
DB_CONNECTION=pgsql DB_HOST="ここにProject Settings > Database SettingのHostのURLを入れる" DB_PORT=5432 DB_DATABASE=postgres DB_USERNAME=postgres DB_PASSWORD="自分でSupabaseに設定したパスワード"After (パスワードをmy-supa-secret-passwordにした場合)
DB_CONNECTION=pgsql DB_HOST=db.nymypvoodrylamygipip.supabase.co DB_PORT=5432 DB_DATABASE=postgres DB_USERNAME=postgres DB_PASSWORD=my-supa-secret-password
.envのVITE_SUPABASE関係の情報を取得：Setting（左下の歯車） > API の API Settings を参照
.envを下記のようにします
Before
VITE_SUPABASE_URL="ここにProject Settings>API>Project URLのhttps://xxx.supabase.coを入れる" VITE_SUPABASE_KEY="ここにProject Settings>API>Project API keysののanon publicのkeyを入れる"After
VITE_SUPABASE_URL=https://nymypvoodrylamygipip.supabase.co VITE_SUPABASE_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3Mi(省略)
Laravelでmigrationを実行します
php artisan migrate
SupabaseのTable editorにテーブルが作成されていることを確認します
テーブルに読み取り権限を付与します
手順としてはオフィシャルドキュメント通りです
SQL Editor からNew query > New blank queryをクリックします
次のSQLを実行します
alter table "users"
enable row level security;
create policy "Allow anonymous access"
on users
for select
to anon
using (true);
リアルタイム機能をONにする
Database > Table を開き、usersテーブルの設定をクリックします
Enable RealtimeをONにします
Laravelからユーザ作成し動作確認
Laravelを起動させて動作確認します
php artisan key:generate
npm run build
php artisan serve
http://127.0.0.1:8000 にアクセス
Registerをクリックしてユーザを作成します
ユーザ情報を適当に入力
画面上部のステータスボタンを押すとステータスが変わります
他のユーザも作ってログインしてみましょう
全ユーザとステータスが見えます
adminユーザの方もリアルタイムに新規ユーザの登録やステータス変更が分かります
動作GIF
