2c:null 2d:["$","title",null,{"children":"Livecode a webserver in a browser | Shams | Observable"}] 32:T41f,## Prerequisites: Observable Basics To reap the benefit of *livecoding*, you should understand [Observable]()'s non-linear reactive cells execution model. Firstly, Observable's runtime is framework around **normal javascript**, so you can do normal Javascript things. _Hell, you can store your crap in the global window if you want_. Secondly, the runtime organises a program into **named code cells**, which can read and emit values. Together cells Cells reevaluate primarily for two reasons, 1, if their inputs are dirty *or, 2, you change their code definition*. So when you code, only the dependant computational graph is recomputed. It's significantly less disruptive than a full restart. React developers might have experienced _Hot Module Reload (HMR)_ before, this is like that but more reliable as its baked into the runtime. Non-linear, reactive execution is *so* ergonomic for development, that it deserves (and needs) support at runtime if it is to be reliable and intuitive. **Reactive hot code reload is simply a better way to program**. 33:T491,exampleEndpoint = endpoint( /* endpoint name, must be unique per notebook */ "example", /* endpoint handler, written like an express handler https://expressjs.com/en/api.html#app */ async (req, res) => { console.log(`Received request from '${req.query.name}'`, req); console.log("Writing to response", res); mutable handlerLog = mutable handlerLog.concat(req); debugger; // 👈 triggers a breakpoint if DevTools is open res.send({ msg: `Hi! ${req.query.name??"there"}!!!`, time: Date.now() }); }, /* endpoint options */ { // For _this_ example, we turn on **public livecoding** in the options with `{livecode: 'public'}` // I production use you would only allow livecoding by a developer (the default). // Never combine secrets and *public* livecoding! // Any secrets bound to a *public* livecode endpoint will be exposed. // In contrast, default livecoding secrets are only exposed to the authenticated team members, // who presumably had access by other means anyway. livecode: "public", host // WEBCode is a federated compute technology, you can host it yourself on a custom domain } )34:[] 30:{"id":"3e3082d175ccdaeb","slug":"livecode-a-webserver-in-a-browser","title":"Livecode a webserver in a browser","thumbnail":"2d0392b95ee7285e3b6274c29d0b6c217d5ab2247c8f72555784268051bd502f","access_level":"public","create_time":"$D2022-07-04T17:36:44.074Z","update_time":"$D2022-07-04T17:38:07.951Z","view_time":null,"first_public_time":"$D2022-07-04T17:37:39.416Z","has_unpublished_edits":null,"fork":{"id":"2900aff4aa82c326","slug":"livecode","title":"Livecode a webserver in a browser","owner":{"id":"8d94490bed468d92","login":"endpointservices","name":"Endpoint Services"}},"stars":0,"starred":false,"owner":{"type":"team","id":"4772f4982841c18e","login":"shamsmosowi","name":"Shams","avatar_url":"https://avatars-next.observableusercontent.com/5aa879f2079c7317e05634a2ea90fa90fba432c45d391fb97ec1aa9886a34cfc","tier":"starter_2024","bio":""},"version":1633,"publish_version":1633,"role":null,"authored":false,"authors":[{"type":"individual","id":"2718a3d9a3b605fb","login":"shamsmosowi","name":"Shams","avatar_url":"https://avatars-next.observableusercontent.com/5aa879f2079c7317e05634a2ea90fa90fba432c45d391fb97ec1aa9886a34cfc","tier":null,"bio":""}],"members":[{"type":"individual","id":"2718a3d9a3b605fb","login":"shamsmosowi","name":"Shams","avatar_url":"https://avatars-next.observableusercontent.com/5aa879f2079c7317e05634a2ea90fa90fba432c45d391fb97ec1aa9886a34cfc","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Livecode a webserver in a browser","cells":[{"id":0,"value":"# *Livecode* a webserver *in a browser*\n\n[WEBcode.run](https://webcode.run) lets you create serverless endpoints within Observable notebooks, so you can implement webhooks, dashboard servers and webapps without leaving your browser. *The* defining feature of [WEBCode.run](https://webcode.run) over other serverless platforms is **livecoding**. Livecoding routes production traffic to your browser, so live traffic is served in realtime with the very latest code without a deploy step. **It transfers Observable's reactive development workflow to server side development**, and it allows **browser tools to debug, intercept and reply-to production traffic**. This is only possible because serverside and development are both browser based, and therefore can be swapped freely. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1309,"value":"## 10 second demo\n\nIn this article we demo some interactive live coding examples around the theme of building a webserver. Livecoding can be shaped to leave an execution trace across cells. This trace is useful for inspecting the steps in the request processing, and furthermore, thanks to Observable hot-code reloading, can be used to develop incrementally based off the memoized data. \n\nHere is what it looks like in practice when building a webhook integration. Live events from a WhatsApp cascade through the notebook. Code changes *are instantly applied* enabling a super tight feedback loop. That's right! Webhook development with a tight feedback loop!\n\n

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1304,"value":"toc(\"h2,h3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":676,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":697,"value":"### Extended to Serverless\n\nWEBCode takes Observable's ergonomic reactive programming model, and extends it to serverless, so you can *develop* serverside code in an explorative way too. To get the full reactive programming experience, *your* browser session is put on critical path of the server when in **livecode** mode.\n\nIn the notebook we will explore how to get the most out of **livecode**. But first, you will need the **webcode** dependency:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":37,"value":"import { endpoint } from \"@endpointservices/webcode\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"## Declarative Endpoints","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":103,"value":"WEBCode's API is declarative. You can simply declare an endpoint with `endpoint(, , )`. There is no deploy step, this is pure *infra-as-code*.\n\n**Endpoints will be instantaneously live on the internet**, if *livecode* is enabled, otherwise, if nobody is *livecoding*, the request will be handled by *the last **published** version of the notebook*. If the notebook has never been published, the endpoint will `404`.\n\n⚠️ *livecoding* cannot run when the page is not in the foreground (upvote [issue](https://github.com/observablehq/feedback/issues/458) if you want this fixed)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":59,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"Our implementation does a *console.log* of the inbound [request](https://observablehq.com/@endpointservices/webcode-docs?collection=@endpointservices/webcode-run#request) payload, and sends an object to the [response](https://observablehq.com/@endpointservices/webcode-docs?collection=@endpointservices/webcode-run#response). The response is computed based on the value of an incoming HTTP URL parameter *name*.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":122,"value":"### Making a GET\n\nThe following UI uses the *fetch* API client-side, to make a simple request to our endpoint. The URL of the endpoint is the *href* parameter of the endpoint.\n\nWhen public livecoding, the URL of the server contains the session ID, so the server knows which tunnel to route through. Public livecode endpoints are isolated between participants.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1151,"value":"response || html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"viewof name = Inputs.text({\n label: \"name\",\n placeholder: \"Please enter your name (or don't)\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"viewof response = Inputs.button(\"Make random request (press me!)\", {\n reduce: async () => {\n try {\n console.log(`Sending request with name parameter '${name}'`);\n const response = await fetch(\n exampleEndpoint.href + `?name=${encodeURIComponent(name)}`\n );\n console.log(\"Got response\", response);\n return response.json();\n } catch (err) {\n return err.message;\n }\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":201,"value":"After clicking the button we can render what the response was (after JSON deserialization). Try changing the name value sent and making more requests.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":79,"value":"response || html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"value":"Updating a value in response to a button press does not seem that impressive until you realize the request is going over the public internet. So you don't need to initiate the request inside the browser, you can also use curl from your console for instance:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":231,"value":"```\n\ncurl '${exampleEndpoint.href + `?name=fromcurl`}'\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"curl_get","database":"$undefined"},{"id":262,"value":"The story is even more interesting when you pop open your developers tools. You should see that the `console.log` messages inside the handler have executed, indicating the endpoint code was executed inside your browser.\n\nWe also write to a `mutable seversideLog` inside the request handler you can confirm the request was handled in *your* notebook session.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":380,"value":"Inputs.table(\n handlerLog.map((d) => ({\n ...d,\n query: JSON.stringify(d.query),\n headers: JSON.stringify(d.headers)\n }))\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":353,"value":"mutable handlerLog = []","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":361,"value":"Inputs.button(\"clear log\", {\n reduce: () => (mutable handlerLog = [])\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":480,"value":"you can change the handler code and the **changes will be reflected instantly**, no need to deploy!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":407,"value":"## Livecode a webserver\n\nEndpoint changes are **instantly** visible to livecode. When combined with Observable hot-code reload we can build ergonomic developer reactive workflows. For example, if we put a dataflow dependency of a client on the server, if the server handler changes, the client will refresh automatically, using the very latest deployed code. **livecode propagates serverside code changes at the speed of Observable's reactive dataflow**. \n\n\nIn this example the client will be an iframe, and the server with be a webserver definition. In this arrangement, we can reactively develop a server, and always be viewing the latest webpage on the client","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":178,"value":"### Sidequest: Unrolling request processing across cells\n\nwith [flowQueue](https://observablehq.com/@tomlarkworthy/flow-queue)\n\nAs server gets complex, visibility into its request processing pipeline becomes important. We can a [flowQueue](https://observablehq.com/@tomlarkworthy/flow-queue) to lay processing steps across cells in the _dataflow_ style. You call *send* to add a task to the [flowQueue](https://observablehq.com/@tomlarkworthy/flow-queue). The next task will not be loaded until the notebook calls resolve/rejects on the flowQueue *view* for the previous task.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":436,"value":"import { flowQueue } from \"@tomlarkworthy/flow-queue\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":420,"value":"webserver = endpoint(\n \"webserver\",\n async (req, res, ctx) => {\n try {\n mutable weblog = mutable weblog.concat(Date.now());\n // Forward to a flowQueue for (async) processing\n const response = await viewof webRequest.send({\n req,\n res,\n ctx\n });\n } catch (err) {\n res.status(err.code || 500).send(err.message);\n }\n },\n {\n livecode: \"public\",\n host\n }\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":475,"value":"### `webRequest`, request processing in the dataflow style \n\n\"viewof webRequest\" refers the flowQueue, whereas \"webRequest\" refers to the current task. When live coding is turned on \"webRequest\"'s value will be the last seen incoming request to that endpoint. **We can exploit Observable's runtime to leave a trace of server execution**.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":427,"value":"viewof webRequest = flowQueue({\n timeout_ms: 1000\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":499,"value":"webRequest","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":621,"value":"### Creating multiple routes\n\nYou can server multiple pages from the webserver by inspecting the `url` param. \n\nYou can discover the `url` param without reading documentation, by making a random request (click below), and expanding the `webRequest` value (above).\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":630,"value":"viewof randomResponse = Inputs.button(\"Make request with random path\", {\n value: { text: () => \"\" },\n reduce: () =>\n fetch(webserver.href + \"/\" + Math.random().toString(16).substring(3))\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":740,"value":"webRequest.req.url","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":745,"value":"The `req` payload contains all the incoming HTTP information, including the HTTP verb, headers and query parameters!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":748,"value":"webRequest.req","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":783,"value":"You can define routes in the [express](https://observablehq.com/@tomlarkworthy/api-hosting-with-express) style if you want, but it is easier to develop incrementally if we use a `flowQueue` for each route.\n\nWe will need a `default` route to handle our random requests, and a most specific ones we will go back to later","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":780,"value":"router = {\n switch (webRequest.req.url) {\n default:\n return viewof webRequest.resolve(viewof defaultRequest.send(webRequest));\n\n // Form handling example\n case \"/form.html\":\n return viewof webRequest.resolve(viewof formRequest.send(webRequest));\n\n // Image serving (SVG and PNG)\n case \"/weblog.svg\":\n return viewof webRequest.resolve(viewof imgRequest.send(webRequest));\n case \"/weblog.png\":\n return viewof webRequest.resolve(viewof imgRequest.send(webRequest));\n\n // HTML streaming\n case \"/stream.html\":\n return viewof webRequest.resolve(viewof streamRequest.send(webRequest));\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":801,"value":"### Responding to a request: `defaultRequest`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":799,"value":"viewof defaultRequest = flowQueue()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":807,"value":"defaultRequest","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":809,"value":"The appropriate response to a random request is to return status code 404","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":812,"value":"defaultRequestHandler = {\n const message = `Unknown path ${defaultRequest.req.url}`;\n defaultRequest.res.status(404).send(message);\n return message;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":823,"value":"We end the processing by resolving the flowQueue","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":827,"value":"defaultRequestResolver = {\n defaultRequestHandler; // triggered after defaultRequestHandler has run\n viewof defaultRequest.resolve();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":837,"value":"randomResponse.text()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":839,"value":"Inputs.button(\"Make request with random path\", {\n reduce: () => viewof randomResponse.querySelector(\"button\").click()\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":793,"value":"### Responding with HTML `formRequest`\n\nWEBCode is ideal for creating little utilities that can slot in other websites. For example, handling a form data or displaying a chart.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":797,"value":"viewof formRequest = flowQueue()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":857,"value":"formRequest","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":874,"value":"formResponseContent = {\n if (formRequest.req.method === \"POST\") {\n return await viewof formPostRequest.send(formRequest);\n } else if (formRequest.req.method === \"GET\") {\n return ``;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":910,"value":"### Preview a HTML response in an `iframe`\n\nWe can of course put the rendered form in our own iframe so we can see the result","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1023,"value":"Inputs.button(\"refresh preview\", {\n reduce: () => mutable refreshForm++\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":860,"value":"$${/* Programatically refresh this cell by incrementing refreshForm */ (refreshForm, '')}\n","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":921,"value":"### Automated preview refreshing\n\nIf we are a little clever with our dataflow, we can get the iframe to auto refresh on changes. Recall that in a flowQueue, a single request must processed before the next is exposed. If we see the same request more than once, that means intermediate cells have refreshed for reasons *other* than a new request arriving. This is likely a code change so we can tell the preview to refresh when the request the same as the previous one.\n\nWith this little bit of code we can edit the source of the formHandler and the preview updates automatically. Every request has a unique id associated with it (the id) so we can use this to track for repeated exposure to the same request.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":546,"value":"mutable refreshForm = (webserver, Promises.delay(2000, 0))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":916,"value":"formResponder = {\n if (formRequest.req.id !== /* previous value of cell */ this) {\n // New request, respond to it\n formRequest.res.status(200).send(formResponseContent);\n } else {\n mutable refreshForm++;\n }\n return formRequest.req.id;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1006,"value":"### Handling a Form POST response\n\nWhen a user clicks the submit button on a form, and the form action is 'POST', the browser makes a POST request to an endpoint with the data in the form encoded in the body. This is the original way of enable a user to pass data to a webserver.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1008,"value":"viewof formPostRequest = flowQueue()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1012,"value":"formPostRequest","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1048,"value":"Form data, when using the POST action, is URL encoded in the body.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1045,"value":"formDataRaw = formPostRequest.req.body","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1052,"value":"The modern way to decode it is with URLSearchParams...","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1056,"value":"decodedFormData = new URLSearchParams(formDataRaw)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1059,"value":"a URLSearchParams object is not very inspectible on its own, so I often convert into an ordinary data object, which is easier to work with","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1061,"value":"formData = Object.fromEntries(decodedFormData.entries())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1014,"value":"formPostRequestResolver = {\n formPostRequest;\n viewof formPostRequest.resolve(\n `

