displaying rudimentary logs
This commit is contained in:
metacryst
File diff suppressed because one or more lines are too long
8
ui/_/code/zod_4.2.1.js
Normal file
8
ui/_/code/zod_4.2.1.js
Normal file
File diff suppressed because one or more lines are too long
@@ -1,7 +1,29 @@
|
||||
class LogTable extends Shadow {
|
||||
state = {
|
||||
logs: []
|
||||
}
|
||||
|
||||
render() {
|
||||
VStack(() => {
|
||||
|
||||
this.state.logs.forEach((log) => {
|
||||
HStack(() => {
|
||||
p(log.time)
|
||||
p(log.ip)
|
||||
p(log.host)
|
||||
p(log.path)
|
||||
.maxWidth(50, vw)
|
||||
})
|
||||
.gap(1, em)
|
||||
})
|
||||
})
|
||||
.onAppear(async () => {
|
||||
let logs = await ServerClient.send("GET")
|
||||
this.state.logs = logs
|
||||
})
|
||||
.onEvent("log", (e) => {
|
||||
console.log(e.detail)
|
||||
this.state.logs.push(e.detail)
|
||||
console.log(this.state.logs)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Hyperia</title>
|
||||
<title>Console</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="icon" href="/_/icons/logo.svg">
|
||||
<link rel="stylesheet" href="/_/code/shared.css">
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import Socket from "./ws/Socket.js"
|
||||
import ServerClient from "./ws/ServerClient.js"
|
||||
import "./components/Home.js"
|
||||
|
||||
import util from "./util.js"
|
||||
window.util = util
|
||||
|
||||
window.Socket = new Socket()
|
||||
window.ServerClient = new ServerClient()
|
||||
Home()
|
||||
@@ -44,7 +44,7 @@ class Connection {
|
||||
}
|
||||
|
||||
send = (msg) => {
|
||||
console.log("sending")
|
||||
console.log("sending: ", msg)
|
||||
if (this.ws.readyState === WebSocket.OPEN) {
|
||||
this.ws.send(msg);
|
||||
}
|
||||
|
||||
78
ui/desktop/ws/ServerClient.js
Normal file
78
ui/desktop/ws/ServerClient.js
Normal file
@@ -0,0 +1,78 @@
|
||||
import Connection from "./Connection.js";
|
||||
import { z } from '/_/code/zod_4.2.1.js';
|
||||
|
||||
export default class ServerClient {
|
||||
connection;
|
||||
disabled = true;
|
||||
requestID = 1;
|
||||
pending = new Map();
|
||||
|
||||
messageSchema = z.object({
|
||||
id: z.string(),
|
||||
op: z.string().optional(),
|
||||
msg: z.union([
|
||||
z.object({}).passthrough(), // allows any object
|
||||
z.array(z.any()) // allows any array
|
||||
]).optional()
|
||||
})
|
||||
.superRefine((data, ctx) => {
|
||||
if (data.op !== "GET" && data.msg === undefined) {
|
||||
ctx.addIssue({
|
||||
code: z.ZodIssueCode.custom,
|
||||
path: ["msg"],
|
||||
message: "msg is required when operation is not GET"
|
||||
})
|
||||
}
|
||||
})
|
||||
.strict()
|
||||
|
||||
constructor() {
|
||||
this.connection = new Connection(this.receive);
|
||||
}
|
||||
|
||||
isOpen() {
|
||||
if(this.connection.checkOpen()) {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
send(op, msg) {
|
||||
const id = (++this.requestID).toString();
|
||||
let toSend = {
|
||||
id: (++this.requestID).toString(),
|
||||
op: op,
|
||||
msg: msg
|
||||
}
|
||||
|
||||
console.log(this.messageSchema.safeParse(toSend).error)
|
||||
if(!this.messageSchema.safeParse(toSend).success) throw new Error("ServerClient.send: ws message has incorrect format!")
|
||||
|
||||
return new Promise(resolve => {
|
||||
this.pending.set(id, resolve);
|
||||
this.connection.send(JSON.stringify(toSend));
|
||||
});
|
||||
}
|
||||
|
||||
receive = async (event) => {
|
||||
let msg = event.data;
|
||||
if(msg instanceof Blob) {
|
||||
msg = await msg.text()
|
||||
}
|
||||
msg = JSON.parse(msg);
|
||||
if (msg.id && this.pending.has(msg.id)) {
|
||||
this.pending.get(msg.id)(msg);
|
||||
this.pending.delete(msg.id);
|
||||
return;
|
||||
} else {
|
||||
this.onBroadcast(msg)
|
||||
}
|
||||
}
|
||||
|
||||
onBroadcast(msg) {
|
||||
window.dispatchEvent(new CustomEvent("log", {
|
||||
detail: msg
|
||||
}));
|
||||
}
|
||||
}
|
||||
@@ -1,45 +0,0 @@
|
||||
import Connection from "./Connection.js";
|
||||
|
||||
export default class Socket {
|
||||
connection;
|
||||
disabled = true;
|
||||
requestID = 1;
|
||||
pending = new Map();
|
||||
|
||||
constructor() {
|
||||
this.connection = new Connection(this.receive);
|
||||
}
|
||||
|
||||
isOpen() {
|
||||
if(this.connection.checkOpen()) {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
send(msg) {
|
||||
return new Promise(resolve => {
|
||||
const id = (++this.requestID).toString();
|
||||
this.pending.set(id, resolve);
|
||||
this.connection.send(JSON.stringify({ id, ...msg }));
|
||||
});
|
||||
}
|
||||
|
||||
receive = (event) => {
|
||||
const msg = JSON.parse(event.data);
|
||||
if (msg.id && this.pending.has(msg.id)) {
|
||||
this.pending.get(msg.id)(msg);
|
||||
this.pending.delete(msg.id);
|
||||
return;
|
||||
} else {
|
||||
this.onBroadcast(msg)
|
||||
}
|
||||
}
|
||||
|
||||
onBroadcast(msg) {
|
||||
window.dispatchEvent(new CustomEvent(msg.event, {
|
||||
detail: msg.msg
|
||||
}));
|
||||
}
|
||||
}
|
||||
@@ -1,7 +1,7 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Hyperia</title>
|
||||
<title>Console</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="icon" href="/_/icons/logo.svg">
|
||||
<link rel="stylesheet" href="/_/code/shared.css">
|
||||
|
||||
Reference in New Issue
Block a user