Subscriptionで簡単プッシュ通知(Vue 3サンプル)

Supabaseにはデータの変更を監視するSubscribeという機能があります。それを使用するためにSupabaseで設定が必要です。

SupabaseのReplication設定

Supabaseの管理画面を開きまます。そして左のメニューからデータベースをクリックし、メニューからReplicationを選びます。

表示されるデータベースのリストの右側に、ここでは「0 tables」と書かれています。レプリケーション設定が済んだテーブルな無いことを示しています。それでこの部分、「0 tables」を押します。

すでに作ってあるテーブルが表示されています（このサンプルでは「scoreboard」というテーブル）。監視したいテーブルのトグルスイッチをオンにします。

これでこのテーブルを監視するためのレプリケーションの設定ができました。こうすることで、SupabaseのSubscribeが使用できます。

Subscriptionで通知を受け取る

サンプルを見てみましょう。このような感じでVueファイルを書きます。<script>タグの中の、methodsを定義しているところを探します。

この下に関数を追加しましょう。

  methods: {
     subscribeUpdateMessage() {
       supabase
           .from("test")
           .on("*", ({ new: newMessage }) => {
             console.log("new newMessage.session_id " + newMessage.session_id )
             console.log("old session_id " + this.sessionId )
             }
           })
           .subscribe();
     },

データベース監視関数の中身

難しいことをしているように見えますが、実際にはそうでもありません。実際にはこのような単純な作りになっています。

  subscribeUpdateMessage() {
    supabase.from("test")
        .on("*", ({ new: newMessage }) => {
          　＜ここにデータの変更があったときの処理が書いてある＞　
        }).subscribe();
  },

subscribeUpdateMessage()という関数名は何でも良いものです。

supabase.from("test")のところでは「test」というテーブルを監視しています。

onのところで変化が生じたときにデータベースからのデータ一式を「newMessage」で受け取っています。これはデータベースのレコードと同じです。

最後にonに対してsubscribeしています。こうすることでデータベースを監視し、変化があった場合のデータを処理することができるのです。

subscribeUpdateMessage()のマウント

さてここまでやってきたことは、subscribeUpdateMessageという関数を定義するということでした。このままではどこからの呼び出されないので、これをマウントする必要があります。

  mounted() {
    this.subscribeUpdateMessage()　＜　追加
  },

mounted()にthis.subscribeUpdateMessage()を追加します。

こうすることで、ページがロードしたときにSubscribeによるデータベースの監視がスタートします。その後はずっと監視しているので、一度呼び出したら放っておいて大丈夫です。

Unsubcribe

このままでも十分に機能するのですが、最後にUnsubscribeもセットしておきましょう。
一度セットしたSubscribeがずっと監視し続けることになりますので、Unsubscribeも仕込んでおきましょう。使わなくなったら外しておきましょう。先程subscribeUpdateMessage()を定義したmethodsに、このような関数も加えます。この関数名は自由につけることができます。

  unsubscribeMessage() {
    supabase.removeAllSubscriptions();
  },

そして呼び出すタイミングですが、これまでのようにmounted()ではいきなりデータベースの監視が解けてしまいます。同じような考え方で、beforeUnmount()というのを定義できますので、その中に書きましょう。

  beforeUnmount() {
    this.unsubscribeMessage()　
  },

こうすることでアプリケーションが使用されなくなるタイミングでSupabaseとの監視も切ることができます。