100 lines
2.8 KiB
JavaScript
100 lines
2.8 KiB
JavaScript
const tbody = document.getElementById("content-display");
|
|
|
|
async function init() {
|
|
try {
|
|
const response = await fetch("/api/url");
|
|
|
|
if (!response.ok) {
|
|
throw new Error(`HTTP ${response.status}`);
|
|
}
|
|
|
|
const urls = await response.json();
|
|
|
|
urls.forEach((url) => {
|
|
const id = url.replace(/[^a-zA-Z0-9]/g, "_");
|
|
|
|
const row = document.createElement("tr");
|
|
row.id = id;
|
|
|
|
row.innerHTML = `
|
|
<td>${url}</td>
|
|
<td class="status">Waiting...</td>
|
|
<td class="statusCode">-</td>
|
|
<td class="responseTime">-</td>
|
|
<td class="error">-</td>
|
|
`;
|
|
|
|
tbody.appendChild(row);
|
|
});
|
|
} catch (err) {
|
|
console.error(err);
|
|
}
|
|
}
|
|
|
|
document.addEventListener("DOMContentLoaded", init);
|
|
|
|
const protocol = window.location.protocol === "https:" ? "wss" : "ws";
|
|
|
|
const socket = new WebSocket(`${protocol}://${window.location.host}`);
|
|
console.log(socket);
|
|
// const socket = new WebSocket("ws://localhost:3000");
|
|
const websocket_status = document.getElementById("websocket_status");
|
|
|
|
socket.onopen = () => {
|
|
websocket_status.textContent = "Connected";
|
|
};
|
|
let counter = 0;
|
|
socket.onmessage = (event) => {
|
|
// console.log(counter)
|
|
const data = JSON.parse(event.data);
|
|
if (data.type === "checking") {
|
|
counter = counter + 1;
|
|
document.getElementById("status").textContent =
|
|
"Refreshed " + counter + " Times";
|
|
return;
|
|
}
|
|
|
|
const id = data.url.replace(/[^a-zA-Z0-9]/g, "_");
|
|
const row = document.getElementById(id);
|
|
if (!row) return;
|
|
|
|
row.querySelector(".status").textContent = data.status;
|
|
row.querySelector(".statusCode").textContent = data.statusCode;
|
|
row.querySelector(".responseTime").textContent =
|
|
data.responseTime != null ? `${data.responseTime} ms` : "-";
|
|
row.querySelector(".error").textContent = data.error || "-";
|
|
};
|
|
|
|
socket.onclose = () => {
|
|
websocket_status.textContent = "Disconnected";
|
|
};
|
|
|
|
document.getElementById("addBtn").addEventListener("click", async () => {
|
|
const url = document.getElementById("urlInput").value.trim();
|
|
if (!url) return;
|
|
|
|
const response = await fetch("/api/url/register", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ url }),
|
|
});
|
|
|
|
if (response.ok) {
|
|
document.getElementById("urlInput").value = "";
|
|
|
|
const id = url.replace(/[^a-zA-Z0-9]/g, "_");
|
|
if (!document.getElementById(id)) {
|
|
const row = document.createElement("tr");
|
|
row.id = id;
|
|
row.innerHTML = `
|
|
<td>${url}</td>
|
|
<td class="status">Waiting...</td>
|
|
<td class="statusCode">-</td>
|
|
<td class="responseTime">-</td>
|
|
<td class="error">-</td>
|
|
`;
|
|
tbody.appendChild(row);
|
|
}
|
|
}
|
|
});
|