NTM Solutions

Thứ Bảy, 22 tháng 3, 2025

🚀 Chương trình kiểm tra status của các thiết bị IP 10s/lần

Thiết bị cần chạy dịch vụ HTTP mới có thể sử dụng được. 🖥️🌐
🔍 Bản chất của chương trình tương tự như việc gõ lệnh:
👉 http://dia-chi-ip 🔗💻


<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>🚀Kiểm tra trạng thái thiết bị</title>
    <style>
        body { font-family: Arial, sans-serif; text-align: center; }
        table { width: 80%; margin: auto; border-collapse: collapse; }
        th, td { padding: 10px; border: 1px solid #ddd; text-align: center; }
        th { background: #f4f4f4; }
        .status { padding: 5px 10px; border-radius: 5px; color: white; }
        .ok { background: green; }
        .slow { background: orange; }
        .down { background: red; }
    </style>
</head>
<body>

    <h2>📡 Kiểm tra trạng thái thiết bị mạng</h2>
    <table>
        <thead>
            <tr>
                <th>Tên thiết bị</th>
                <th>Địa chỉ IP</th>
                <th>Trạng thái</th>
                <th>Thời gian phản hồi</th>
            </tr>
        </thead>
        <tbody id="deviceTable">
        </tbody>
    </table>

    <script>
        const devices = [
            { name: "📟 Máy chấm công", ip: "192.168.1.10" },
            { name: "🎥 Camera 1", ip: "192.168.1.1" },
            { name: "🎥 Camera 2", ip: "192.168.1.21" },
            { name: "🌐 Web Server", ip: "112.78.2.117" },
            { name: "🖨️ Máy Photocopy", ip: "192.168.1.40" },
            { name: "🖨️ Máy In", ip: "192.168.1.50" }
        ];

        const tableBody = document.getElementById("deviceTable");
        let deviceStatus = {}; // Lưu trạng thái cũ để kiểm tra thay đổi

        function createTable() {
            devices.forEach(device => {
                const row = document.createElement("tr");
                row.id = `device-${device.ip}`;
                row.innerHTML = `
                    <td>${device.name}</td>
                    <td>${device.ip}</td>
                    <td id="status-${device.ip}">Đang kiểm tra...</td>
                    <td id="time-${device.ip}">N/A</td>
                `;
                tableBody.appendChild(row);
            });
        }//end function createTable

        function checkDeviceStatus(device) {
            const protocols = ["http://", "https://"];
            const startTime = Date.now();
            const timeout = 5000;

            // Thử lần lượt với cả HTTP và HTTPS
            function tryFetch(protocolIndex) {
                if (protocolIndex >= protocols.length) {
                    return { device, status: "down", responseTime: null };
                }

                const url = `${protocols[protocolIndex]}${device.ip}`;
                return fetch(url, { method: "HEAD", mode: "no-cors" })
                    .then(() => {
                        const responseTime = Date.now() - startTime;
                        return { device, status: "ok", responseTime, protocol: protocols[protocolIndex] };
                    })
                    .catch(() => tryFetch(protocolIndex + 1));//nếu trường hợp http lỗi sẽ thử tiếp https
            }

            return tryFetch(0);
        }//end function checkDeviceStatus

        async function updateStatus() {
            const results = await Promise.all(devices.map(checkDeviceStatus));

            results.forEach(({ device, status, responseTime }) => {
                const statusCell = document.getElementById(`status-${device.ip}`);
                const timeCell = document.getElementById(`time-${device.ip}`);

                // Kiểm tra xem trạng thái có thay đổi không
                if (!deviceStatus[device.ip] || deviceStatus[device.ip] !== status) {
                    deviceStatus[device.ip] = status;
                    statusCell.innerHTML = `<span class="status ${status}">${status === "ok" ? "Hoạt động ✅" : status === "slow" ? "Chậm ⏳" : "Không phản hồi ❌"}</span>`;
                }

                // Cập nhật thời gian phản hồi nếu có thay đổi
                if (responseTime !== null && timeCell.innerText !== `${responseTime} ms`) {
                    timeCell.innerText = `${responseTime} ms`;
                }
            });//end results.forEach
        }//end async function updateStatus

        createTable(); // Hiển thị bảng ngay lập tức
        updateStatus(); // Kiểm tra trạng thái ngay
        setInterval(updateStatus, 10000); // Cập nhật mỗi 10 giây
    </script>

</body>
</html>

Không có nhận xét nào:

Đăng nhận xét

Facebook Youtube RSS