🐘
SupabaseのRealtime機能をLaravelから利用する
Supabaseのリアルタイム機能をLaravelから利用しよう
ここではSupabaseで使えるリアルタイムにDBへの変更点を通知する機能を、LaravelとSvelteで使っていく方法を案内します👍
必要なもの
- Supabaseのアカウント（無料！）
- Laravelが動く環境（無料！）
- npm（無料！）
サンプルコードのセットアップ
下記の手順でセットアップ出来ます
git clone git@github.com: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
この記事が気に入ったらサポートしてね💕
Discussion