215 lines
7.6 KiB
HTML
215 lines
7.6 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Go Socket.IO Logs Test</title>
|
|
<!-- Socket.IO v2 client -->
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js"></script>
|
|
<style>
|
|
body {
|
|
font-family: monospace;
|
|
background: #111;
|
|
color: #eee;
|
|
}
|
|
#controls {
|
|
margin-bottom: 10px;
|
|
}
|
|
#logWindow {
|
|
border: 1px solid #444;
|
|
background: #000;
|
|
padding: 10px;
|
|
width: 100%;
|
|
height: 400px;
|
|
overflow-y: auto;
|
|
white-space: pre-wrap;
|
|
font-size: 14px;
|
|
}
|
|
.info {
|
|
color: #0f0;
|
|
}
|
|
.log {
|
|
color: #0af;
|
|
}
|
|
.error {
|
|
color: #f33;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h2>Go Socket.IO Log Viewer</h2>
|
|
|
|
<div id="controls">
|
|
<button id="btnLogs">Subscribe Logs</button>
|
|
<button id="btnLeaveLogs">Leave Logs</button>
|
|
<button id="btnErrors">Subscribe Errors</button>
|
|
<button id="btnLeaveErrors">Leave Errors</button>
|
|
<button id="btnSubscribeBuild">Subscribe Build</button>
|
|
<button id="btnUnsubscribeBuild">Leave Build</button>
|
|
<button id="btnBuildApp">Build</button>
|
|
<!-- update buttons: copy -->
|
|
<button id="btnSubscribeUpdate">Subscribe Update</button>
|
|
<button id="btnUnsubscribeUpdate">Leave Update</button>
|
|
<div>
|
|
<form onsubmit="return false;">
|
|
<input
|
|
type="text"
|
|
id="myInput"
|
|
placeholder="Type something here"
|
|
/>
|
|
<button type="button" id="btnCopyLatest">Send</button>
|
|
</form>
|
|
</div>
|
|
<div>
|
|
<form onsubmit="return false;">
|
|
<input
|
|
type="text"
|
|
id="updateServerInput"
|
|
placeholder="Type something here"
|
|
/>
|
|
<button type="button" id="updateServerButton">
|
|
Update Server
|
|
</button>
|
|
</form>
|
|
</div>
|
|
>
|
|
</div>
|
|
|
|
<div id="logWindow"></div>
|
|
|
|
<script>
|
|
// ✅ Define socket in global scope
|
|
|
|
// const socket = io("https://usmcd1vms036.alpla.net", {
|
|
// path: "/lst/socket.io/",
|
|
// transports: ["polling"],
|
|
// });
|
|
|
|
const socket = io("http://localhost:8080", {
|
|
path: "/socket.io/",
|
|
transports: ["polling"],
|
|
});
|
|
|
|
// log window reference
|
|
const logWindow = document.getElementById("logWindow");
|
|
|
|
function logMessage(type, msg) {
|
|
const entry = document.createElement("div");
|
|
entry.textContent = `${new Date().toLocaleTimeString()} | ${msg}`;
|
|
entry.className = type;
|
|
logWindow.appendChild(entry);
|
|
logWindow.scrollTop = logWindow.scrollHeight; // auto-scroll
|
|
}
|
|
|
|
// connection events
|
|
|
|
// wire up buttons *after* socket is defined
|
|
document.getElementById("btnLogs").onclick = () => {
|
|
socket.emit("subscribe:logs");
|
|
logMessage("info", "Subscribed to logs");
|
|
};
|
|
|
|
document.getElementById("btnErrors").onclick = () => {
|
|
socket.emit("subscribe:errors");
|
|
logMessage("info", "Subscribed to errors");
|
|
};
|
|
|
|
document.getElementById("btnLeaveLogs").onclick = () => {
|
|
socket.emit("unsubscribe:logs");
|
|
logMessage("info", "👋 Left logs channel");
|
|
};
|
|
|
|
document.getElementById("btnLeaveErrors").onclick = () => {
|
|
socket.emit("unsubscribe:errors");
|
|
logMessage("info", "👋 Left errors channel");
|
|
};
|
|
|
|
document.getElementById("btnSubscribeBuild").onclick = () => {
|
|
socket.emit("subscribe:build");
|
|
logMessage("info", "📺 Subscribed to build");
|
|
};
|
|
|
|
document.getElementById("btnUnsubscribeBuild").onclick = () => {
|
|
socket.emit("unsubscribe:build");
|
|
logMessage("info", "👋 Left build room");
|
|
};
|
|
|
|
document.getElementById("btnBuildApp").onclick = () => {
|
|
socket.emit("build", "LST App"); // "frontend" = payload target
|
|
logMessage("info", "🚀 Build triggered");
|
|
};
|
|
|
|
// update stuff
|
|
document.getElementById("btnSubscribeUpdate").onclick = () => {
|
|
socket.emit("subscribe:update");
|
|
logMessage("info", "📺 Subscribed to update");
|
|
};
|
|
|
|
document.getElementById("btnUnsubscribeUpdate").onclick = () => {
|
|
socket.emit("unsubscribe:update");
|
|
logMessage("info", "👋 Left update room");
|
|
};
|
|
|
|
// document.getElementById("btnCopyLatest").onclick = () => {
|
|
// socket.emit("update", "usmcd1vms036"); // "frontend" = payload target
|
|
// logMessage("info", "Copying to USCMD1VMS036");
|
|
// };
|
|
|
|
window.onload = () => {
|
|
const input = document.getElementById("myInput");
|
|
const button = document.getElementById("btnCopyLatest");
|
|
const updateServerInput =
|
|
document.getElementById("updateServerInput");
|
|
const updateServerButton =
|
|
document.getElementById("updateServerButton");
|
|
|
|
button.onclick = () => {
|
|
const fromMyInput = input.value;
|
|
if (!fromMyInput) return;
|
|
|
|
// Emit to backend (adjust event name as required)
|
|
socket.emit("update", {
|
|
action: "copy",
|
|
target: fromMyInput,
|
|
});
|
|
|
|
// You can define your own logMessage function
|
|
logMessage("info", `Copying to ${fromMyInput}`);
|
|
|
|
input.value = "";
|
|
|
|
input.focus();
|
|
};
|
|
|
|
updateServerButton.onclick = () => {
|
|
const fromMyInput = updateServerInput.value;
|
|
if (!fromMyInput) return;
|
|
|
|
// Emit to backend (adjust event name as required)
|
|
socket.emit("update", {
|
|
action: "update",
|
|
target: fromMyInput,
|
|
});
|
|
|
|
// You can define your own logMessage function
|
|
logMessage("info", `Updating to ${fromMyInput}`);
|
|
|
|
input.value = "";
|
|
|
|
input.focus();
|
|
};
|
|
};
|
|
|
|
socket.on("logs", (msg) => logMessage("logs", msg));
|
|
socket.on("errors", (msg) => logMessage("errors", msg));
|
|
socket.on("buildlogs", (msg) => logMessage("build", msg));
|
|
socket.on("updateLogs", (msg) => logMessage("update", msg));
|
|
socket.on("connect", () => {
|
|
logMessage("info", "✅ Connected to server");
|
|
});
|
|
|
|
socket.on("disconnect", () => {
|
|
logMessage("info", "❌ Disconnected");
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|