31:T849,{ // ------------------------------------------ // Create the "server-side" request handler. // It consumes standard Request instances and produce Responses. const httpHandler = async (request) => { const { method, url, headers } = request; const headersMap = {}; for (const [key, value] of headers) { headersMap[key] = value; // console.log(key, value); } // console.log("*", method, url, headers); return new Response( JSON.stringify({ method, url, headers: headersMap, message: "Hello World!" }), { headers: { "Content-Type": "application/json" } } ); }; // ------------------------------------------ // Creates requests function newRequest() { return new Request("http://foo.bar.baz/?toto=Tata", { headers: { foo: "bar" } }); } // ------------------------------------------ // Low-level plumbering. // ------------------------------------------ // Communication channel. // Port1: used as a transport by the server // Port2: used by the client to send serialized requests and recieve binary responses const channel = new MessageChannel(); channel.port1.start(); channel.port2.start(); // ------------------------------------------ // Create a "server" function. // This function is an AsyncGenerator consuming binary blocks with the request // from the given iterator and producing binary blocks from the response. const server = WebRunHttp.newHttpServer(httpHandler); // We plug the server method to the MessagePort. const close = WebRunPorts.listenBidi(channel.port1, server); invalidation.then(close); // ------------------------------------------ // The client-side initialization: const client = WebRunHttp.newHttpClient((input) => WebRunPorts.callBidi(channel.port2, input, {}) ); // ------------------------------------------ // Now we can call our client. const request = newRequest(); const response = await client(request); const json = await response.json(); return json; }32:[] 2f:{"title":"HTTP Calls Over MessageChannels","cells":[{"id":0,"value":"# HTTP Calls Over MessageChannels\n\nThis notebooks shows how HTTP calls with standard [Request](https://developer.mozilla.org/en-US/docs/Web/API/Request) / [Response](https://developer.mozilla.org/en-US/docs/Web/API/Response) (from the [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)) could be launched on the local pages.\nThis approach is used to implement the [HTTP Server In The Browser](https://github.com/statewalker/webrun-http-browser).\n\nThe general idea is that HTTP adapters transforms Request / Response instances to a stream of binary blocks transmitted over MessageChannel ports. Check the schema below to get idea how everything works. \n\n***Note:*** You can use the \"Prev\" / \"Next\" buttons to highlight individual steps.","pinned":false,"hidden":false,"mode":"md"},{"id":49,"value":"renderMermaidSteps(\n step,\n `\nsequenceDiagram\n autonumber\n participant Caller\n participant ClientStub\n participant ServerStub\n participant Handler\n\n %% step %%\n Caller->>ClientStub: Request\n\n %% step %%\n ClientStub->>ServerStub: AsyncIterator with Binary Blocks\n \n %% step %%\n ServerStub->>Handler: Request\n\n %% step %%\n Handler-->>Handler: Request -> Response\n \n %% step %%\n Handler->>ServerStub: Response\n\n %% step %%\n ServerStub->>ClientStub: AsyncIterator with Binary Blocks\n \n %% step %%\n ClientStub->>Caller: Response\n\n`\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":74,"value":"viewof step = renderStepper(8)","pinned":false,"hidden":false,"mode":"ojs"},{"id":95,"value":"renderTextSteps(\n step,\n `\n1. The caller initiates the process by creating a new instance of the Request object and executing a call to the library.\n2. The library takes the given request and serializes it into a stream, which is essentially a sequence of binary blocks. These blocks are then transmitted to the ServerStub using an AsyncIterator.\n3. On the server side, the stub responsible for handling requests deserializes the stream content and reconstructs a Request instance. This instance is subsequently passed to the registered HTTP handler.\n4. The HTTP handler executes the necessary actions and generates a Response object.\n5. The response returned from the handler are serialized into a sequence of binary blocks.\n6. The binary blocks containing the serialized response are transmitted back to the client using AsyncIterator.\n7. The client's stub reassembles the Response instance from the received binary blocks and returns it to the original caller.\n`\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":148,"value":"## Implementation Details\n\nThis notebook uses these two undependent, but complementary, libraries:\n* The [WebRunHttp](https://github.com/statewalker/webrun-http) library serializes / deserializes [Request](https://developer.mozilla.org/en-US/docs/Web/API/Request) / [Response](https://developer.mozilla.org/en-US/docs/Web/API/Response) objects and delegates transport to standard AsyncIterators; basically it implements the Fetch-based API on top of AsyncGenerators / AsyncIterators \n* The [WebRunPorts](https://github.com/statewalker/webrun-ports) library implements async calls and async iterators over MessageChannel Ports.","pinned":false,"hidden":false,"mode":"md"},{"id":134,"value":"## Example1: GET Call\n\nThis example shows an implementation of a simple HTTP GET call requesting a server resource. It contains also the server-side block handling the request. Client communicates with the server using port of a local MessageChannel instance.","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":170,"value":"## Example 2: POST Forms With Fields And Files\n\nIn this example we allow to submit a form with text fields and a file attachment. On submit of this form we generate a multipart POST request handled by the \"server\" handler. There we read the form content as well as the content of the file and return everything back to the caller.\n\nNote: this example don't work in Firefox due to the bug related to submitting of sterams. ","pinned":false,"hidden":false,"mode":"md"},{"id":173,"value":"// First of all, let's create a form. This form will be submitted to the \"server\", where we will read and visualize the content of this form.\ntestForm = htl.html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":190,"value":"HTTP Request with the content of the form:","pinned":false,"hidden":false,"mode":"md"},{"id":183,"value":"example2Request = Generators.observe((notify) => {\n testForm.onsubmit = async (ev) => {\n ev.preventDefault();\n ev.stopPropagation();\n const formData = new FormData(ev.target);\n const request = new Request(\"/foo/bar/baz\", {\n method: \"POST\",\n body: formData\n });\n notify(request);\n };\n return () => (testForm.onsubmit = null);\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":213,"value":"example2Response = {\n const channel = new MessageChannel();\n channel.port1.start();\n channel.port2.start();\n\n // ------------------------------------------\n // Create a \"server\" function.\n // (The formHandler cell is implemented below)\n const server = WebRunHttp.newHttpServer(formHandler);\n const close = WebRunPorts.listenBidi(channel.port1, server);\n invalidation.then(close);\n\n // ------------------------------------------\n // The client-side initialization:\n const client = WebRunHttp.newHttpClient((input) =>\n WebRunPorts.callBidi(channel.port2, input, {})\n );\n\n // ------------------------------------------\n // Now we can call our client.\n const response = await client(example2Request);\n const json = await response.json();\n return json;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":181,"value":"The cell below handles HTTP form request, decode form data, extract the recieved file content as a string and returns all this information to the caller for inspection.","pinned":false,"hidden":false,"mode":"md"},{"id":178,"value":"async function formHandler(request) {\n const data = {};\n const f = await request.formData();\n for (const [name, value] of f.entries()) {\n data[name] = value;\n }\n let fileInfo = {\n name: null,\n size: 0,\n content: null\n };\n const file = f.get(\"file\");\n if (file) {\n fileInfo.name = file.name;\n fileInfo.mimeType = file.type;\n fileInfo.size = file.size;\n fileInfo.content = \"\";\n const buffer = await file.arrayBuffer();\n const uint8 = new Uint8Array(buffer);\n fileInfo.content = new TextDecoder().decode(uint8);\n }\n const { method, url, headers } = request;\n const headersMap = {};\n for (const [key, value] of headers) {\n headersMap[key] = value;\n }\n return new Response(\n JSON.stringify({\n method,\n url,\n headers: headersMap,\n message: \"Hello World!\",\n data,\n fileInfo\n }),\n {\n headers: {\n \"Content-Type\": \"application/json\"\n }\n }\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":142,"value":"## Utility Methods","pinned":false,"hidden":false,"mode":"md"},{"id":112,"value":"function renderStepper(length) {\n let step = 0;\n function inc(delta) {\n step += delta;\n if (step >= length) step = 0;\n if (step < 0) step = length - 1;\n // step = Math.max(0, Math.min(step, length - 1));\n return step;\n }\n const buttons = Inputs.button([\n [\"Prev\", () => inc(-1)],\n [\"Next\", () => inc(+1)]\n ]);\n buttons.value = step;\n return buttons;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"// Copied from:\n// import { steppedMermaid } from \"@tomlarkworthy/animated-sequence-diagrams\"\nfunction renderMermaidSteps(index, markup) {\n let steps = markup.split(/\\n\\s*%% *step *%% *\\n/);\n if (index > 0 && index < steps.length) {\n steps[index] = `rect rgb(0, 255, 0)\\n${steps[index]}\\nend\\n`;\n }\n // steps = steps.slice(0, index + 1);\n // const n = steps.length - 1;\n // if (n > 0)\n const view = mermaid`${steps.join(\"\\n\")}`;\n const id = view.getAttribute(\"id\");\n return htl.html`

\n${view}\n\n

`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":97,"value":"function renderTextSteps(index, content) {\n const view = md`${content}`;\n const li = view.querySelector(`li:nth-child(${index})`);\n if (li) {\n // li.style.color = \"red\";\n li.style.backgroundColor = \"rgb(0, 255, 0)\";\n }\n return view;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":138,"value":"## Imports","pinned":false,"hidden":false,"mode":"md"},{"id":9,"value":"WebRunHttp = import(\"https://unpkg.com/@statewalker/webrun-http@0.1\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":11,"value":"WebRunPorts = import(\"https://unpkg.com/@statewalker/webrun-ports@0.4\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":68,"value":"// import { Scrubber } from \"@mbostock/scrubber\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}