Vue + supabaseを用いたリアルタイム購読

ねえ、私が何を話しているのかわからないのなら、読むべきです.
コンテキスト
私たちは、Vue + supabase(オープンソースFirebase選択肢)を使用して、Microblogを作成しました.今日はデータベースに挿入されるたびに新しい出版物を見せるつもりです.
私たちの出発点は、最後の記事で作成されたコードになりますrepository to view the source code .
Gitのメインブランチはmain , これから分岐を作成しますfeat/add-subscription ( you can access it here ), コマンドラインで次のコマンドを使用してこれを行うことができます.

// git clone [email protected]:ftonato/vue-supabase-microblog.git
// cd vue-supabase-microblog

git checkout -b feat/add-subscription

閲覧することによってdocumentation , 我々はどのように詳細にサブスクライブする方法を見つけることができます.
サブスクリプションは、データベース内のリアルタイムでの変更を監視するようです.これは、毎回イベント(INSERT , UPDATE , DELETE , * ) 我々は、機能をトリガすることができます.
例えば:

const mySubscription = supabase
  .from('*')
  .on('*', payload => {
    console.log('Change received!', payload)
  })
  .subscribe()

上の例では、私たちのアプリケーションに言います.「イベントが起こるたびに、テーブルが何であれ、ペイロード情報をconsole.log .
私たちがすることは、2つの異なった詳細を例に似ています.

我々は1つのテーブルからのみ見るposts ).

我々は、見ているだけですINSERT イベント.

我々の中でList.vue ファイルを作成しますsubscriptionPosts と方法subscribePosts .
このメソッドをビルドするときに呼び出しますmounted ) コンポーネントとその責任は次のようになります.

このテーブルに新しいレコードが挿入されるたびにposts 変数(出版物を格納するローカル変数).

以下のコードを実装します.

<template>
  <section class="px-2 pt-16 pb-6 bg-white md:px-0">
    <div class="container items-center max-w-6xl px-8 mx-auto xl:px-5">
      <template v-for="(post, index) in posts">
        <list-item
          :key="`post-${index}`"
          :id="post.id"
          :title="post.title"
          :description="post.description"
        />
      </template>
    </div>
  </section>
</template>

<script>
import ListItem from "./ListItem";
import DatabaseService from "../Database.service";

export default {
  name: "List",
  components: {
    ListItem,
  },
  data: () => ({
    posts: [],
    database: null,
    subscriptionPosts: undefined,
  }),
  created() {
    const database = new DatabaseService();
    this.database = database.getInstance();
  },
  async mounted() {
    await this.fetchPosts();
    this.subscribePosts();
  },
  methods: {
    async fetchPosts() {
      let { error, data } = await this.database
        .from("posts")
        .select()
        .order("id");
      if (error) {
        console.error(error);
        return;
      }

      this.setPosts(data);
    },
    setPosts(posts) {
      this.posts = posts;
    },
    subscribePosts() {
      this.subscriptionPosts = this.database
        .from("posts")
        .on("INSERT", (message) => {
          if (message.new) {
            this.posts.push(message.new);
          }
        })
        .subscribe();
    },
  },
};
</script>

これは、リアルタイムのサブスクリプションが実装されるために必要なコードです.
あなたは結果を見る準備ができていますか?

確かに壮観!
上で行われたことは十分ですが、我々のアプリケーションを少し気をつけて、解体における購読を削除しましょうdestroyed ) コンポーネントの.

Always unsubscribe, when new values in the subscribed stream is no more required or don't matter, it will result in way less number of triggers and increase in performance in a few cases.

と呼ばれるメソッドを作成しますunsubscribePosts 購読の削除に責任があります.

<template>
  <section class="px-2 pt-16 pb-6 bg-white md:px-0">
    <div class="container items-center max-w-6xl px-8 mx-auto xl:px-5">
      <template v-for="(post, index) in posts">
        <list-item
          :key="`post-${index}`"
          :id="post.id"
          :title="post.title"
          :description="post.description"
        />
      </template>
    </div>
  </section>
</template>

<script>
import ListItem from "./ListItem";
import DatabaseService from "../Database.service";

export default {
  name: "List",
  components: {
    ListItem,
  },
  data: () => ({
    posts: [],
    database: null,
    subscriptionPosts: undefined,
  }),
  created() {
    const database = new DatabaseService();
    this.database = database.getInstance();
  },
  async mounted() {
    await this.fetchPosts();
    this.subscribePosts();
  },
  destroyed() {
    this.unsubscribePosts();
  },
  methods: {
    async fetchPosts() {
      let { error, data } = await this.database
        .from("posts")
        .select()
        .order("id");
      if (error) {
        console.error(error);
        return;
      }

      this.setPosts(data);
    },
    setPosts(posts) {
      this.posts = posts;
    },
    subscribePosts() {
      this.subscriptionPosts = this.database
        .from("posts")
        .on("INSERT", (message) => {
          if (message.new) {
            this.posts.push(message.new);
          }
        })
        .subscribe();
    },
    unsubscribePosts() {
      this.database.removeSubscription(this.subscriptionPosts);
    },
  },
};
</script>

それはすべての人々です!
これは私が最後の出版物で言ったように、これはアプリケーションにもたらす力を考えてください:あなたの想像力をご案内し、新しい視野を探る.
作成したプロジェクトのソースコードに興味がある場合は、Githubのプロジェクトディレクトリに移動してください.
何か質問があれば、躊躇しないでください[email protected] / またはSupabase team ).