はじめに
Supabaseのリアルタイム通信の方法を学習していた際に、SupabaseのUIが変更されていたため、リアルタイム通信を許可するREALTIME ENABLEのチェック欄が見つかりませんでした。
設定する際に、Supabaseについて調べること30分弱かかってしまったため、今後同じように困られる方を想像し、ここにリアルタイム通信の設定方法を示しておきます。
リアルタイム通信とは
アプリの画面でデータベースを通じて何か変更をした際に、違うタブで開いている同じアプリを開いていたとしても、自動で画面が更新されることです。
（例）PCでNotionの画面を更新→スマホでNotionの画面を見ると、変更がリアルタイムで更新されている
設定方法
- Supabaseにログインして、左のサイドバーからDatabase→TablesでDatabase Tablesを開く
設定をしていないと、以下のスクショの通り、REALTIME ENABLEが❌になっている。
2. 左のサイドバーの中にあるPublicationsを選択する
3. 上記の画面に遷移したら、リアルタイム通信を有効化したいテーブルを選択する
4. 以下の設定画面に遷移したら、リアルタイム通信を設定したいもののトグルをオンにする（今回で言うと、notesのテーブルを設定したかったので、notesを選択しています）
5. 最初の画面に戻ってREALTIME ENABLEDに✅がついていることを確認する
ちなみに昔のUIはこうだったらしい
Database Tablesの3点ボタンから編集できていたらしいが、今はない。。。
AIにも聞いたし、公式も読み漁ったが、なんとかたどり着けました。
終わりに
ちなみにもちろんですが、これだけではリアルタイム通信の設定は完了していません。
アプリとSupabaseを連携させるコードの記述も必要です。
useEffectの中に私は記述しました。
Supabase難しい。。。早く慣れたいところです。
※ 本記事ではUI上の設定までを扱います。
クライアント側（useEffectなど）での購読処理については、次回以降でまとめたいです。
この記事が役に立ったらLGTMお願いします！