[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_244":245,"_246":247},"routes/_app.x.$handle.$name",{"_100":99,"_32":49,"_108":90,"_27":109,"_13":14,"_110":-5,"_11":111,"_112":113,"_114":115,"_116":117,"_118":119,"_21":-5,"_120":-5,"_121":-5,"_122":25,"_123":124,"_125":25,"_126":-5,"_127":-5,"_128":129},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_47":48,"_32":49,"_36":50,"_51":-5,"_52":25,"_53":54,"_55":54,"_56":-5,"_57":-5,"_18":58,"_59":60,"_61":62,"_63":62,"_64":-5,"_65":66,"_67":68,"_69":-5,"_70":-5,"_71":-5,"_72":-5,"_73":74,"_75":74,"_76":77,"_78":77,"_79":77,"_80":74,"_81":74,"_82":83,"_84":85,"_86":87,"_88":25},"version",7,"changes",[19,20],"aiChatInfo","userId",{"_21":41,"_23":-7,"_24":25,"_26":25,"_27":42,"_29":42},{"_21":22,"_23":-7,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":34,"_35":-5,"_36":37,"_38":14,"_39":40,"_24":25},"previous","deleted",false,"deletedHere","path","frontend","latestPath","fileId","a99fdb17-6ea3-4dc7-b4f8-46a00cd14095","name","fileType","directory","content","createdAt",["D",1747245255169],"branchVersion","branchId","0b8ad620-30ec-11f0-a9be-569c3dd06744",{"_30":43,"_32":44,"_33":21,"_35":45,"_36":46,"_38":14,"_39":40,"_24":25},"frontend/index.html","73354b52-30ec-11f0-9261-569c3dd06744","index.html","\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",["D",1747245255169],"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",{"_100":99,"_107":103},"org",{"_100":99,"_101":-5,"_102":103,"_18":58,"_104":105,"_106":25},"branch",{"_13":89,"_32":90,"_47":40,"_91":48,"_92":-5,"_93":-5,"_94":-5,"_95":-5,"_96":-5,"_97":49,"_98":99},"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",{"_47":48,"_32":49,"_36":240,"_51":-5,"_52":25,"_53":54,"_55":54,"_56":-5,"_57":-5,"_18":58,"_59":60,"_61":62,"_63":62,"_64":-5,"_65":66,"_67":68,"_69":-5,"_70":-5,"_71":-5,"_72":-5,"_73":74,"_75":74,"_76":77,"_78":77,"_79":77,"_80":74,"_81":74,"_82":241,"_84":242,"_86":243,"_88":25},"tree",[169,175,177,179],"files",[169,170,171,172,173,174,175,176,177,178,179],"counts",{"_159":66,"_160":138,"_161":66,"_162":163,"_164":165},"contents",[130,131,132,133],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_47":153,"_32":154,"_30":155,"_137":-5,"_39":40,"_38":156,"_139":62,"_36":157,"_13":66,"_33":34,"_35":-5,"_24":25,"_142":-5,"_27":158},{"_47":150,"_32":28,"_30":31,"_137":-5,"_39":40,"_38":14,"_139":62,"_36":151,"_13":66,"_33":34,"_35":-5,"_24":25,"_142":-5,"_27":152},{"_47":144,"_32":145,"_30":146,"_137":-5,"_39":40,"_38":147,"_139":62,"_36":148,"_13":66,"_33":34,"_35":-5,"_24":25,"_142":-5,"_27":149},{"_47":134,"_32":135,"_30":136,"_137":-5,"_39":40,"_38":138,"_139":62,"_36":140,"_13":66,"_33":21,"_35":141,"_24":25,"_142":-5,"_27":143},"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",[135],"4895e60e-30ec-11f0-abc6-569c3dd06744","shared","72ea7692-9108-4a89-8c0c-d0c3f911a942",2,["D",1747245183658],[145],"7335d7f2-30ec-11f0-9261-569c3dd06744",["D",1747245255169],[28],"4be61d56-30ec-11f0-be93-569c3dd06744","backend","8fbbaf1d-974c-4978-a82c-463d1aca5e88",3,["D",1747245189189],[154],"pulls","branches","forks","envVars",{"_166":66,"_168":66},"connections",{"_166":66,"_167":66},"count","unfilledCount","emptyCount",{"_47":153,"_32":154,"_30":155,"_137":-5,"_39":40,"_38":156,"_139":62,"_36":237,"_13":66,"_33":34,"_35":-5,"_24":25,"_142":-5,"_181":238,"_27":239},{"_47":233,"_32":225,"_30":219,"_137":155,"_39":40,"_38":156,"_139":62,"_36":234,"_13":66,"_33":34,"_35":-5,"_24":25,"_142":-5,"_181":235,"_27":236},{"_47":226,"_32":227,"_30":228,"_137":219,"_39":40,"_38":156,"_139":62,"_36":229,"_13":66,"_33":188,"_35":230,"_24":25,"_142":-5,"_181":231,"_27":232},{"_47":216,"_32":217,"_30":218,"_137":219,"_39":40,"_38":220,"_139":62,"_36":221,"_13":66,"_33":188,"_35":222,"_24":25,"_142":-5,"_181":223,"_27":224},{"_47":209,"_32":135,"_30":210,"_137":155,"_39":40,"_38":211,"_139":62,"_36":212,"_13":66,"_33":21,"_35":213,"_24":25,"_142":-5,"_181":214,"_27":215},{"_47":202,"_32":203,"_30":60,"_137":155,"_39":40,"_38":204,"_139":25,"_36":205,"_13":66,"_33":188,"_35":206,"_24":25,"_142":-5,"_181":207,"_27":208},{"_47":150,"_32":28,"_30":31,"_137":-5,"_39":40,"_38":14,"_139":62,"_36":199,"_13":66,"_33":34,"_35":-5,"_24":25,"_142":-5,"_181":200,"_27":201},{"_47":195,"_32":44,"_30":43,"_137":31,"_39":40,"_38":14,"_139":25,"_36":196,"_13":66,"_33":21,"_35":45,"_24":25,"_142":-5,"_181":197,"_27":198},{"_47":144,"_32":145,"_30":146,"_137":-5,"_39":40,"_38":147,"_139":62,"_36":192,"_13":66,"_33":34,"_35":-5,"_24":25,"_142":-5,"_181":193,"_27":194},{"_47":184,"_32":185,"_30":186,"_137":146,"_39":40,"_38":147,"_139":62,"_36":187,"_13":66,"_33":188,"_35":189,"_24":25,"_142":-5,"_181":190,"_27":191},{"_47":134,"_32":135,"_30":136,"_137":-5,"_39":40,"_38":138,"_139":62,"_36":180,"_13":66,"_33":21,"_35":141,"_24":25,"_142":-5,"_181":182,"_27":183},["D",1747245179604],"children",[],[135],"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}",[],[145,185],["D",1747245183658],[178],[145],"73354a8a-30ec-11f0-9261-569c3dd06744",["D",1747245255169],[],[28,44],["D",1747245255169],[176],[28],"622bd92a-30ec-11f0-aeee-569c3dd06744","index.ts",6,["D",1747245226588],"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;",[],[154,203],"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",[],[154,135],"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}",[],[154,225,217],"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}",[],[154,225,227],"4be61f2c-30ec-11f0-be93-569c3dd06744",["D",1747245189189],[171,172],[154,225],["D",1747245189189],[170,173,174],[154],["D",1747245081250],{"_100":99,"_107":103},{"_100":99,"_101":-5,"_102":103,"_18":58,"_104":105,"_106":25},{"_13":89,"_32":90,"_47":40,"_91":48,"_92":-5,"_93":-5,"_94":-5,"_95":-5,"_96":-5,"_97":49,"_98":99},"ctx",{"_82":-5,"_127":277,"_278":279,"_280":281,"_282":25,"_283":25,"_284":25,"_285":62,"_286":-5,"_287":-7,"_288":-7,"_289":66,"_290":25,"_291":25,"_292":-5,"_293":25,"_294":25,"_295":25,"_296":-5},"ENV",{"_248":249,"_250":251,"_252":90,"_253":254,"_255":256,"_257":258,"_259":260,"_261":262,"_263":264,"_265":266,"_267":268,"_269":270,"_271":272,"_273":274,"_275":276},"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 · v7