Теперь, когда мы рассмотрели основы Firebase с использованием простой формы HTML & JS , Давайте перейдем к следующим шагам. В этой части мы увидим, как подключить Cloud Firestore к пользовательскому интерфейсу в режиме реального времени и вносить изменения в клиент в реальном времени.
Чтобы начать с подключения в реальном времени, мы будем повторно используйте наш старый проект что мы создали в Часть 1 этой серии Анкет Для этого мы будем создавать раздел в прямом эфире, такой как Twitch Chat. Мы будем использовать методы в реальном времени Cloud Firestore для обновления всех изменений для всех клиентов, которые подключены к корму, поддерживая их синхронизацию.
Начнем с создания нового index.html Файл под общедоступным каталогом. Мы переименуем наш старый файл index.html и будем держать его там на случай, если он нам понадобится для справки. Сначала мы создадим новую коллекцию в нашей базе данных под названием подает Анкет Эта коллекция будет иметь документ для каждого созданного сообщения.
Теперь давайте разместим нашу коллекцию каналов с помощью Cloud Firestore. Обычно мы просто будем использовать get () Метод, верно? На этот раз мы пойдем на то, что называется onsnapshot () Анкет Давайте напишем это внутри нашего тега сценария. Сначала давайте войдем наши данные, затем мы отобразим результат как HTML.
// variables
const firebaseConfig = {
// your config
};
firebase.initializeApp(firebaseConfig);
const firestore = firebase.firestore();
// firebase functions
function listFeeds() {
return firestore.collection("feeds").onSnapshot(function (querySnapshot) {
let feeds = [];
querySnapshot.forEach(function (doc) {
feeds.push({
id: doc.id,
...doc.data(),
});
});
console.log(feeds);
});
}
listFeeds();
У Cloud Firestore есть метод под названием ONSNAPSHOT Это запускается каждый раз, когда коллекция меняется. Этот метод также может быть использован в документе для обнаружения изменения документа. Метод предоставляет вам функцию обратного вызова с помощью Querysnapshot всех документов в коллекции в тот момент.
Затем нам нужно пройти через каждый снимок в Querysnapshot Чтобы извлечь данные нашего документа. Вы можете регистрировать Док Объект в цикле, чтобы проверить все возможные типы данных, которые вы можете использовать для ваших потребностей.
В этом примере я буду использовать id Ключ, который удерживает идентификатор документа и data () Чтобы получить тело документа. Давайте запустим файл HTML и проверим наш журнал.
И вот и вы, у нас наше первое сообщение загружено в журнале. Теперь давайте попробуем обновить нашу коллекцию, используя консоль Firestore, и посмотрим, запускается ли она на стороне клиента, не обновляя клиента.
После обновления коллекции Feeds теперь можно увидеть, что был создан новый журнал, и новый список отображается здесь. Теперь мы будем использовать это, чтобы перечислить наш канал. Мы только что перечислим нашем канал, используя Ли тег и несколько простых стилей начальной загрузки.
Сначала мы создадим уль тег с идентификатором корм,
А теперь давайте изменим наш ListFeeds () функционируйте чем -то подобным. Это действительно вызовет проблему (для каждой выборки мы получим историю данных, поэтому идентификаторы будут дублированы в спискефингах ()) Но сейчас мы увидим, что мы получим.
function listFeeds() {
return firestore.collection("feeds").onSnapshot(function (querySnapshot) {
querySnapshot.forEach(function (doc) {
let feed = document.createElement("li");
feed.setAttribute("class", "list-group-item");
feed.setAttribute("id", doc.id);
feed.innerText = doc.data().message;
document.getElementById("feeds").append(feed);
});
});
}
Чтобы облегчить жизнь, давайте создадим простую форму, которая добавит новую подачу в подачу. Мы будем использовать add () Метод Firestore еще раз, чтобы добавить новый документ в коллекцию. Давайте добавим что -то подобное,
И внутри нашего тега сценария, давайте добавим,
function handleSubmit(event) {
event.preventDefault();
let input = document.getElementById("message");
let message = input.value;
return firestore
.collection("feeds")
.add({ message })
.then(() => (input.value = ""))
.catch((err) => console.log(err));
}
Давайте попробуем сейчас,
Как и ожидалось, мы снова получим все объекты массива, которые снова подтолкнут все существующие объекты в HTML. Мы можем исправить это, очистив список перед выбором, но вместо этого давайте используем docchanges () Метод QuerysnapShot, чтобы получить только обновленные данные. Давайте изменим наш код, тогда,
function listFeeds() {
return firestore.collection("feeds").onSnapshot(function (querySnapshot) {
querySnapshot.docChanges().forEach(function (change) {
if (change.type === "added") {
console.log("New city: ", change.doc.data());
} else if (change.type === "modified") {
console.log("Modified city: ", change.doc.data());
} else if (change.type === "removed") {
console.log("Removed city: ", change.doc.data());
}
});
});
}
Теперь этот метод даст нам только добавленные документы. Таким образом, изначально, когда страница загружена, мы получим все существующие документы, и всякий раз, когда будет добавлен новый документ, только этот документ будет отправлен нам в docchanges () метод
Это также облегчит обработку каждого типа изменений, поскольку мы знаем, что будет принята только эта конкретная филиал принятия решений. Давайте теперь обновим наш добавленный филиал до чего -то подобного,
function handleNewFeed(doc) {
let feed = document.createElement("li");
feed.setAttribute("class", "list-group-item");
feed.setAttribute("id", doc.id);
feed.innerText = doc.data().message;
document.getElementById("feeds").prepend(feed);
}
// firebase functions
function listFeeds() {
return firestore.collection("feeds").onSnapshot(function (querySnapshot) {
querySnapshot.docChanges().forEach(function (change) {
if (change.type === "added") {
return handleNewFeed(change.doc);
} else if (change.type === "modified") {
console.log("Modified city: ", change.doc.data());
} else if (change.type === "removed") {
console.log("Removed city: ", change.doc.data());
}
});
});
}
listFeeds();
Давайте посмотрим на это сейчас,
Круто это работает !!
Круто, наш код сейчас работает. Давайте просто добавим несколько небольших дизайнов в наш код и сделаем его похожим на чат. Мы откроем его на нескольких вкладках или в окнах и проверим, отражается ли сообщение на всех вкладках.
Вот и все! Экспериментируйте дальше со всем кодом, например, обновления и удаления параметров в querysnapshot () Анкет В предстоящей части мы обсудим здание REST APIS Использование функций облака Firebase.
Оригинал: “https://dev.to/soorajsnblaze333/web-app-using-html-js-firebase-part-2-439p”