' +\n '' + escapeHtml(msg.username) + \"\" +\n '' + formatTime(msg.created_at) + \"\" +\n \"

\" +\n '

' + escapeHtml(msg.text) + \"

\";\n\n return div;\n}\n\nfunction renderUsers(users) {\n userListEl.innerHTML = \"\";\n userCountEl.textContent = users.length;\n for (const u of users) {\n const li = document.createElement(\"li\");\n li.className = u === currentUsername ? \"user-me\" : \"\";\n li.textContent = u === currentUsername ? u + \" (you)\" : u;\n userListEl.appendChild(li);\n }\n}\n\nfunction addSystemMessage(text) {\n const div = document.createElement(\"div\");\n div.className = \"msg-system\";\n div.textContent = text;\n messagesEl.appendChild(div);\n scrollToBottom();\n}\n\n// ===== Join flow =====\n\njoinForm.addEventListener(\"submit\", async (e) => {\n e.preventDefault();\n clearError(joinError);\n\n const username = usernameInput.value.trim();\n\n if (!username) {\n showError(joinError, \"Please enter a username.\");\n usernameInput.focus();\n return;\n }\n if (!/^[a-zA-Z0-9_-]+$/.test(username)) {\n showError(joinError, \"Only letters, numbers, hyphens, and underscores allowed.\");\n return;\n }\n\n joinBtn.disabled = true;\n joinBtn.textContent = \"Joining…\";\n\n try {\n const res = await fetch(\"/api/join\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ username }),\n });\n const data = await res.json();\n\n if (!res.ok) {\n showError(joinError, data.error || \"Could not join.\");\n return;\n }\n\n currentUsername = username;\n enterChat();\n } catch {\n showError(joinError, \"Network error. Try again.\");\n } finally {\n joinBtn.disabled = false;\n joinBtn.textContent = \"Join Chat\";\n }\n});\n\n// ===== Enter chat =====\n\nasync function enterChat() {\n joinScreen.hidden = true;\n chatScreen.hidden = false;\n currentUserLabel.textContent = currentUsername;\n chatInput.focus();\n\n // Load history\n await loadHistory();\n\n // Connect SSE\n connectSSE();\n}\n\nasync function loadHistory() {\n try {\n const res = await fetch(\"/api/messages\");\n const data = await res.json();\n messagesEl.innerHTML = \"\";\n\n if (data.length === 0) {\n const p = document.createElement(\"p\");\n p.className = \"empty-state\";\n p.textContent = \"No messages yet. Say hello!\";\n messagesEl.appendChild(p);\n return;\n }\n\n for (const msg of data) {\n const el = renderMessage(msg);\n if (el) messagesEl.appendChild(el);\n }\n scrollToBottom();\n } catch {\n messagesEl.innerHTML = '

Failed to load history.

