Блог

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

Мой сервис для загрузки скрипта:

 import { HttpClient } from "@angular/common/http";
import { Injectable } from "@angular/core";

@Injectable()
export class CoursService {
  liste_cours = []

  constructor(private httpClient: HttpClient) {
    this.getCoursFromServer()
  }

  saveCoursToServer() {
    this.httpClient
      .put("https://databaselink/cours.json", this.liste_cours)
      .subscribe(
        () => {
          console.log("Enregistrement terminé!");
        },
        error => {
          console.log("Erreiorr ! : "   error);
        }
      );
  }

  getCoursFromServer() {
    this.httpClient
      .get<any[]>("https://databaselink/cours.json")
      .subscribe(
        response => {
          this.liste_cours = response;
          console.log("Loading finish");
        },
        error => {
          console.log("Error!: "   error);
        }
      );
  }
}  

Спасибо за ваши ответы!

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

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

1. Используйте Firebase SDK. Это, безусловно, самый простой подход, поскольку Firebase имеет SDK как для обычного JavaScript, так и для приложений Angular. При интеграции этих пакетов SDK вы можете получать обновления в режиме реального времени, подключив on('value' прослушиватель или подписавшись на узел.
2. Периодически выполняйте HTTP-запрос на своей странице, который известен как опрос данных. Это тоже довольно простой подход, но он становится очень неэффективным, если ваши данные меняются нечасто.
3. Внедрите клиент для потокового REST API Firebase. Это довольно сложно и обычно выполняется только на платформах, где нет Firebase SDK, или энтузиастами, которые хотят узнать больше о протоколе.

Я настоятельно рекомендую вам рассмотреть эти решения в том порядке, в котором они приведены.