[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_262":263,"_264":265},"routes/_app.x.$handle.$name",{"_95":94,"_32":46,"_103":85,"_27":104,"_13":14,"_105":-5,"_11":106,"_107":108,"_109":110,"_111":112,"_113":114,"_20":-5,"_115":-5,"_116":-5,"_117":25,"_118":119,"_120":58,"_121":-5,"_122":-5,"_123":124},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_44":45,"_32":46,"_39":47,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":-5,"_54":-5,"_18":55,"_56":31,"_57":58,"_59":58,"_60":-5,"_61":62,"_63":64,"_65":-5,"_66":-5,"_67":-5,"_68":-5,"_69":70,"_71":70,"_72":73,"_74":73,"_75":73,"_76":70,"_77":70,"_78":79,"_80":81,"_82":83,"_84":25},"version",18,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":33,"_34":35,"_36":38,"_39":40,"_41":14,"_42":43,"_24":25},"previous",{"_30":31,"_32":33,"_34":35,"_36":37},"deleted",false,"deletedHere","path","backend/index.ts","latestPath","fileId","622bd9f2-30ec-11f0-aeee-569c3dd06744","name","index.ts","fileType","http","content","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\nawait runMigrations();\n\nconst app = new Hono();\n\n// Unwrap Hono errors to see original error details\napp.onError((err, c) => {\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 const { response, socket } = Deno.upgradeWebSocket(c.req.raw);\n\n socket.onopen = async () => {\n console.log(\"WebSocket connection opened\");\n };\n\n socket.onmessage = async (event) => {\n try {\n const data = JSON.parse(event.data) as ClientMessage;\n \n if (data.type === \"join\") {\n if (!data.username) {\n socket.send(JSON.stringify({\n type: \"error\",\n data: \"Username is required\"\n }));\n return;\n }\n\n // Check if username exists, create if not\n let user = await getUserByUsername(data.username);\n if (!user) {\n user = await createUser(data.username);\n }\n\n // Store user info with the connection\n activeConnections.set(socket, {\n userId: user.id,\n username: user.username\n });\n\n // Send message history to the new user\n const recentMessages = await getRecentMessages();\n socket.send(JSON.stringify({\n type: \"history\",\n data: recentMessages\n } as ChatEvent));\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 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 return; // Ignore empty messages\n }\n\n // Save message to database\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 }\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 = () => {\n const userInfo = activeConnections.get(socket);\n if (userInfo) {\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 }\n console.log(\"WebSocket connection closed\");\n };\n\n socket.onerror = (error) => {\n console.error(\"WebSocket error:\", error);\n activeConnections.delete(socket);\n };\n\n return response;\n});\n\n// Broadcast a message to all connected clients\nfunction broadcastMessage(event: ChatEvent) {\n const message = JSON.stringify(event);\n for (const client of activeConnections.keys()) {\n if (client.readyState === WebSocket.OPEN) {\n client.send(message);\n }\n }\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// Serve static files\napp.get(\"/\", async (c) => {\n let html = await readFile(\"/frontend/index.html\", import.meta.url);\n return c.html(html);\n});\n\napp.get(\"/index.js\", (c) => serveFile(c.req.path, import.meta.url));\napp.get(\"/frontend/*\", (c) => serveFile(c.req.path, import.meta.url));\napp.get(\"/shared/*\", (c) => serveFile(c.req.path, import.meta.url));\n\n// This is the entry point for HTTP vals\nexport default app.fetch;","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;","createdAt",["D",1747245708914],"branchVersion","branchId","0b8ad620-30ec-11f0-a9be-569c3dd06744","id","0b8a871a-30ec-11f0-a9be-569c3dd06744","ZenChat",["D",1747245081250],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","e8917520-30eb-11f0-9ec7-71254960a09e","pinnedFileId","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","5a1594bd-e38a-4c55-b44c-9982260951e3","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_95":94,"_102":98},"org",{"_95":94,"_96":-5,"_97":98,"_18":55,"_99":100,"_101":25},"branch",{"_13":14,"_32":85,"_44":43,"_86":45,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":46,"_93":94},"isOwned","main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","mehran","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yeDY0Nlg2NjU2dUpmZzByOWJ1Z2lidElGeHYifQ","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_44":45,"_32":46,"_39":258,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":-5,"_54":-5,"_18":55,"_56":31,"_57":58,"_59":58,"_60":-5,"_61":62,"_63":64,"_65":-5,"_66":-5,"_67":-5,"_68":-5,"_69":70,"_71":70,"_72":73,"_74":73,"_75":73,"_76":70,"_77":70,"_78":259,"_80":260,"_82":261,"_84":25},"tree",[168,174,178,180],"files",[168,169,170,171,172,173,174,175,176,177,178,179,180],"counts",{"_158":62,"_159":133,"_160":62,"_161":162,"_163":164},"contents",[125,126,127,128],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_44":152,"_32":153,"_30":154,"_132":-5,"_42":43,"_41":155,"_134":58,"_39":156,"_13":62,"_34":144,"_36":-5,"_24":25,"_137":-5,"_27":157},{"_44":146,"_32":147,"_30":148,"_132":-5,"_42":43,"_41":149,"_134":58,"_39":150,"_13":62,"_34":144,"_36":-5,"_24":25,"_137":-5,"_27":151},{"_44":139,"_32":140,"_30":141,"_132":-5,"_42":43,"_41":142,"_134":58,"_39":143,"_13":62,"_34":144,"_36":-5,"_24":25,"_137":-5,"_27":145},{"_44":129,"_32":130,"_30":131,"_132":-5,"_42":43,"_41":133,"_134":58,"_39":135,"_13":62,"_34":20,"_36":136,"_24":25,"_137":-5,"_27":138},"462ae7e8-30ec-11f0-b25e-569c3dd06744","README.md","462ae8c4-30ec-11f0-b25e-569c3dd06744","parentId",1,"latest",["D",1747245179604],"# Real-Time Chat Application\n\nA fully functional real-time chat application built on Val Town.\n\n## Features\n\n- Real-time messaging using WebSockets\n- User authentication\n- Message history\n- Clean, responsive UI\n\n## Project Structure\n\n```\n├── backend/\n│ ├── database/\n│ │ ├── migrations.ts # Schema definitions\n│ │ └── queries.ts # DB query functions\n│ ├── index.ts # Main entry point with WebSocket and HTTP handlers\n│ └── README.md\n├── frontend/\n│ ├── index.html # Main HTML template\n│ ├── index.js # Frontend JS\n│ └── README.md\n└── shared/\n └── types.ts # Shared types\n```\n\n## How to Use\n\n1. Visit the application URL\n2. Enter your username to join\n3. Start chatting in real-time with other users\n\n## Technologies Used\n\n- Backend: Hono, WebSockets, SQLite\n- Frontend: HTML, JavaScript, Tailwind CSS\n- Real-time Communication: WebSockets","label",[130],"4895e60e-30ec-11f0-abc6-569c3dd06744","shared","72ea7692-9108-4a89-8c0c-d0c3f911a942",2,["D",1747245183658],"directory",[140],"7335d7f2-30ec-11f0-9261-569c3dd06744","frontend","a99fdb17-6ea3-4dc7-b4f8-46a00cd14095",7,["D",1747245255169],[147],"4be61d56-30ec-11f0-be93-569c3dd06744","backend","8fbbaf1d-974c-4978-a82c-463d1aca5e88",3,["D",1747245189189],[153],"pulls","branches","forks","envVars",{"_165":62,"_167":62},"connections",{"_165":62,"_166":62},"count","unfilledCount","emptyCount",{"_44":152,"_32":153,"_30":154,"_132":-5,"_42":43,"_41":155,"_134":58,"_39":255,"_13":62,"_34":144,"_36":-5,"_24":25,"_137":-5,"_182":256,"_27":257},{"_44":251,"_32":243,"_30":237,"_132":154,"_42":43,"_41":155,"_134":58,"_39":252,"_13":62,"_34":144,"_36":-5,"_24":25,"_137":-5,"_182":253,"_27":254},{"_44":244,"_32":245,"_30":246,"_132":237,"_42":43,"_41":155,"_134":58,"_39":247,"_13":62,"_34":189,"_36":248,"_24":25,"_137":-5,"_182":249,"_27":250},{"_44":234,"_32":235,"_30":236,"_132":237,"_42":43,"_41":238,"_134":58,"_39":239,"_13":62,"_34":189,"_36":240,"_24":25,"_137":-5,"_182":241,"_27":242},{"_44":227,"_32":130,"_30":228,"_132":154,"_42":43,"_41":229,"_134":58,"_39":230,"_13":62,"_34":20,"_36":231,"_24":25,"_137":-5,"_182":232,"_27":233},{"_44":223,"_32":33,"_30":31,"_132":154,"_42":43,"_41":14,"_134":58,"_39":224,"_13":142,"_34":35,"_36":38,"_24":25,"_137":-5,"_182":225,"_27":226},{"_44":146,"_32":147,"_30":148,"_132":-5,"_42":43,"_41":149,"_134":58,"_39":220,"_13":62,"_34":144,"_36":-5,"_24":25,"_137":-5,"_182":221,"_27":222},{"_44":213,"_32":130,"_30":214,"_132":148,"_42":43,"_41":215,"_134":58,"_39":216,"_13":62,"_34":20,"_36":217,"_24":25,"_137":-5,"_182":218,"_27":219},{"_44":205,"_32":206,"_30":207,"_132":148,"_42":43,"_41":208,"_134":58,"_39":209,"_13":133,"_34":20,"_36":210,"_24":25,"_137":-5,"_182":211,"_27":212},{"_44":196,"_32":197,"_30":198,"_132":148,"_42":43,"_41":199,"_134":58,"_39":200,"_13":201,"_34":189,"_36":202,"_24":25,"_137":-5,"_182":203,"_27":204},{"_44":139,"_32":140,"_30":141,"_132":-5,"_42":43,"_41":142,"_134":58,"_39":193,"_13":62,"_34":144,"_36":-5,"_24":25,"_137":-5,"_182":194,"_27":195},{"_44":185,"_32":186,"_30":187,"_132":141,"_42":43,"_41":142,"_134":58,"_39":188,"_13":62,"_34":189,"_36":190,"_24":25,"_137":-5,"_182":191,"_27":192},{"_44":129,"_32":130,"_30":131,"_132":-5,"_42":43,"_41":133,"_134":58,"_39":181,"_13":62,"_34":20,"_36":136,"_24":25,"_137":-5,"_182":183,"_27":184},["D",1747245179604],"children",[],[130],"4895c656-30ec-11f0-abc6-569c3dd06744","types.ts","4895c71e-30ec-11f0-abc6-569c3dd06744",["D",1747245183658],"script","// Types shared between frontend and backend\n\nexport interface User {\n id: number;\n username: string;\n createdAt: string;\n}\n\nexport interface Message {\n id: number;\n userId: number;\n username: string;\n content: string;\n createdAt: string;\n}\n\nexport interface ChatEvent {\n type: 'message' | 'user_joined' | 'user_left' | 'history';\n data: Message | User | Message[] | string;\n}\n\nexport interface ClientMessage {\n type: 'message' | 'join';\n username?: string;\n content?: string;\n}",[],[140,186],["D",1747245183658],[179],[140],"5146e644-30ed-11f0-a865-569c3dd06744","index.js","7fa2b5fa-30ec-11f0-810d-569c3dd06744",16,["D",1747245627733],6,"// Get DOM elements\nconst loginScreen = document.getElementById('login-screen');\nconst chatScreen = document.getElementById('chat-screen');\nconst loginForm = document.getElementById('login-form');\nconst messageForm = document.getElementById('message-form');\nconst messageInput = document.getElementById('message-input');\nconst messagesContainer = document.getElementById('messages');\nconst currentUserSpan = document.getElementById('current-user');\n\n// Add debug message to help troubleshoot\nconsole.log('DOM elements loaded:', {\n loginScreen: !!loginScreen,\n chatScreen: !!chatScreen,\n loginForm: !!loginForm,\n messageForm: !!messageForm\n});\n\n// State\nlet username = '';\nlet socket = null;\nlet reconnectAttempts = 0;\nconst maxReconnectAttempts = 5;\n\n// Initialize the app\nfunction init() {\n console.log('Initializing app...');\n \n // Check if we're already logged in\n const savedUsername = localStorage.getItem('chat_username');\n if (savedUsername) {\n console.log('Found saved username:', savedUsername);\n username = savedUsername;\n showChatScreen();\n connectWebSocket();\n } else {\n console.log('No saved username found, showing login screen');\n }\n\n // Set up event listeners\n if (loginForm) {\n console.log('Setting up login form handler');\n loginForm.addEventListener('submit', handleLogin);\n } else {\n console.error('Login form not found!');\n }\n \n if (messageForm) {\n console.log('Setting up message form handler');\n messageForm.addEventListener('submit', handleSendMessage);\n } else {\n console.error('Message form not found!');\n }\n}\n\n// Handle login form submission\nfunction handleLogin(event) {\n event.preventDefault();\n console.log('Login form submitted');\n \n const usernameInput = document.getElementById('username');\n if (!usernameInput) {\n console.error('Username input not found!');\n return;\n }\n \n username = usernameInput.value.trim();\n \n if (!username) {\n alert('Please enter a username');\n return;\n }\n \n console.log('Username entered:', username);\n \n // Save username to localStorage\n localStorage.setItem('chat_username', username);\n \n // Show chat screen and connect to WebSocket\n showChatScreen();\n connectWebSocket();\n}\n\n// Handle message form submission\nfunction handleSendMessage(event) {\n event.preventDefault();\n const message = messageInput.value.trim();\n \n if (!message || !socket) return;\n \n // Send message to server\n socket.send(JSON.stringify({\n type: 'message',\n content: message\n }));\n \n // Clear input\n messageInput.value = '';\n}\n\n// Connect to WebSocket server\nfunction connectWebSocket() {\n console.log('Connecting to WebSocket...');\n \n try {\n // Get the current host\n const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';\n const wsUrl = `${protocol}//${window.location.host}/ws`;\n console.log('WebSocket URL:', wsUrl);\n \n socket = new WebSocket(wsUrl);\n \n socket.onopen = () => {\n console.log('WebSocket connected successfully');\n reconnectAttempts = 0;\n \n // Join the chat\n const joinMessage = JSON.stringify({\n type: 'join',\n username: username\n });\n console.log('Sending join message:', joinMessage);\n socket.send(joinMessage);\n };\n \n socket.onmessage = (event) => {\n console.log('Received WebSocket message:', event.data);\n try {\n const data = JSON.parse(event.data);\n handleWebSocketMessage(data);\n } catch (error) {\n console.error('Error parsing WebSocket message:', error);\n }\n };\n \n socket.onclose = (event) => {\n console.log('WebSocket disconnected:', event);\n \n // Try to reconnect\n if (reconnectAttempts < maxReconnectAttempts) {\n reconnectAttempts++;\n const delay = Math.min(1000 * reconnectAttempts, 5000);\n \n console.log(`Will attempt to reconnect in ${delay}ms (${reconnectAttempts}/${maxReconnectAttempts})...`);\n setTimeout(() => {\n connectWebSocket();\n }, delay);\n } else {\n alert('Connection lost. Please refresh the page to reconnect.');\n }\n };\n \n socket.onerror = (error) => {\n console.error('WebSocket error:', error);\n alert('Error connecting to chat server. Please try again later.');\n };\n } catch (error) {\n console.error('Error setting up WebSocket:', error);\n alert('Failed to connect to chat server. Please refresh and try again.');\n }\n}\n\n// Handle incoming WebSocket messages\nfunction handleWebSocketMessage(event) {\n switch (event.type) {\n case 'message':\n addMessageToChat(event.data);\n break;\n case 'user_joined':\n addSystemMessage(`${event.data.username} has joined the chat`);\n break;\n case 'user_left':\n addSystemMessage(`${event.data} has left the chat`);\n break;\n case 'history':\n // Clear existing messages\n messagesContainer.innerHTML = '';\n // Add message history\n const messages = event.data;\n messages.forEach(message => {\n addMessageToChat(message);\n });\n break;\n case 'error':\n console.error('Error from server:', event.data);\n break;\n }\n}\n\n// Add a message to the chat\nfunction addMessageToChat(message) {\n const messageElement = document.createElement('div');\n const isMyMessage = message.username === username;\n \n messageElement.className = `message-bubble ${isMyMessage ? 'my-message' : 'other-message'}`;\n \n messageElement.innerHTML = `\n ${!isMyMessage ? `

