Рубрики
Без рубрики

Подписки в реальном времени с использованием Vue + Supabase

Как реализовать подписки в реальном времени с использованием Vue и Supabase (альтернатива Firebase с открытым исходным кодом). Теги с JavaScript, Vue, WebDev, базой данных.

Эй, если вы не знаете, о чем я говорю, вы должны прочитать мою первую статью по этой ссылке.

Контекст:

Мы создали микроблог, используя Vue + Supabase (Альтернатива Firebase с открытым исходным кодом). Сегодня мы собираемся показать новую публикацию всякий раз, когда он вставлен в базу данных.

Наша отправная точка будет кодом, созданным в последней статье, вы можете получить доступ к Репозиторий для просмотра исходного кода Отказ

Наш главный филиал Git, называется Главная Мы создадим ветку от этого под названием feat/add-подписка ( Вы можете получить доступ к ней здесь ), мы можем сделать это, используя следующую команду в командной строке:

// git clone git@github.com:ftonato/vue-supabase-microblog.git
// cd vue-supabase-microblog

git checkout -b feat/add-subscription

Просматривая Документация Мы можем узнать, как подробно подписаться.

Подписка – это посмотреть изменения в реальном времени в вашей базе данных. Это означает, что каждый раз событие ( insert , Обновление , Удалить , * ) происходит, мы можем вызвать функцию.

Например.:

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

В приведенном выше примере мы говорим на нашем приложении: «Всякий раз, когда событие происходит, независимо от таблицы, распечатать Payload Информация с использованием console.log Отказ

Что мы будем делать, похоже на примеру, с двумя разными деталями:

  1. Мы будем смотреть только с одного стола ( посты ).
  2. Мы хотим посмотреть только на Вставить мероприятие.

В нашем List.vue Файл, мы создадим новую переменную под названием ПодписныеPosts и метод подписчики Отказ

Мы назовем этот метод при сборке ( Установлено ) Наш компонент и его ответственность должны быть:

  • Всякий раз, когда в этой таблице вставлена новая запись, добавьте ее в Сообщения Переменные (локальная переменная, которая хранит публикации).

Ниже нашего кода с реализацией:




Это код, необходимый для реализации подписки в реальном времени.

Вы готовы увидеть результат?

Определенно впечатляющий!

Что было сделано выше, было бы достаточно, но давайте возьмем немного по уходу за нашей заявкой и удалите подписку в демонтаже ( уничтожены ) нашего компонента.

Всегда отписаться, когда новые значения в подписанном потоке больше не требуются или не имеют значения, это приведет к меньшему количеству триггеров и повышения производительности в нескольких случаях.

Мы создаем метод под названием открепленные отписыватели который будет нести ответственность за удаление подписки.




Это все люди!

Подумайте о власти, что это приводит к заявке, и, как я уже сказал в последней публикации: Пусть ваше воображение направляет вас и исследует новые горизонты.

Если вы заинтересованы в исходном коде проекта, который мы создали, перейдите в каталог проекта на GitHub и реализуйте еще более захватывающие вещи, такие как:

Если у вас есть какие-либо вопросы, не стесняйтесь обращаться ко мне ( ademilsonft@outlook.com / @ Фетонато или Supabase Team ).

Оригинал: “https://dev.to/ftonato/realtime-subscriptions-using-vue-supabase-1e11”