/** * This chat application allows users to post messages and view a log of all messages. * It uses SQLite for persistence and React for the frontend. * The server handles message posting and retrieval, while the client renders the UI. */ /** @jsxImportSource https://esm.sh/react */ import React, { useState, useEffect } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; interface Message { id: number; content: string; timestamp: string; } function App() { const [messages, setMessages] = useState([]); const [newMessage, setNewMessage] = useState(""); useEffect(() => { fetchMessages(); }, []); const fetchMessages = async () => { const response = await fetch("/messages"); const data = await response.json(); setMessages(data); }; const handleSubmit = async (e: React.FormEvent) => { e.preventDefault(); if (!newMessage.trim()) return; await fetch("/messages", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ content: newMessage }), }); setNewMessage(""); fetchMessages(); }; return (

Chat Log

{messages.map((message) => (

{new Date(message.timestamp).toLocaleString()}

{message.content}

))}

View Source

{`// Axios example
const axios = require('axios');

// POST a new message
axios.post('/messages', {
  content: 'Hello, World!'
})
.then(response => console.log(response.data))
.catch(error => console.error(error));

// GET all messages
axios.get('/messages')
.then(response => console.log(response.data))
.catch(error => console.error(error));

// cURL examples
# POST a new message
curl -X POST /messages \\
  -H "Content-Type: application/json" \\
  -d '{"content":"Hello, World!"}'

# GET all messages
curl /messages`}

); } function client() { createRoot(document.getElementById("root")!).render(); } if (typeof document !== "undefined") { client(); } async function server(request: Request): Promise { const { sqlite } = await import("https://esm.town/v/stevekrouse/sqlite"); const SCHEMA_VERSION = 1; const KEY = new URL(import.meta.url).pathname.split("/").at(-1); await sqlite.execute(` CREATE TABLE IF NOT EXISTS ${KEY}_messages_${SCHEMA_VERSION} ( id INTEGER PRIMARY KEY AUTOINCREMENT, content TEXT NOT NULL, timestamp DATETIME DEFAULT CURRENT_TIMESTAMP ) `); if (request.method === "POST" && request.url.endsWith("/messages")) { const { content } = await request.json(); await sqlite.execute(` INSERT INTO ${KEY}_messages_${SCHEMA_VERSION} (content) VALUES (?) `, [content]); return new Response(JSON.stringify({ success: true }), { headers: { "Content-Type": "application/json" }, }); } if (request.method === "GET" && request.url.endsWith("/messages")) { const result = await sqlite.execute(` SELECT * FROM ${KEY}_messages_${SCHEMA_VERSION} ORDER BY timestamp DESC LIMIT 100 `); return new Response(JSON.stringify(result.rows), { headers: { "Content-Type": "application/json" }, }); } return new Response(` Chat Log

`, { headers: { "Content-Type": "text/html" }, }); } const css = ` body { font-family: Arial, sans-serif; margin: 0; padding: 20px; background-color: #f0f0f0; } .container { max-width: 600px; margin: 0 auto; background-color: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } h1 { color: #333; } form { display: flex; margin-bottom: 20px; } input { flex-grow: 1; padding: 10px; font-size: 16px; border: 1px solid #ddd; border-radius: 4px 0 0 4px; } button { padding: 10px 20px; font-size: 16px; background-color: #4CAF50; color: white; border: none; border-radius: 0 4px 4px 0; cursor: pointer; } button:hover { background-color: #45a049; } .message-log { max-height: 400px; overflow-y: auto; } .message { background-color: #f9f9f9; border: 1px solid #ddd; padding: 10px; margin-bottom: 10px; border-radius: 4px; } .timestamp { font-size: 0.8em; color: #888; } .view-source { display: block; text-align: center; margin-top: 20px; color: #666; text-decoration: none; } .view-source:hover { text-decoration: underline; } .api-examples { margin-top: 20px; background-color: #f0f0f0; padding: 15px; border-radius: 4px; font-size: 14px; white-space: pre-wrap; word-break: break-all; } `; export default server;

addToLog