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に無料枠を作ってある前提で話を進めます

1. ログインしてDashboardにアクセス

2. New Projectで新規プロジェクトを作成(NameとPasswordは適当に)

3. .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
  

4. .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