Создание приложения для чата в реальном времени с помощью Vue.js и Firebase

Создание приложения для чата в реальном времени с помощью Vue.js и Firebase - Часть 3

Это сообщение было впервые опубликовано на CodingTheSmartWay.com.

Часть 1: Настройка проекта
Часть 2: Реализация логики чата
Часть 3: Функции Firebase Cloud

Во второй части серии руководств Создание приложения для чата в реальном времени с помощью Vue.js и Firebase мы завершили реализацию интерфейсного приложения Vue.js.

В этой третьей части мы реализуем облачную функцию Firebase, которая используется для автоматической очистки базы данных Firestore, если было вставлено более десяти сообщений.

Прежде всего давайте проясним, что такое облачные функции Firebase.

Что такое облачные функции?

До сих пор мы использовали только клиентский код для создания нашего приложения Vue.js. Весь код, который был добавлен в проект, выполняется на стороне клиента прямо в браузере.

Для некоторых задач может потребоваться выполнение кода и на стороне сервера. Используя облачные функции Firebase, мы можем развернуть код на сервере Firebase и позволить этому коду запускаться при возникновении определенных событий (например, при вставке нового документа в Firestore). Используя функцию Firebase Cloud, мы можем выполнять код JavaScript на стороне сервера без запуска собственного сервера.

Если вам нравится CodingTheSmartWay, подумайте о поддержке нас через Patreon. С вашей помощью мы сможем чаще выпускать руководства для разработчиков. Большое спасибо!

Добавление облачных функций в проект

Чтобы добавить в проект облачные функции Firebase, нам сначала нужно убедиться, что интерфейс командной строки Firebase установлен. Установка выполняется снова с помощью NPM следующим образом:

$ npm install -g firebase-tools

Теперь у вас должна быть глобально доступная команда firebase, доступная из любого окна терминала на вашем компьютере. После того, как вы установили Firebase CLI, войдите в систему, используя свою учетную запись Google:

$ firebase login

Эта команда подключает ваш локальный компьютер к вашей учетной записи Firebase и предоставляет доступ к вашим проектам. Чтобы проверить, сработала ли аутентификация, вы можете запустить $ firebase list, чтобы просмотреть список всех ваших проектов Firebase.

Запустите функцию Firebase Cloud Functions, выполнив следующую команду в каталоге проекта Vue:

$ firebase init

После этого вы должны увидеть в командной строке следующий вывод:

Вас спросят, какие функции интерфейса командной строки Firebase вы хотите добавить в проект. С помощью клавиш со стрелками перейдите к списку функций и выберите функцию Функции, нажав клавишу пробела. Наконец, нажмите Return, чтобы подтвердить выбор:

Затем вам нужно решить, какой язык следует использовать для реализации функции Could. Давайте выберем JavasScript и нажмем Return, чтобы продолжить:

Подтвердите следующий вопрос с помощью опции по умолчанию (N) и нажмите return. Вам сообщили, что в папке functions были созданы два новых файла: package.json и index.js.

Наконец, вас спросят, хотите ли вы установить зависимости. Здесь вам нужно еще раз подтвердить вариант по умолчанию (Y). После этого вы увидите, как идет процесс установки.

После завершения этого шага функция Cloud Functions успешно добавлена в проект, и мы можем начать с реализации в functions / index.js.

Реализация облачной функции

Теперь, когда проект подготовлен для реализации облачной функции, давайте приступим к написанию необходимого кода.

Сначала нам нужно убедиться, что выполняется импорт из firebase-functions и firebase-admin, вставив сверху следующие два оператора импорта:

const functions = require('firebase-functions');
const admin = require('firebase-admin');

Затем нам нужно вызвать метод initializeApp для объекта firebase-admin:

admin.initializeApp();

Вызов этого метода создает и инициализирует экземпляр приложения Firebase. Вставив этот код, мы готовы добавить тело функции:

exports.onMessageCreate = functions.firestore
    .document('messages/{userId}')
    .onCreate((snap, context) => { })

Облачная функция, которую мы собираемся создать, называется onMessageCreate. Как уже упоминалось, облачная функция может быть вызвана различными триггерами. В нашем случае функцию следует вызывать, если новый документ вставлен в коллекцию сообщений Firestore. Итак, мы определяем эту облачную функцию, вызывая методы document и onCreate.

Внутри тела облачной функции мы выбираем ссылку на коллекцию сообщений Firestore с помощью:

const ref = admin.firestore().collection('messages').orderBy('timestamp');

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

Вот полный код реализации:

const functions = require('firebase-functions');
const admin = require('firebase-admin');
admin.initializeApp();
exports.onMessageCreate = functions.firestore
    .document('messages/{userId}')
    .onCreate((snap, context) => {
        // Check if limit is reached
        const newValue = snap.data();
        console.log(newValue);
        const ref = admin.firestore().collection('messages').orderBy('timestamp');
        ref.onSnapshot(snapshot => {
            i = 0;
            size = snapshot.size;
            sizeToDelete = size - 10;
            console.log('Messages Count: ' + size);
            
            snapshot.forEach((doc) => {
                if (i < sizeToDelete) {
                    doc.ref.delete().then(()=>{
                        console.log("Document successfully deleted");
                    }).catch((error) => {
                        console.log("Error removing document: ", error);
                    });
                }
                i++;  
            });
        });
    });

Развертывание облачной функции в Firebase

Чтобы активировать эту облачную функцию Firebase, нам необходимо развернуть ее в Firebase. Это снова делается с помощью интерфейса командной строки Firebase. Просто выполните следующую команду в каталоге проекта:

$ firebase deploy --only functions

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

Теперь функция активна и выполняется каждый раз, когда новый документ вставляется в коллекцию сообщений Firestore. Как только вы наберете более десяти сообщений в чате, вы увидите, что старые сообщения удаляются из магазина.

Заключение

Из этой серии вы узнали, как от начала до конца создать чат-приложение на Vue.js с помощью Firebase. Вы узнали, как использовать Vue CLI 3 для настройки нового проекта, установить соединение с Firebase, использовать Firestore для управления данными и реализовать функцию Firebase Cloud, которая используется для очистки магазина.

Это сообщение было впервые опубликовано на CodingTheSmartWay.com.

# 1 Vue JS 2 - Полное руководство (включая Vue Router и Vuex)

Vue JS - это потрясающая платформа JavaScript для создания приложений Frontend! VueJS сочетает в себе лучшее от Angular + React!
Go to Course…

Заявление об ограничении ответственности: это сообщение содержит партнерские ссылки. Это означает, что если вы нажмете на одну из ссылок на продукт, я получу небольшую комиссию. Это поможет поддержать этот блог!

Создание приложения для чата в реальном времени с помощью Vue.js и Firebase - Часть 3