Thanks, your note was:

${formData.note}

`\n );\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1082,"value":"### Serving media (e.g. images)\n\nTo server images (or video) you must return the data along with the correct [MIME type](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types) in the [`content-type` header](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Type).\n\nLet's show how this works by serving an Observable Plot (SVG) and a random png. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1084,"value":"viewof imgRequest = flowQueue()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1104,"value":"imgRequest","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1112,"value":"Lets visualize what requests the webserver has seen in its history. When _livecoding_ the log will be just your session, when not _livecoding_, this will scoped to the shared serverside session (!)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1090,"value":"mutable weblog = []","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1597,"value":"We have to decouple dataflow from weblog updates so the `imgRequest` pipeline is not triggered by `weblog` changes. We can use a `mutable` for this.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1561,"value":"visualizationUpdater = {\n mutable weblogDataviz = Plot.plot({\n x: {\n type: \"time\",\n label: \"time\"\n },\n marks: [Plot.tickX(weblog)]\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1119,"value":"mutable weblogDataviz = undefined","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1155,"value":"To serve an image (and other media), you need to set the correct MIME type and send the data in an arrayBuffer. Step one is converting it to a blob. Mike Bostock has an [excellent notebook on the topic](https://observablehq.com/@mbostock/saving-svg), so we can reuse his work to convert an SVG to a Blob ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1165,"value":"import { rasterize, serialize } from \"@mbostock/saving-svg\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1163,"value":"imageData = {\n if (imgRequest.req.url.endsWith(\".svg\")) {\n return serialize(mutable weblogDataviz);\n } else if (imgRequest.req.url.endsWith(\".png\")) {\n return rasterize(mutable weblogDataviz);\n } else {\n const error = new Error(\n `Unrecognised image extension ${imgRequest.req.url}`\n );\n error.code = 400;\n viewof imgRequest.reject(error);\n throw error;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1181,"value":"A correctly constructed blob has the MIME type in the type field:-","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1178,"value":"imageData.type","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1185,"value":"The binary data can also be extracted with '.arrayBuffer()'. Passing an buffer to the response object will send binary data.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1188,"value":"imgRequestResponder = {\n imgRequest.res.header(\"content-type\", imageData.type);\n imgRequest.res.send(await imageData.arrayBuffer());\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1213,"value":"After sending the data we can unlock the flowQueue task so the next can be handled. Again, we can look for duplicate requests to trigger refreshing the preview too (see above) because that means there was a code change in the request pipeline.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1202,"value":"imgRequestResolve = {\n imgRequestResponder;\n if (imgRequest.req.id !== this) {\n viewof imgRequest.resolve(\"OK\");\n return imgRequest.req.id;\n } else {\n mutable refreshDashboardImage++;\n return this;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1217,"value":"If we are serving SVG correctly, we can use it as the src of an image.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1106,"value":"$${(refreshDashboardImage, '')}\n

","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1210,"value":"mutable refreshDashboardImage = Promises.delay(3000, 0)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1337,"value":"### Streamed Responses\n\nSo far we have explored a few of the request/response idioms of webservers. Webservers can also stream data, which can be useful for realtime applications or [high performance websites/progressive rendering](https://dev.to/tigt/the-weirdly-obscure-art-of-streamed-html-4gc2).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1380,"value":"viewof streamRequest = flowQueue()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1390,"value":"streamRequest","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1576,"value":"In this example every time a control changes we HTML that includes a Javascript snippet to scrub the previous value, so we can have a page displaying the latest value of a control.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1399,"value":"streamRequestResponse = {\n yield \"ok\"; // Yeild a value so request processing can proceed dowstream\n\n // Run the streaming outside of the runtime with event listeners\n // Its not easily possible to handle concurrent long lived requests using dataflow\n const res = streamRequest.res;\n const req = streamRequest.req;\n const changeHandler = () => {\n console.log(`change ${req.id}`);\n res.write(\n `` +\n `

