${message.username}

` : ''}\n

${escapeHtml(message.content)}

${formatTimestamp(message.createdAt)}

\n `;\n \n messagesContainer.appendChild(messageElement);\n scrollToBottom();\n}\n\n// Add a system message to the chat\nfunction addSystemMessage(text) {\n const messageElement = document.createElement('div');\n messageElement.className = 'message-bubble system-message';\n messageElement.textContent = text;\n \n messagesContainer.appendChild(messageElement);\n scrollToBottom();\n}\n\n// Show the chat screen\nfunction showChatScreen() {\n console.log('Showing chat screen');\n \n if (!loginScreen || !chatScreen) {\n console.error('Login or chat screen elements not found!', {\n loginScreen: !!loginScreen,\n chatScreen: !!chatScreen\n });\n alert('Error loading chat interface. Please refresh the page.');\n return;\n }\n \n loginScreen.classList.add('hidden');\n chatScreen.classList.remove('hidden');\n \n if (currentUserSpan) {\n currentUserSpan.textContent = username;\n }\n \n if (messageInput) {\n messageInput.focus();\n }\n \n console.log('Chat screen should now be visible');\n}\n\n// Utility: Scroll to the bottom of the messages container\nfunction scrollToBottom() {\n messagesContainer.scrollTop = messagesContainer.scrollHeight;\n}\n\n// Utility: Format timestamp\nfunction formatTimestamp(timestamp) {\n const date = new Date(timestamp);\n return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });\n}\n\n// Utility: Escape HTML to prevent XSS\nfunction escapeHtml(unsafe) {\n return unsafe\n .replace(/&/g, \"&\")\n .replace(//g, \">\")\n .replace(/\"/g, \""\")\n .replace(/'/g, \"'\");\n}\n\n// Initialize the app when the DOM is loaded\ndocument.addEventListener('DOMContentLoaded', () => {\n console.log('DOM content loaded, initializing app...');\n init();\n});",[],[134,184],"672f6512-30ed-11f0-b6cf-569c3dd06744","index.html","73354b52-30ec-11f0-9261-569c3dd06744",17,["D",1747245664492],"\n\n\n \n \n Real-Time Chat\n \n \n \n\n\n

\n \n \n\n \n

Real-Time Chat

Logged in as:

\n\n

\n \n

\n\n \n

\n \n \n

\n Error!\n JavaScript is not working properly. Please try refreshing the page or check your browser settings.\n

