diff options
| author | Patrick | 2026-05-08 10:45:57 +0200 |
|---|---|---|
| committer | Patrick | 2026-05-08 10:45:57 +0200 |
| commit | 88b339f3c3916c856351821b37823f70e822ea57 (patch) | |
| tree | 56b1b7b637ded0b972b2d1b198e32ca8a4f877a6 /src | |
| parent | fedf10f71a157003006d41afc7821517f06c7abd (diff) | |
| download | zhttpws-88b339f3c3916c856351821b37823f70e822ea57.tar.gz zhttpws-88b339f3c3916c856351821b37823f70e822ea57.zip | |
add ui
Diffstat (limited to 'src')
| -rw-r--r-- | src/main.zig | 33 |
1 files changed, 29 insertions, 4 deletions
diff --git a/src/main.zig b/src/main.zig index 3204b4d..328bcea 100644 --- a/src/main.zig +++ b/src/main.zig @@ -55,16 +55,41 @@ fn handle_request(alloc: std.mem.Allocator, io: Io, stream: Io.net.Stream) void }, else => { req.respond( + \\ <!doctype html> + \\ <html><head> + \\ <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>💻</text></svg>"> + \\ <meta name="viewport" content="width=device-width, initial-scale=1.0" /> + \\ <meta charset="utf-8"> + \\ <style> + \\ :root { color-scheme: light dark; } + \\ body { + \\ margin: 0; padding: 0; + \\ line-height: 1.6; + \\ font-size: 16px; + \\ } + \\ textarea { width: 100%; height: calc(100% - 40px); } + \\ input { width: calc(100% - 80px); height: 40px; } + \\ button { width: 80px; height: 40px; } + \\ </style></head><body> \\ <script> - \\ const socket = new WebSocket("wss://yap.ps.run"); + \\ const socket = new WebSocket(`wss://${window.location.host}``); \\ socket.addEventListener("open", (event) => { - \\ socket.send("Hello Server!"); + \\ tv.value += "Connected!\n"; \\ }); \\ socket.addEventListener("message", (event) => { - \\ console.log("Message from server ", event.data); + \\ tv.value += `[${new Date().toLocaleString()}] ${event.data}\n`; \\ }); + \\ function Send() { + \\ if (tn.value.length == 0) { window.alert("Please enter a name"); return; } + \\ if (tb.value.length == 0) { return; } + \\ socket.send(`${tn.value}: ${tb.value}`); + \\ tb.value = ""; + \\ } \\ </script> - \\ <p>hallo</p> + \\ <textarea id="tv" readonly></textarea> + \\ <div><input type="text" id="tn" /><input type="text" id="tb" onkeypress="if (e.key === 'Enter') Send()" /> + \\ <button onclick="Send()">Send</button></div> + \\ </body></html> , .{ .status = .ok }) catch break; }, } |