latest: ${viewof streamValue.value}

`\n );\n };\n console.log(`opening ${req.id}`);\n res.write(`Streaming for request ${req.id}`);\n changeHandler();\n\n viewof streamValue.addEventListener(\"input\", changeHandler);\n invalidation.then(() => {\n console.log(`close ${req.id}`);\n viewof streamValue.removeEventListener(\"input\", changeHandler);\n res.end();\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1501,"value":"streamRequestResolver = {\n streamRequestResponse;\n if (this !== streamRequest.req.id) {\n viewof streamRequest.resolve(\"ok\");\n } else {\n mutable streamingPreviewRefresh++;\n }\n return streamRequest.req.id;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1473,"value":"viewof streamingPreview = Inputs.toggle({\n label: \"turn on streaming preview\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1570,"value":"Inputs.button(\"refresh streaming\", {\n reduce: () => mutable streamingPreviewRefresh++\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1392,"value":"viewof streamValue = Inputs.range([0, 1], { step: 0.001, value: 0, label: \"wiggle me\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1403,"value":"$${runStreamingPreview && streamingPreviewRefresh}\n\n","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1547,"value":"You can read streaming responses in `curl` but you need to turn buffering off\n\n```\n curl --no-buffer '${link}' \n\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"streamingCurl","database":"$undefined"},{"id":1537,"value":"link = webserver.href + \"/stream.html\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1486,"value":"runStreamingPreview = streamingPreview ? \"\" : invalidation","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1507,"value":"mutable streamingPreviewRefresh = 0","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1580,"value":"## Ideas for more Livecoding/Webserver examples?\n\nLeave a comment if you want to see how to livecode up other webserver functionality","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1292,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1590,"value":"## Supporting notebook functionality","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":296,"value":"### Config","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":299,"value":"viewof host = Inputs.bind(\n Inputs.select([\"webcode.run\", \"http://localhost:8080\"], {\n label: \"host\"\n }),\n /* localStorageView allows us to persist the value across refreshed */\n localStorageView(\"WEBCODE_HOST\", {\n defaultValue: \"webcode.run\"\n })\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":303,"value":"import { localStorageView } from \"@tomlarkworthy/local-storage-view\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":321,"value":"### Notebook Enhancements","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":224,"value":"{\n // After import {endpoint} from 'webcode' snippet is the use of the keyword 'endpoint'\n /* Upstream */ webserver, exampleEndpoint, streamingCurl;\n {\n [...document.querySelectorAll(\"pre\")].forEach((el) =>\n installCopyCode(el, { invalidation })\n );\n }\n\n installCopyCode(curl_get, { invalidation });\n installCopyCode(curl_get, { invalidation });\n return md`*👈 [copy-code](https://observablehq.com/@tomlarkworthy/copy-code) button for examples*`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":216,"value":"import { installCopyCode } from \"@tomlarkworthy/copy-code\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1301,"value":"import { toc } from \"@nebrius/indented-toc\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":327,"value":"### Notebook Backup, Analytics and monitoring","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":149,"value":"import { footer } from \"@endpointservices/footer-with-backups\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":152,"value":"footer","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1"}} 31:"$30:body"