[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_261":262,"_263":264},"routes/_app.x.$handle.$name",{"_97":96,"_32":46,"_105":87,"_27":106,"_13":14,"_107":-5,"_11":108,"_109":110,"_111":112,"_113":114,"_115":116,"_20":-5,"_117":-5,"_118":-5,"_119":25,"_120":121,"_122":59,"_123":-5,"_124":-5,"_125":126},"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":57,"_58":59,"_60":59,"_61":-5,"_62":63,"_64":65,"_66":-5,"_67":-5,"_68":-5,"_69":-5,"_70":71,"_72":71,"_73":74,"_75":74,"_76":74,"_77":71,"_78":71,"_79":80,"_81":82,"_83":84,"_85":25},"version",15,"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","frontend/index.js","latestPath","fileId","7fa2b5fa-30ec-11f0-810d-569c3dd06744","name","index.js","fileType","script","content","// 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 // Get the current host\n const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';\n const wsUrl = `${protocol}//${window.location.host}/ws`;\n \n socket = new WebSocket(wsUrl);\n \n socket.onopen = () => {\n console.log('WebSocket connected');\n reconnectAttempts = 0;\n \n // Join the chat\n socket.send(JSON.stringify({\n type: 'join',\n username: username\n }));\n };\n \n socket.onmessage = (event) => {\n const data = JSON.parse(event.data);\n handleWebSocketMessage(data);\n };\n \n socket.onclose = () => {\n console.log('WebSocket disconnected');\n \n // Try to reconnect\n if (reconnectAttempts < maxReconnectAttempts) {\n reconnectAttempts++;\n const delay = Math.min(1000 * reconnectAttempts, 5000);\n \n setTimeout(() => {\n console.log(`Attempting to reconnect (${reconnectAttempts}/${maxReconnectAttempts})...`);\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 };\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', init);","// 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', init);","createdAt",["D",1747245622911],"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","622bd9f2-30ec-11f0-aeee-569c3dd06744","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",{"_97":96,"_104":100},"org",{"_97":96,"_98":-5,"_99":100,"_18":55,"_101":102,"_103":25},"branch",{"_13":86,"_32":87,"_44":43,"_88":45,"_89":-5,"_90":-5,"_91":-5,"_92":-5,"_93":-5,"_94":46,"_95":96},"isOwned",18,"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":257,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":-5,"_54":-5,"_18":55,"_56":57,"_58":59,"_60":59,"_61":-5,"_62":63,"_64":65,"_66":-5,"_67":-5,"_68":-5,"_69":-5,"_70":71,"_72":71,"_73":74,"_75":74,"_76":74,"_77":71,"_78":71,"_79":258,"_81":259,"_83":260,"_85":25},"tree",[170,176,180,182],"files",[170,171,172,173,174,175,176,177,178,179,180,181,182],"counts",{"_160":63,"_161":135,"_162":63,"_163":164,"_165":166},"contents",[127,128,129,130],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_44":154,"_32":155,"_30":156,"_134":-5,"_42":43,"_41":157,"_136":59,"_39":158,"_13":63,"_34":146,"_36":-5,"_24":25,"_139":-5,"_27":159},{"_44":148,"_32":149,"_30":150,"_134":-5,"_42":43,"_41":151,"_136":59,"_39":152,"_13":63,"_34":146,"_36":-5,"_24":25,"_139":-5,"_27":153},{"_44":141,"_32":142,"_30":143,"_134":-5,"_42":43,"_41":144,"_136":59,"_39":145,"_13":63,"_34":146,"_36":-5,"_24":25,"_139":-5,"_27":147},{"_44":131,"_32":132,"_30":133,"_134":-5,"_42":43,"_41":135,"_136":59,"_39":137,"_13":63,"_34":20,"_36":138,"_24":25,"_139":-5,"_27":140},"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",[132],"4895e60e-30ec-11f0-abc6-569c3dd06744","shared","72ea7692-9108-4a89-8c0c-d0c3f911a942",2,["D",1747245183658],"directory",[142],"7335d7f2-30ec-11f0-9261-569c3dd06744","frontend","a99fdb17-6ea3-4dc7-b4f8-46a00cd14095",7,["D",1747245255169],[149],"4be61d56-30ec-11f0-be93-569c3dd06744","backend","8fbbaf1d-974c-4978-a82c-463d1aca5e88",3,["D",1747245189189],[155],"pulls","branches","forks","envVars",{"_167":63,"_169":63},"connections",{"_167":63,"_168":63},"count","unfilledCount","emptyCount",{"_44":154,"_32":155,"_30":156,"_134":-5,"_42":43,"_41":157,"_136":59,"_39":254,"_13":63,"_34":146,"_36":-5,"_24":25,"_139":-5,"_184":255,"_27":256},{"_44":250,"_32":242,"_30":236,"_134":156,"_42":43,"_41":157,"_136":59,"_39":251,"_13":63,"_34":146,"_36":-5,"_24":25,"_139":-5,"_184":252,"_27":253},{"_44":243,"_32":244,"_30":245,"_134":236,"_42":43,"_41":157,"_136":59,"_39":246,"_13":63,"_34":35,"_36":247,"_24":25,"_139":-5,"_184":248,"_27":249},{"_44":233,"_32":234,"_30":235,"_134":236,"_42":43,"_41":237,"_136":59,"_39":238,"_13":63,"_34":35,"_36":239,"_24":25,"_139":-5,"_184":240,"_27":241},{"_44":227,"_32":132,"_30":228,"_134":156,"_42":43,"_41":199,"_136":59,"_39":229,"_13":63,"_34":20,"_36":230,"_24":25,"_139":-5,"_184":231,"_27":232},{"_44":219,"_32":220,"_30":57,"_134":156,"_42":43,"_41":221,"_136":25,"_39":222,"_13":135,"_34":223,"_36":224,"_24":25,"_139":-5,"_184":225,"_27":226},{"_44":148,"_32":149,"_30":150,"_134":-5,"_42":43,"_41":151,"_136":59,"_39":216,"_13":63,"_34":146,"_36":-5,"_24":25,"_139":-5,"_184":217,"_27":218},{"_44":209,"_32":132,"_30":210,"_134":150,"_42":43,"_41":211,"_136":59,"_39":212,"_13":63,"_34":20,"_36":213,"_24":25,"_139":-5,"_184":214,"_27":215},{"_44":202,"_32":203,"_30":204,"_134":150,"_42":43,"_41":151,"_136":25,"_39":205,"_13":63,"_34":20,"_36":206,"_24":25,"_139":-5,"_184":207,"_27":208},{"_44":197,"_32":33,"_30":31,"_134":150,"_42":43,"_41":14,"_136":25,"_39":198,"_13":199,"_34":35,"_36":38,"_24":25,"_139":-5,"_184":200,"_27":201},{"_44":141,"_32":142,"_30":143,"_134":-5,"_42":43,"_41":144,"_136":59,"_39":194,"_13":63,"_34":146,"_36":-5,"_24":25,"_139":-5,"_184":195,"_27":196},{"_44":187,"_32":188,"_30":189,"_134":143,"_42":43,"_41":144,"_136":59,"_39":190,"_13":63,"_34":35,"_36":191,"_24":25,"_139":-5,"_184":192,"_27":193},{"_44":131,"_32":132,"_30":133,"_134":-5,"_42":43,"_41":135,"_136":59,"_39":183,"_13":63,"_34":20,"_36":138,"_24":25,"_139":-5,"_184":185,"_27":186},["D",1747245179604],"children",[],[132],"4895c656-30ec-11f0-abc6-569c3dd06744","types.ts","4895c71e-30ec-11f0-abc6-569c3dd06744",["D",1747245183658],"// 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}",[],[142,188],["D",1747245183658],[181],[142],"4e66f2ca-30ed-11f0-b888-569c3dd06744",["D",1747245622911],5,[],[149,33],"73354a8a-30ec-11f0-9261-569c3dd06744","index.html","73354b52-30ec-11f0-9261-569c3dd06744",["D",1747245255169],"\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",[],[149,203],"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",[],[149,132],["D",1747245255169],[177,178,179],[149],"814601c8-30ec-11f0-8280-569c3dd06744","index.ts",9,["D",1747245278767],"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\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;",[],[155,220],"5630804e-30ec-11f0-903c-569c3dd06744","5630812a-30ec-11f0-903c-569c3dd06744",["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",[],[155,132],"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}",[],[155,242,234],"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}",[],[155,242,244],"4be61f2c-30ec-11f0-be93-569c3dd06744",["D",1747245189189],[172,173],[155,242],["D",1747245189189],[171,174,175],[155],["D",1747245081250],{"_97":96,"_104":100},{"_97":96,"_98":-5,"_99":100,"_18":55,"_101":102,"_103":25},{"_13":86,"_32":87,"_44":43,"_88":45,"_89":-5,"_90":-5,"_91":-5,"_92":-5,"_93":-5,"_94":46,"_95":96},"ctx",{"_79":-5,"_124":294,"_295":296,"_297":298,"_299":25,"_300":25,"_301":25,"_302":59,"_303":-5,"_304":-7,"_305":-7,"_306":63,"_307":25,"_308":25,"_309":-5,"_310":25,"_311":25,"_312":25,"_313":-5},"ENV",{"_265":266,"_267":268,"_269":87,"_270":271,"_272":273,"_274":275,"_276":277,"_278":279,"_280":281,"_282":283,"_284":285,"_286":287,"_288":289,"_290":291,"_292":293},"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 · v15