Инструкция Как вывести онлайн сервера на сайт через виджет

[wyysenburg]

Я не знаю, может кто видел как выводят отдельным виджетом онлайн сервера и кто хотел реализовать, то держите

Для начала нужно перейти на сайт RustServer(noad), для этого проходим авторизацию и добавляем сервер. После того как добавили сервер, нужно получить его ID в панели управления.

Далее добавляем непосредственно виджет в котором будем в дальнейшем менять значения опредленного блока, в нашем случае это будет serveronline.
В виджет который хотим добавить онлайн вставляем код, что ниже, либо просто присваиваем блоку id="serveronline"(блок должен быть пустым)

<div id="serveronline">Загрузка...</div>

Добавляем JS к нашему сайту

function fetchServerData() {
  const script = document.createElement('script');
  script.src = 'https://rust-servers.ru/web/api/ВАШ_IDСЕРВЕРА/'; // тут заменяем на ID который получили ранее
  script.onload = () => {
    updateServerStatus(api);
  };
  script.onerror = () => {
    document.getElementById('serveronline-red').innerText = 'Ошибка загрузки';
    console.error('Ошибка при загрузке данных о сервере');
  };
  document.head.appendChild(script);
}

function updateServerStatus(api) {
  const onlinePlayers = api.players;
  document.getElementById('serveronline').innerText = `${onlinePlayers} игроков онлайн`;
}

fetchServerData();
setInterval(fetchServerData, 1000); // меняйте частоту обновления на любое значение если вам нужно, но не советую ставить ниже

И все, информацию об онлайне сервера мы получили.

 

[Static]

serveronline-red

 

[wyysenburg]

Не отрицаю же)

 

[Static]

А если 2+ сервера нужно добавить? Статус онлайн-оффлайн?

 

[wyysenburg]

А если 2+ сервера нужно добавить? Статус онлайн-оффлайн?

Не проверял, попробуй. Но заметил странность в работе самого сервиса rust-servers, оно не обновляет онлайн пока ты не зайдешь на сайт и не выберешь свой сервер. Как найду замену, скину сюда

 

[wyysenburg]

1

 

[wyysenburg]

Изменил API.
Как и просил mukoed
Добавил возможность внедрять несколько серверов.
Добавил проверку на работоспособность сервера(включен он или нет)

<div id="server-1">Загрузка...</div>
<div id="server-2">Загрузка...</div>
<div id="server-3">Загрузка...</div>

Чтобы получить свои ID перейдите по ссылке https://gamemonitoring.ru/rust/servers , в поиске введите название сервера и нажмите на него
Получите ID в адрессной строке браузера и замените на нужные

document.addEventListener("DOMContentLoaded", function () {
  const apiUrls = [
    "https://api.gamemonitoring.ru/servers/4859832",
    "https://api.gamemonitoring.ru/servers/439393",
    "https://api.gamemonitoring.ru/servers/688191",
  ];

  function fetchServerData(apiUrl, elementId) {
    fetch(apiUrl)
      .then((response) => response.json())
      .then((data) => {
        if (data && data.response) {
          const serverStatus = data.response.status;
          const numPlayers = data.response.numplayers;

          const serverOnlineElement = document.getElementById(elementId);
          if (serverOnlineElement) {
            if (serverStatus) {
              serverOnlineElement.innerText = `Онлайн: ${numPlayers}`;
            } else {
              serverOnlineElement.innerText = "Сервер выключен";
            }
          } else {
            console.error(`Элемент с ID "${elementId}" не найден`);
          }
        } else {
          console.error("Некорректный формат данных");
        }
      })
      .catch((error) => {
        console.error("Ошибка при получении данных:", error);
        const serverOnlineElement = document.getElementById(elementId);
        if (serverOnlineElement) {
          serverOnlineElement.innerText = "Ошибка загрузки данных";
        }
      });
  }

  function fetchAllServerData() {
    fetchServerData(apiUrls[0], "server-1");
    fetchServerData(apiUrls[1], "server-2");
    fetchServerData(apiUrls[2], "server-3");
  }

  fetchAllServerData();

  setInterval(fetchAllServerData, 1000);
});

Посмотреть вложение 41449

 

[SKS]

Просто возьми у меня в профиле щашаблон и все