JavaScript: как сделать ping локального IP

kirilljs

Всем дорого времени суток!
Сейчас поделюсь как проверить доступность локального IP-адреса с помощью JavaScript.
Для примера - это необходимо когда вы разрабатываете веб-интерфейс для домашней сети или IoT-устройств и хотите проверить их доступность.

Отмечу!!! В браузере нет прямого доступа к ICMP-протоколу (на котором работает ping) из соображений безопасности. Но мы можем использовать обходные методы!
Браузеры ограничивают низкоуровневые сетевые операции. Настоящий ping (ICMP) недоступен, но мы можем эмулировать его поведение с помощью HTTP-запросов.

А вот как можно проверить доступность устройства в локальной сети через функция checkLocalDevice:

/**
 * Проверяет доступность устройства в локальной сети
 * @param {string} ip - IP-адрес для проверки
 * @param {number} port - Порт для проверки (по умолчанию 80)
 * @param {number} timeout - Таймаут в миллисекундах (по умолчанию 3000)
 * @returns {Promise<boolean>} - Доступно ли устройство
 */

async function checkLocalDevice(ip, port = 80, timeout = 3000) {
    const url = `http://${ip}:${port}`;
    
    try {
        const controller = new AbortController();
        const timeoutId = setTimeout(() => controller.abort(), timeout);
        
        const response = await fetch(url, {
            method: 'HEAD',
            mode: 'no-cors',
            signal: controller.signal
        });
        
        clearTimeout(timeoutId);
        return true;
    } catch (error) {
        return false;
    }
}

А проверить и вызвать ее мы можем вот так:

// Пример проверки роутера
checkLocalDevice('192.168.1.1')
    .then(available => {
        console.log(available ? 'Роутер доступен' : 'Роутер недоступен');
    });

// Пример проверки кастомного устройства на порту 8080
checkLocalDevice('192.168.1.100', 8080)
    .then(available => {
        console.log(available ? 'Устройство онлайн' : 'Устройство оффлайн');
    });

Полный пример интерфейса

<div id="network-scanner">
    <h2>Сканер локальной сети</h2>
    <button id="scan-btn">Проверить устройства</button>
    <ul id="results"></ul>
</div>

<script>
const devices = [
    { name: "Роутер", ip: "192.168.1.1" },
    { name: "Принтер", ip: "192.168.1.50", port: 8080 },
    { name: "Сервер", ip: "192.168.1.100" }
];

document.getElementById('scan-btn').addEventListener('click', async () => {
    const resultsElement = document.getElementById('results');
    resultsElement.innerHTML = '';
    
    for (const device of devices) {
        const li = document.createElement('li');
        li.textContent = `${device.name}: проверка...`;
        resultsElement.appendChild(li);
        
        const available = await checkLocalDevice(
            device.ip, 
            device.port || 80
        );
        
        li.textContent = `${device.name}: ${available ? '✅ онлайн' : '❌ оффлайн'}`;
        li.style.color = available ? 'green' : 'red';
    }
});
</script>

Также подмечу, если вдруг у вас не будет что-то работать!

Если устройство блокирует HTTP-запросы
При строгих настройках CORS
Для специализированных протоколов (не HTTP/WebSocket)
В некоторых мобильных браузерах (Сафари там или еще прочая шляпа.)

И еще раз повторюсь так сказать по p.s. - Настоящий ping в браузере сделать невозможно!