${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});",[],[147,197],"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",[],[147,206],"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",[],[147,130],["D",1747245255169],[175,176,177],[147],"81a98968-30ed-11f0-96fd-569c3dd06744",["D",1747245708914],[],[153,33],"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",[],[153,130],"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}",[],[153,243,235],"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}",[],[153,243,245],"4be61f2c-30ec-11f0-be93-569c3dd06744",["D",1747245189189],[170,171],[153,243],["D",1747245189189],[169,172,173],[153],["D",1747245081250],{"_95":94,"_102":98},{"_95":94,"_96":-5,"_97":98,"_18":55,"_99":100,"_101":25},{"_13":14,"_32":85,"_44":43,"_86":45,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":46,"_93":94},"ctx",{"_78":-5,"_122":295,"_296":297,"_298":299,"_300":25,"_301":25,"_302":25,"_303":58,"_304":-5,"_305":-7,"_306":-7,"_307":62,"_308":25,"_309":25,"_310":-5,"_311":25,"_312":25,"_313":25,"_314":-5},"ENV",{"_266":267,"_268":269,"_270":85,"_271":272,"_273":274,"_275":276,"_277":278,"_279":280,"_281":282,"_283":284,"_285":286,"_287":288,"_289":290,"_291":292,"_293":294},"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

Diff · v18