\n\n \n \n\n \n \n \n \n\n",[],[134,193],"84b6bdac-30ec-11f0-aeee-569c3dd06744","84b6be56-30ec-11f0-aeee-569c3dd06744",10,["D",1747245284541],"# Frontend for Real-Time Chat\n\nThis directory contains the frontend code for the real-time chat application.\n\n## Components\n\n- `index.html`: Main HTML template with the chat UI\n- `index.js`: Frontend JavaScript for handling WebSocket communication and UI updates\n\n## Features\n\n- Real-time message updates using WebSockets\n- User authentication with username\n- Message history display\n- Responsive design with Tailwind CSS",[],[134,111],["D",1747245255169],[162,163,164],[134],"81a98968-30ed-11f0-96fd-569c3dd06744","index.ts",["D",1747245708914],"http","import { Hono } from \"https://esm.sh/hono@3.12.6\";\nimport { cors } from \"https://esm.sh/hono@3.12.6/cors\";\nimport { serveFile, readFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\nimport { runMigrations } from \"./database/migrations.ts\";\nimport { createMessage, createUser, getRecentMessages, getUserByUsername } from \"./database/queries.ts\";\nimport { ChatEvent, ClientMessage, Message, User } from \"../shared/types.ts\";\n\n// Run migrations on startup\ntry {\n console.log(\"Running database migrations...\");\n await runMigrations();\n console.log(\"Database migrations completed successfully\");\n} catch (error) {\n console.error(\"Error running database migrations:\", error);\n}\n\nconst app = new Hono();\n\n// Unwrap Hono errors to see original error details\napp.onError((err, c) => {\n console.error(\"Hono error:\", err);\n throw err;\n});\n\n// Enable CORS\napp.use(\"*\", cors());\n\n// Store active WebSocket connections with user info\nconst activeConnections = new Map();\n\n// WebSocket handler\napp.get(\"/ws\", async (c) => {\n console.log(\"WebSocket connection request received\");\n \n try {\n const { response, socket } = Deno.upgradeWebSocket(c.req.raw);\n console.log(\"WebSocket upgraded successfully\");\n\n socket.onopen = async () => {\n console.log(\"WebSocket connection opened\");\n };\n\n socket.onmessage = async (event) => {\n try {\n console.log(\"WebSocket message received:\", event.data);\n const data = JSON.parse(event.data) as ClientMessage;\n \n if (data.type === \"join\") {\n if (!data.username) {\n console.error(\"Join attempt without username\");\n socket.send(JSON.stringify({\n type: \"error\",\n data: \"Username is required\"\n }));\n return;\n }\n\n console.log(`User attempting to join: ${data.username}`);\n \n // Check if username exists, create if not\n let user: User;\n try {\n let existingUser = await getUserByUsername(data.username);\n if (!existingUser) {\n console.log(`Creating new user: ${data.username}`);\n user = await createUser(data.username);\n } else {\n console.log(`User exists: ${data.username}`);\n user = existingUser;\n }\n } catch (error) {\n console.error(`Error getting/creating user ${data.username}:`, error);\n socket.send(JSON.stringify({\n type: \"error\",\n data: \"Failed to join chat. Please try again.\"\n }));\n return;\n }\n\n // Store user info with the connection\n activeConnections.set(socket, {\n userId: user.id,\n username: user.username\n });\n console.log(`User ${user.username} joined successfully`);\n\n // Send message history to the new user\n try {\n const recentMessages = await getRecentMessages();\n console.log(`Sending ${recentMessages.length} messages to new user`);\n socket.send(JSON.stringify({\n type: \"history\",\n data: recentMessages\n } as ChatEvent));\n } catch (error) {\n console.error(\"Error fetching message history:\", error);\n }\n\n // Notify all users about the new user\n broadcastMessage({\n type: \"user_joined\",\n data: {\n id: user.id,\n username: user.username,\n createdAt: user.createdAt\n }\n });\n } \n else if (data.type === \"message\") {\n const userInfo = activeConnections.get(socket);\n if (!userInfo) {\n console.error(\"Message from unauthenticated connection\");\n socket.send(JSON.stringify({\n type: \"error\",\n data: \"You must join before sending messages\"\n }));\n return;\n }\n\n if (!data.content || data.content.trim() === \"\") {\n console.log(\"Empty message received, ignoring\");\n return; // Ignore empty messages\n }\n\n console.log(`Message from ${userInfo.username}: ${data.content}`);\n\n // Save message to database\n try {\n const message = await createMessage(userInfo.userId, data.content);\n \n // Broadcast message to all clients\n broadcastMessage({\n type: \"message\",\n data: message\n });\n } catch (error) {\n console.error(\"Error saving/broadcasting message:\", error);\n socket.send(JSON.stringify({\n type: \"error\",\n data: \"Failed to send message\"\n }));\n }\n }\n } catch (error) {\n console.error(\"Error processing WebSocket message:\", error);\n socket.send(JSON.stringify({\n type: \"error\",\n data: \"Failed to process message\"\n }));\n }\n };\n\n socket.onclose = (event) => {\n const userInfo = activeConnections.get(socket);\n if (userInfo) {\n console.log(`User ${userInfo.username} disconnected`);\n // Notify all users that this user has left\n broadcastMessage({\n type: \"user_left\",\n data: userInfo.username\n });\n \n // Remove from active connections\n activeConnections.delete(socket);\n } else {\n console.log(\"Unknown connection closed\");\n }\n };\n\n socket.onerror = (error) => {\n console.error(\"WebSocket error:\", error);\n activeConnections.delete(socket);\n };\n\n return response;\n } catch (error) {\n console.error(\"Error handling WebSocket connection:\", error);\n return new Response(\"WebSocket connection failed\", { status: 500 });\n }\n});\n\n// Broadcast a message to all connected clients\nfunction broadcastMessage(event: ChatEvent) {\n const message = JSON.stringify(event);\n console.log(`Broadcasting: ${message}`);\n let sentCount = 0;\n \n for (const client of activeConnections.keys()) {\n if (client.readyState === WebSocket.OPEN) {\n try {\n client.send(message);\n sentCount++;\n } catch (error) {\n console.error(\"Error sending to client:\", error);\n }\n }\n }\n \n console.log(`Message broadcast to ${sentCount} clients`);\n}\n\n// API routes\napp.get(\"/api/messages\", async (c) => {\n try {\n const messages = await getRecentMessages();\n return c.json(messages);\n } catch (error) {\n console.error(\"Error fetching messages:\", error);\n return c.json({ error: \"Failed to fetch messages\" }, 500);\n }\n});\n\n// Health check endpoint\napp.get(\"/health\", (c) => {\n return c.json({ \n status: \"ok\", \n connections: activeConnections.size,\n timestamp: new Date().toISOString()\n });\n});\n\n// Serve static files\napp.get(\"/\", async (c) => {\n try {\n console.log(\"Serving index.html\");\n let html = await readFile(\"/frontend/index.html\", import.meta.url);\n return c.html(html);\n } catch (error) {\n console.error(\"Error serving index.html:\", error);\n return c.text(\"Error loading chat application. Please try again later.\", 500);\n }\n});\n\napp.get(\"/index.js\", (c) => {\n console.log(\"Serving index.js\");\n return serveFile(c.req.path, import.meta.url);\n});\n\napp.get(\"/frontend/*\", (c) => {\n console.log(`Serving ${c.req.path}`);\n return serveFile(c.req.path, import.meta.url);\n});\n\napp.get(\"/shared/*\", (c) => {\n console.log(`Serving ${c.req.path}`);\n return serveFile(c.req.path, import.meta.url);\n});\n\n// This is the entry point for HTTP vals\nexport default app.fetch;",[],[140,211],"5630804e-30ec-11f0-903c-569c3dd06744","5630812a-30ec-11f0-903c-569c3dd06744",5,["D",1747245206486],"# Backend for Real-Time Chat\n\nThis directory contains the backend code for the real-time chat application.\n\n## Components\n\n- `index.ts`: Main entry point with Hono setup, WebSocket handling, and HTTP routes\n- `database/`: Database setup and queries\n - `migrations.ts`: Schema definitions\n - `queries.ts`: Database query functions\n\n## WebSocket Protocol\n\nThe WebSocket connection handles the following message types:\n\n### From Client to Server:\n- `join`: User joining the chat with a username\n- `message`: User sending a message\n\n### From Server to Client:\n- `message`: New message from a user\n- `user_joined`: Notification when a user joins\n- `user_left`: Notification when a user leaves\n- `history`: Message history when a user first connects",[],[140,111],"528b7f8e-30ec-11f0-afc4-569c3dd06744","queries.ts","528b8038-30ec-11f0-afc4-569c3dd06744","6b44e177-edc5-4dde-b1ba-ac680f21541e",4,["D",1747245200370],"import { sqlite } from \"https://esm.town/v/stevekrouse/sqlite\";\nimport { Message, User } from \"../../shared/types.ts\";\nimport { MESSAGES_TABLE, USERS_TABLE } from \"./migrations.ts\";\n\n// User queries\nexport async function createUser(username: string): Promise {\n const now = new Date().toISOString();\n \n const result = await sqlite.execute(\n `INSERT INTO ${USERS_TABLE} (username, created_at) VALUES (?, ?) RETURNING id, username, created_at`,\n [username, now]\n );\n \n if (result.rows.length === 0) {\n throw new Error(\"Failed to create user\");\n }\n \n return {\n id: result.rows[0][0] as number,\n username: result.rows[0][1] as string,\n createdAt: result.rows[0][2] as string\n };\n}\n\nexport async function getUserByUsername(username: string): Promise {\n const result = await sqlite.execute(\n `SELECT id, username, created_at FROM ${USERS_TABLE} WHERE username = ?`,\n [username]\n );\n \n if (result.rows.length === 0) {\n return null;\n }\n \n return {\n id: result.rows[0][0] as number,\n username: result.rows[0][1] as string,\n createdAt: result.rows[0][2] as string\n };\n}\n\n// Message queries\nexport async function createMessage(userId: number, content: string): Promise {\n const now = new Date().toISOString();\n \n // First get the username\n const userResult = await sqlite.execute(\n `SELECT username FROM ${USERS_TABLE} WHERE id = ?`,\n [userId]\n );\n \n if (userResult.rows.length === 0) {\n throw new Error(\"User not found\");\n }\n \n const username = userResult.rows[0][0] as string;\n \n // Then create the message\n const result = await sqlite.execute(\n `INSERT INTO ${MESSAGES_TABLE} (user_id, content, created_at) VALUES (?, ?, ?) RETURNING id`,\n [userId, content, now]\n );\n \n if (result.rows.length === 0) {\n throw new Error(\"Failed to create message\");\n }\n \n return {\n id: result.rows[0][0] as number,\n userId,\n username,\n content,\n createdAt: now\n };\n}\n\nexport async function getRecentMessages(limit = 50): Promise {\n const result = await sqlite.execute(\n `SELECT m.id, m.user_id, u.username, m.content, m.created_at \n FROM ${MESSAGES_TABLE} m\n JOIN ${USERS_TABLE} u ON m.user_id = u.id\n ORDER BY m.created_at DESC\n LIMIT ?`,\n [limit]\n );\n \n return result.rows.map(row => ({\n id: row[0] as number,\n userId: row[1] as number,\n username: row[2] as string,\n content: row[3] as string,\n createdAt: row[4] as string\n })).reverse(); // Reverse to get oldest first\n}",[],[140,233,225],"database","4be5ea3e-30ec-11f0-be93-569c3dd06744","migrations.ts","4be5eb06-30ec-11f0-be93-569c3dd06744",["D",1747245189189],"import { sqlite } from \"https://esm.town/v/stevekrouse/sqlite\";\n\n// Table names - change these when modifying schema\nexport const USERS_TABLE = 'chat_users';\nexport const MESSAGES_TABLE = 'chat_messages';\n\nexport async function runMigrations() {\n // Create users table\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${USERS_TABLE} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n username TEXT NOT NULL UNIQUE,\n created_at TEXT NOT NULL\n )\n `);\n\n // Create messages table\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${MESSAGES_TABLE} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n user_id INTEGER NOT NULL,\n content TEXT NOT NULL,\n created_at TEXT NOT NULL,\n FOREIGN KEY (user_id) REFERENCES ${USERS_TABLE}(id)\n )\n `);\n}",[],[140,233,235],"4be61f2c-30ec-11f0-be93-569c3dd06744",["D",1747245189189],[157,158],[140,233],["D",1747245189189],[156,159,160],[140],["D",1747245081250],{"_16":17,"_82":78},{"_16":17,"_76":-5,"_77":78,"_32":33,"_79":80,"_81":26},{"_64":65,"_20":66,"_18":67,"_68":19,"_69":-5,"_70":-5,"_71":-5,"_72":-5,"_73":-5,"_74":21,"_75":17},"ctx",{"_57":-5,"_103":285,"_286":287,"_288":289,"_290":26,"_291":26,"_292":26,"_293":37,"_294":-5,"_295":-7,"_296":-7,"_297":41,"_298":26,"_299":26,"_300":-5,"_301":26,"_302":26,"_303":26,"_304":-5},"ENV",{"_256":257,"_258":259,"_260":66,"_261":262,"_263":264,"_265":266,"_267":268,"_269":270,"_271":272,"_273":274,"_275":276,"_277":278,"_279":280,"_281":282,"_283":284},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","71c1b20804b3232a7e513be260cfffc1932a9e97","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"]

Join the Chat

Search