';\n }\n}\n\n// ===== SSE =====\n\nfunction connectSSE() {\n if (eventSource) eventSource.close();\n\n eventSource = new EventSource(\"/api/stream?username=\" + encodeURIComponent(currentUsername));\n\n eventSource.onmessage = (e) => {\n let event;\n try {\n event = JSON.parse(e.data);\n } catch {\n return;\n }\n\n if (event.type === \"users_list\" || event.type === \"user_joined\" || event.type === \"user_left\") {\n renderUsers(event.users || []);\n\n if (event.type === \"user_joined\" && event.username !== currentUsername) {\n addSystemMessage(event.username + \" joined the chat\");\n }\n if (event.type === \"user_left\") {\n addSystemMessage(event.username + \" left the chat\");\n }\n }\n\n if (event.type === \"new_message\" && event.message) {\n // Remove empty-state if present\n const empty = messagesEl.querySelector(\".empty-state\");\n if (empty) empty.remove();\n\n const el = renderMessage(event.message);\n if (el) {\n messagesEl.appendChild(el);\n scrollToBottom();\n }\n }\n };\n\n eventSource.onerror = () => {\n // Auto-reconnect is built into EventSource; just log\n console.warn(\"SSE connection lost, reconnecting…\");\n };\n}\n\n// ===== Send message =====\n\nchatForm.addEventListener(\"submit\", async (e) => {\n e.preventDefault();\n clearError(chatError);\n\n const text = chatInput.value.trim();\n\n if (!text) {\n showError(chatError, \"Message cannot be empty.\");\n chatInput.focus();\n return;\n }\n\n sendBtn.disabled = true;\n\n try {\n const res = await fetch(\"/api/messages\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ username: currentUsername, text }),\n });\n const data = await res.json();\n\n if (!res.ok) {\n showError(chatError, data.error || \"Failed to send.\");\n return;\n }\n\n chatInput.value = \"\";\n chatInput.focus();\n } catch {\n showError(chatError, \"Network error. Try again.\");\n } finally {\n sendBtn.disabled = false;\n }\n});\n\n// Cleanup on page unload\nwindow.addEventListener(\"beforeunload\", () => {\n if (eventSource) eventSource.close();\n});\n",[150],"a0fab9e6-5355-11f1-a266-ee650bb23af1","main.tsx",10,["D",1779176266312],"http","import { parseVal, staticHTTPServer } from \"https://esm.town/v/std/utils/index.ts\";\nimport { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\n\n// --- Database setup ---\nawait sqlite.execute(`\n CREATE TABLE IF NOT EXISTS messages (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n username TEXT NOT NULL,\n text TEXT NOT NULL,\n created_at TEXT NOT NULL DEFAULT (datetime('now'))\n )\n`);\n\n// --- Active users & SSE connections ---\nconst activeUsers = new Map(); // username -> connection count\nconst sseControllers = new Set();\n\n// BroadcastChannel for cross-isolate fan-out\nconst channel = new BroadcastChannel(\"chat\");\nchannel.onmessage = (e: MessageEvent) => {\n broadcast(JSON.stringify(e.data));\n};\n\nfunction broadcast(data: string) {\n for (const controller of sseControllers) {\n try {\n controller.enqueue(`data: ${data}\\n\\n`);\n } catch {\n sseControllers.delete(controller);\n }\n }\n}\n\nfunction broadcastEvent(event: Record) {\n const json = JSON.stringify(event);\n broadcast(json);\n // Also send to other isolates\n channel.postMessage(event);\n}\n\nconst fileHandler = staticHTTPServer();\n\nexport default async function (req: Request): Promise {\n const url = new URL(req.url);\n\n // --- Source redirect ---\n if (url.pathname === \"/source\") {\n return new Response(null, {\n status: 302,\n headers: { Location: parseVal().links.self.val },\n });\n }\n\n // --- POST /api/join — claim a username ---\n if (url.pathname === \"/api/join\" && req.method === \"POST\") {\n const body = await req.json();\n const username = (typeof body.username === \"string\" ? body.username : \"\").trim();\n\n if (!username) {\n return Response.json({ error: \"Username cannot be empty.\" }, { status: 400 });\n }\n if (username.length > 24) {\n return Response.json({ error: \"Username must be 24 characters or fewer.\" }, { status: 400 });\n }\n if (!/^[a-zA-Z0-9_-]+$/.test(username)) {\n return Response.json(\n { error: \"Username may only contain letters, numbers, hyphens, and underscores.\" },\n { status: 400 },\n );\n }\n if (activeUsers.has(username)) {\n return Response.json({ error: `\"${username}\" is already taken. Pick another.` }, { status: 409 });\n }\n\n return Response.json({ ok: true });\n }\n\n // --- GET /api/stream?username=... — SSE stream ---\n if (url.pathname === \"/api/stream\" && req.method === \"GET\") {\n const username = url.searchParams.get(\"username\") || \"\";\n if (!username) {\n return Response.json({ error: \"Missing username.\" }, { status: 400 });\n }\n\n // Track this connection\n activeUsers.set(username, (activeUsers.get(username) || 0) + 1);\n\n // Notify everyone that user joined\n broadcastEvent({ type: \"user_joined\", username, users: [...activeUsers.keys()] });\n\n const stream = new ReadableStream({\n start(controller) {\n sseControllers.add(controller);\n\n // Send current user list as first event\n const welcome = JSON.stringify({\n type: \"users_list\",\n users: [...activeUsers.keys()],\n });\n controller.enqueue(`data: ${welcome}\\n\\n`);\n\n // Heartbeat every 25s to keep connection alive\n const heartbeat = setInterval(() => {\n try {\n controller.enqueue(`: heartbeat\\n\\n`);\n } catch {\n clearInterval(heartbeat);\n }\n }, 25_000);\n\n // Cleanup when client disconnects\n req.signal.addEventListener(\"abort\", () => {\n clearInterval(heartbeat);\n sseControllers.delete(controller);\n\n const count = (activeUsers.get(username) || 1) - 1;\n if (count <= 0) {\n activeUsers.delete(username);\n } else {\n activeUsers.set(username, count);\n }\n\n broadcastEvent({ type: \"user_left\", username, users: [...activeUsers.keys()] });\n });\n },\n cancel() {\n // handled by abort above\n },\n });\n\n return new Response(stream, {\n headers: {\n \"Content-Type\": \"text/event-stream\",\n \"Cache-Control\": \"no-cache\",\n Connection: \"keep-alive\",\n },\n });\n }\n\n // --- GET /api/messages — chat history ---\n if (url.pathname === \"/api/messages\" && req.method === \"GET\") {\n const result = await sqlite.execute(\n \"SELECT id, username, text, created_at FROM messages ORDER BY created_at ASC LIMIT 200\",\n );\n return Response.json(result.rows);\n }\n\n // --- POST /api/messages — send a message ---\n if (url.pathname === \"/api/messages\" && req.method === \"POST\") {\n try {\n const body = await req.json();\n const username = (typeof body.username === \"string\" ? body.username : \"\").trim();\n const text = (typeof body.text === \"string\" ? body.text : \"\").trim();\n\n if (!username) {\n return Response.json({ error: \"Username is required.\" }, { status: 400 });\n }\n if (!text) {\n return Response.json({ error: \"Message cannot be empty.\" }, { status: 400 });\n }\n if (text.length > 2000) {\n return Response.json({ error: \"Message is too long (max 2000 chars).\" }, { status: 400 });\n }\n\n const result = await sqlite.execute({\n sql: \"INSERT INTO messages (username, text) VALUES (?, ?) RETURNING id, username, text, created_at\",\n args: [username, text],\n });\n\n const msg = result.rows[0];\n\n broadcastEvent({ type: \"new_message\", message: msg });\n\n return Response.json(msg, { status: 201 });\n } catch {\n return Response.json({ error: \"Invalid request body.\" }, { status: 400 });\n }\n }\n\n // --- Everything else: static files ---\n return fileHandler(req);\n}\n",[158],"a786248a-5355-11f1-ba8f-ee650bb23af1","index.html","019e3f17-e7be-75a9-b3c3-0a9ce859d012",11,["D",1779176277289],"\n\n \n 💬 Support Chat\n \n \n \n \n \n \n \n \n \n\n \n

