Веб-сайты часто интегрируются с различными 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. Логика работы
- Инициализация: Когда пользователь заходит на сайт, автоматически вызывается функция checkServerStatus, которая делает запрос к API DeepSeek и получает информацию о текущем статусе сервера.
- Обработка статуса:Если API сообщает, что сервер работает нормально (статус none), отображается зеленая иконка и текст "Все работает".
Если сервер имеет небольшие проблемы (статус minor), отображается желтая иконка с текстом "Небольшие проблемы".
Если проблемы более серьезные (статус major или critical), сервер будет отображаться как недоступный (красная иконка и текст о недоступности сервиса). - Ошибки запроса: Если запрос к API не удается (например, сервер недоступен или произошла ошибка сети), выводится сообщение о проблемах с загрузкой статуса и блокируется возможность показа текущего состояния.
5. Заключение
Теперь ваш сайт будет отображать актуальный статус работы сервера DeepSeek в реальном времени. В зависимости от состояния API, пользователи смогут увидеть, работает ли сервер, имеются ли проблемы или сервис временно недоступен. Вы можете легко адаптировать данный пример под любые другие API или дополнительные условия.