✨ 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