💬 Support Chat

Enter a username to join the conversation.

\n\n \n \n\n \n\n",[165],"a94ffed8-5352-11f1-8fad-ee650bb23af1","favicon.svg","019e3f17-e7be-75a9-b3c3-05560deb57fe",1,["D",1779174991728],"",[172],"d7edd7f8-5355-11f1-91a1-ee650bb23af1","README.md","019e3f17-e7be-75a9-b3c3-014d7d38a1f4",["D",1779176358504],"# 💬 Real-Time Support Chat\n\nA multi-user real-time chat app built on Val Town with persistent message history.\n\n## Features\n\n- **Username join gate** — users pick a unique username before entering chat\n- **Real-time messaging** — Server-Sent Events (SSE) push new messages to all connected clients instantly\n- **Persistent history** — messages are stored in SQLite and loaded on page reload\n- **Online user list** — sidebar shows who's currently connected\n- **Join/leave notifications** — system messages when users enter or leave\n- **Validation** — empty usernames, empty messages, duplicate usernames, and oversized messages are all rejected with clear error messages\n- **Multi-tab support** — open in multiple browser tabs with different usernames to test\n\n## Architecture\n\n```mermaid\nsequenceDiagram\n participant Client A\n participant Server (main.tsx)\n participant SQLite\n participant Client B\n\n Client A->>Server: POST /api/join {username}\n Server-->>Client A: 200 OK\n Client A->>Server: GET /api/stream?username=...\n Note over Server: SSE connection opened\n Server-->>Client A: event: users_list\n\n Client A->>Server: POST /api/messages {username, text}\n Server->>SQLite: INSERT INTO messages\n Server-->>Client A: 201 Created\n Server-->>Client A: SSE: new_message\n Server-->>Client B: SSE: new_message\n```\n\n## API Endpoints\n\n| Method | Path | Description |\n|--------|------|-------------|\n| `POST` | `/api/join` | Validate & claim a username |\n| `GET` | `/api/stream?username=` | SSE stream for real-time events |\n| `GET` | `/api/messages` | Fetch chat history (last 200) |\n| `POST` | `/api/messages` | Send a new message |\n\n## Files\n\n- `main.tsx` — HTTP server with API routes, SSE streaming, BroadcastChannel\n- `index.html` — Join screen + chat UI\n- `script.js` — Client-side logic (SSE client, form handling)\n- `style.css` — Chat layout and styling\n",[179],"pulls","branches","forks","envVars",{"_191":42,"_193":42},"connections",{"_191":42,"_192":42},"count","unfilledCount","emptyCount",{"_18":178,"_20":179,"_134":180,"_136":-5,"_137":71,"_138":69,"_140":38,"_22":216,"_68":174,"_143":103,"_144":182,"_146":26,"_147":-5,"_201":217,"_92":218},{"_18":171,"_20":172,"_134":173,"_136":-5,"_137":71,"_138":174,"_140":38,"_22":213,"_68":42,"_143":103,"_144":176,"_146":26,"_147":-5,"_201":214,"_92":215},{"_18":164,"_20":165,"_134":166,"_136":-5,"_137":71,"_138":167,"_140":38,"_22":210,"_68":142,"_143":103,"_144":169,"_146":26,"_147":-5,"_201":211,"_92":212},{"_18":157,"_20":158,"_134":36,"_136":-5,"_137":71,"_138":159,"_140":38,"_22":207,"_68":142,"_143":161,"_144":162,"_146":26,"_147":-5,"_201":208,"_92":209},{"_18":149,"_20":150,"_134":151,"_136":-5,"_137":71,"_138":152,"_140":38,"_22":204,"_68":142,"_143":154,"_144":155,"_146":26,"_147":-5,"_201":205,"_92":206},{"_18":132,"_20":133,"_134":135,"_136":-5,"_137":71,"_138":139,"_140":38,"_22":200,"_68":142,"_143":103,"_144":145,"_146":26,"_147":-5,"_201":202,"_92":203},["D",1779176327878],"children",[],[133],["D",1779176300949],[],[150],["D",1779176266312],[],[158],["D",1779176277289],[],[165],["D",1779174991728],[],[172],["D",1779176358504],[],[179],["D",1779174991728],["D",1789469441210],{"_16":17,"_90":86},{"_16":17,"_84":17,"_85":86,"_33":34,"_87":88,"_89":26},{"_68":69,"_20":70,"_18":71,"_72":19,"_73":74,"_75":76,"_77":28,"_78":79,"_80":81,"_82":21,"_83":17},"ctx",{"_61":-5,"_113":257,"_258":259,"_260":261,"_262":26,"_263":26,"_264":26,"_265":38,"_266":-5,"_267":-7,"_268":-7,"_269":42,"_270":26,"_271":26,"_272":-5,"_273":26,"_274":26,"_275":26,"_276":-5},"ENV",{"_228":229,"_230":231,"_232":70,"_233":234,"_235":236,"_237":238,"_239":240,"_241":242,"_243":244,"_245":246,"_247":248,"_249":250,"_251":252,"_253":254,"_255":256},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Search