• Public

  • Public
  • Network
  • Groups
  • Popular
  • People

Screenshot of code: Highlighted code is inside exported function onConnect (_request, and page): page.on('add', async data => { // Show status update. page.send(kitten.html`<${AddButton} busy/>`) // Calculate the status API URL and fetch the post. const postUrl = new URL(data.postUrl) const fediverseServer = postUrl.origin const postId = postUrl.pathname.substring(postUrl.pathname.lastIndexOf('/') + 1) const statusApiUrl = `${fediverseServer}/api/v1/statuses/${postId}` const post = await (await fetch(statusApiUrl)).json() // Persist the post. kitten.db.posts.push(post) // Clear URL input (replace it with a fresh one). page.send(kitten.html`<${PostLinkInput} />`) // Re-enable the Add button. page.send(kitten.html`<${AddButton} />`) // Show the new post at the top of the list. page.send(kitten.html` <${PostsList}> <${Post} post=${post} showRemoveButton /> </> `) Above onConnect handler is a comment: When an onConnect() handler is exported from a page, Kitten automatically creates a WebSocket route and wires it up to call the handler with a page (PageSocket instance). When an HTMX request is triggered, Kitten maps the name of the triggering DOM element to an event handler for the event with the same name that you listen for on that page reference. As you are handling the workload of a call on the server, you can stream updates to the page by sending snippets of HTML formatted using HTMX conventions.