Веб-сайты часто интегрируются с различными API для получения статуса серверов и других ресурсов. Например, если вы хотите отображать состояние сервера DeepSeek на вашем сайте, вы можете использовать его публичное API для получения информации о статусе и отображать его пользователям. В этой статье мы рассмотрим, как это сделать с помощью JavaScript и HTML.

1. Подключение к API и получение статуса сервера

Для начала, вам нужно настроить JavaScript-функцию, которая будет делать запрос к API для получения статуса сервера. Мы будем использовать метод fetch, чтобы отправить запрос на сервер и получить информацию о его состоянии.

Вот пример кода, который выполняет эту задачу:

// Проверка статуса API
function checkServerStatus() {
    fetch("https://status.deepseek.com/api/v2/status.json")
      .then(response => {
        if (!response.ok) {
          throw new Error(`Ошибка сети: ${response.status} ${response.statusText}`);
        }
        return response.json();
      })
      .then(data => {
        const statusElement = document.getElementById("server-status");
        const statusIcon = statusElement.querySelector(".status-icon");
        const statusText = statusElement.querySelector(".status-text");
        const statusMessage = statusElement.querySelector(".status-message");

        const statusDesc = data.status.description;
        const statusIndicator = data.status.indicator;

        let statusMessageText = `🔄 ${statusDesc}`;

        // Очистка классов перед добавлением новых
        statusElement.classList.remove("online", "offline", "maintenance");
        statusIcon.classList.remove("online", "offline", "maintenance");

        // Обработка разных индикаторов статуса
        if (statusIndicator === "none") {
          statusMessageText = "✅ Все работает";
          statusElement.classList.add("online");
          statusIcon.classList.add("online");
        }
        if (statusIndicator === "minor") {
          statusMessageText = "⚠️ Небольшие проблемы";
          statusElement.classList.add("maintenance");
          statusIcon.classList.add("maintenance");
        }
        if (statusIndicator === "major") {
          statusMessageText = "Генерация тезисов временно недоступна❗ Серьезные проблемы";
          statusElement.classList.add("offline");
          statusIcon.classList.add("offline");
        }
        if (statusIndicator === "critical") {
          statusMessageText = "Генерация тезисов временно недоступна 🚨 Критический сбой";
          statusElement.classList.add("offline");
          statusIcon.classList.add("offline");
        }

        // Обновляем текст статуса и сообщение
        statusText.textContent = statusMessageText;
        statusMessage.textContent = `Текущий статус: ${statusDesc}`;
      })
      .catch(error => {
        console.error("Ошибка запроса к API:", error);
        const statusElement = document.getElementById("server-status");
        statusElement.classList.add("offline");
        statusElement.querySelector(".status-icon").classList.add("offline");
        statusElement.querySelector(".status-text").textContent = "🚫 Недоступен";
        statusElement.querySelector(".status-message").textContent = "Ошибка при загрузке статуса.";
      });
}

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

2. HTML-структура для отображения статуса

Теперь создадим HTML-разметку, которая будет отображать статус сервера. Важно использовать элементы с уникальными идентификаторами, чтобы можно было легко манипулировать ими с помощью JavaScript.

<div id="server-status" class="server-status">
  <div class="status-icon"></div>
  <div class="status-text">Загрузка...</div>
  <div class="status-message">Получаем данные о статусе сервера...</div>
</div>

• id="server-status" — это основной контейнер для информации о статусе сервера.
• .status-icon — иконка, которая изменяется в зависимости от состояния сервера (например, зеленая для "онлайн", желтая для "небольшие проблемы", красная для "серьезные проблемы").
• .status-text — текст, который отображает статус, например, "Все работает" или "Генерация тезисов недоступна".
• .status-message — дополнительное сообщение, которое объясняет текущий статус (например, подробности о проблемах на сервере).

3. CSS для стилизации статуса

Чтобы отображение статуса было наглядным, добавим стили, которые будут изменяться в зависимости от состояния сервера.

/* Общие стили для блока */
.server-status {
  display: flex;
  align-items: center;
  padding: 10px;
  border-radius: 5px;
  background-color: #f5f5f5;
}

.status-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin-right: 10px;
}

.status-text {
  font-weight: bold;
}

.status-message {
  font-size: 0.9em;
  color: gray;
  margin-top: 5px;
}

/* Стиль для онлайн состояния */
.server-status.online {
  background-color: #e0ffe0;
}

.status-icon.online {
  background-color: #4caf50;
}

.status-text.online {
  color: #4caf50;
}

/* Стиль для состояния с небольшими проблемами */
.server-status.maintenance {
  background-color: #fff3e0;
}

.status-icon.maintenance {
  background-color: #ff9800;
}

.status-text.maintenance {
  color: #ff9800;
}

/* Стиль для состояния с серьезными проблемами */
.server-status.offline {
  background-color: #ffebeb;
}

.status-icon.offline {
  background-color: #f44336;
}

.status-text.offline {
  color: #f44336;
}

4. Логика работы

1. Инициализация: Когда пользователь заходит на сайт, автоматически вызывается функция checkServerStatus, которая делает запрос к API DeepSeek и получает информацию о текущем статусе сервера.

2. Обработка статуса:

   • Если API сообщает, что сервер работает нормально (статус none), отображается зеленая иконка и текст "Все работает".
   • Если сервер имеет небольшие проблемы (статус minor), отображается желтая иконка с текстом "Небольшие проблемы".
   • Если проблемы более серьезные (статус major или critical), сервер будет отображаться как недоступный (красная иконка и текст о недоступности сервиса).

3. Ошибки запроса: Если запрос к API не удается (например, сервер недоступен или произошла ошибка сети), выводится сообщение о проблемах с загрузкой статуса и блокируется возможность показа текущего состояния.

5. Заключение

Теперь ваш сайт будет отображать актуальный статус работы сервера DeepSeek в реальном времени. В зависимости от состояния API, пользователи смогут увидеть, работает ли сервер, имеются ли проблемы или сервис временно недоступен. Вы можете легко адаптировать данный пример под любые другие API или дополнительные условия.