はじめに

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お願いします！