main
html 131 lines 4.43 KB
Raw
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
7 <meta name="apple-mobile-web-app-capable" content="yes">
8 <meta name="mobile-web-app-capable" content="yes">
9 <title>Portal Demo Connectivity</title>
10 <link rel="stylesheet" href="style.css">
11 </head>
12
13 <body>
14 <div class="container">
15 <h1>Portal Demo Connectivity</h1>
16
17 <div class="toolbar">
18 <button id="httpPingBtn">HTTP Ping</button>
19 <button id="testCookiesBtn">Test Cookies</button>
20 <button id="wsConnectBtn">WS Connect</button>
21 <button id="wsSendBtn" disabled>WS Send "hello"</button>
22 </div>
23
24 <div class="canvas-wrapper">
25 <pre id="log" class="log"></pre>
26 </div>
27
28 <div id="status" class="status">Idle</div>
29 </div>
30
31 <script>
32 const statusEl = document.getElementById('status');
33 const logEl = document.getElementById('log');
34 const httpPingBtn = document.getElementById('httpPingBtn');
35 const wsConnectBtn = document.getElementById('wsConnectBtn');
36 const wsSendBtn = document.getElementById('wsSendBtn');
37
38 let ws = null;
39
40 function log(message) {
41 const time = new Date().toISOString();
42 logEl.textContent += `[${time}] ${message}\n`;
43 logEl.scrollTop = logEl.scrollHeight;
44 }
45
46 httpPingBtn.addEventListener('click', async () => {
47 statusEl.textContent = 'HTTP: Pinging...';
48 try {
49 const res = await fetch('/api/ping');
50 const json = await res.json();
51 statusEl.textContent = 'HTTP: OK';
52 log(`HTTP /api/ping -> ${JSON.stringify(json)}`);
53 } catch (err) {
54 statusEl.textContent = 'HTTP: Error';
55 log(`HTTP error: ${err}`);
56 }
57 });
58
59 document.getElementById('testCookiesBtn').addEventListener('click', async () => {
60 statusEl.textContent = 'Cookies: Testing...';
61 try {
62 const res = await fetch('/api/test-cookies');
63 const json = await res.json();
64 statusEl.textContent = 'Cookies: OK';
65 log(`HTTP /api/test-cookies -> ${JSON.stringify(json)}`);
66
67 // Log response headers
68 log(`Response headers:`);
69 for (const [key, value] of res.headers.entries()) {
70 log(` ${key}: ${value}`);
71 }
72
73 // Log current cookies
74 log(`Current document.cookie: ${document.cookie || '(empty)'}`);
75 } catch (err) {
76 statusEl.textContent = 'Cookies: Error';
77 log(`HTTP error: ${err}`);
78 }
79 });
80
81 wsConnectBtn.addEventListener('click', () => {
82 if (ws && ws.readyState === WebSocket.OPEN) {
83 ws.close();
84 return;
85 }
86
87 const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
88 const basePath = location.pathname.endsWith('/') ? location.pathname : (location.pathname + '/');
89 const url = protocol + '//' + window.location.host + basePath + 'ws';
90
91 statusEl.textContent = 'WS: Connecting...';
92 log(`WS connecting to ${url}`);
93
94 ws = new WebSocket(url);
95
96 ws.onopen = () => {
97 statusEl.textContent = 'WS: Connected';
98 log('WS connected');
99 wsSendBtn.disabled = false;
100 wsConnectBtn.textContent = 'WS Disconnect';
101 };
102
103 ws.onclose = () => {
104 statusEl.textContent = 'WS: Disconnected';
105 log('WS disconnected');
106 wsSendBtn.disabled = true;
107 wsConnectBtn.textContent = 'WS Connect';
108 };
109
110 ws.onerror = (err) => {
111 log(`WS error: ${err.message || err}`);
112 };
113
114 ws.onmessage = (event) => {
115 log(`WS recv: ${event.data}`);
116 };
117 });
118
119 wsSendBtn.addEventListener('click', () => {
120 if (!ws || ws.readyState !== WebSocket.OPEN) {
121 log('WS send skipped: not connected');
122 return;
123 }
124 const msg = 'hello';
125 ws.send(msg);
126 log(`WS send: ${msg}`);
127 });
128 </script>
129 </body>
130
131 </html>