Эй, если вы не знаете, о чем я говорю, вы должны прочитать мою первую статью по этой ссылке.
Контекст:
Мы создали микроблог, используя 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
Отказ
Что мы будем делать, похоже на примеру, с двумя разными деталями:
- Мы будем смотреть только с одного стола (
посты
). - Мы хотим посмотреть только на
Вставить
мероприятие.
В нашем List.vue Файл, мы создадим новую переменную под названием ПодписныеPosts
и метод подписчики
Отказ
Мы назовем этот метод при сборке ( Установлено
) Наш компонент и его ответственность должны быть:
- Всякий раз, когда в этой таблице вставлена новая запись, добавьте ее в
Сообщения
Переменные (локальная переменная, которая хранит публикации).
Ниже нашего кода с реализацией:
Это код, необходимый для реализации подписки в реальном времени.
Вы готовы увидеть результат?
Определенно впечатляющий!
Что было сделано выше, было бы достаточно, но давайте возьмем немного по уходу за нашей заявкой и удалите подписку в демонтаже ( уничтожены
) нашего компонента.
Всегда отписаться, когда новые значения в подписанном потоке больше не требуются или не имеют значения, это приведет к меньшему количеству триггеров и повышения производительности в нескольких случаях.
Мы создаем метод под названием открепленные отписыватели
который будет нести ответственность за удаление подписки.
Это все люди!
Подумайте о власти, что это приводит к заявке, и, как я уже сказал в последней публикации: Пусть ваше воображение направляет вас и исследует новые горизонты.
Если вы заинтересованы в исходном коде проекта, который мы создали, перейдите в каталог проекта на GitHub и реализуйте еще более захватывающие вещи, такие как:
Если у вас есть какие-либо вопросы, не стесняйтесь обращаться ко мне ( ademilsonft@outlook.com / @ Фетонато или Supabase Team ).
Оригинал: “https://dev.to/ftonato/realtime-subscriptions-using-vue-supabase-1e11”