🚀 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>
Nhận xét
Đăng nhận xét