31:T6c6,{ // await visibility(); // Name of the second endpoint const endpointKey = "ENDPOINT_EXAMPLE_2"; // ----------------- // Start the ServiceWorker and open a communication port: const { port, baseUrl, close: closeChannel } = await WebRunHttp.newRemoteRelayChannel(); invalidation.then(closeChannel); // ----------------- // Define the base URL for this service: const serviceBaseUrl = `${baseUrl}~${endpointKey}`; // ----------------- // Define an HTTP handler. In this case it is a simple file dispatcher // returning file content by path. const httpHandler = async (request) => { const url = request.url; // To get the path from URL we need to remove the service prefix: const path = url.slice(serviceBaseUrl.length); // Get the file by the corresponding path: const file = files[path]; // Send 404 if nothing was found: if (!file) { return new Response(`Error 404: File Not Found. Path: '${path}'.`, { status: 404, statusText: "File not found" }); } // Return the file content with the corresponding MIME type: return new Response(file.content, { headers: { status: 200, "Content-Type": file.mimeType } }); }; // ----------------- // Register a new HTTP service using the communication port defined above: const close = await WebRunHttp.initHttpService(httpHandler, { key: endpointKey, port }); invalidation.then(close); // ----------------- // And finally we can create an iframe element visualizing the page: const endpointUrl = `${serviceBaseUrl}/index.html`; const label = `/~${endpointKey}/index.html`; return renderIframe(endpointUrl, label); }32:Ta51,{ await visibility(); // Name of the second endpoint const endpointKey = "ENDPOINT_EXAMPLE_3"; // ----------------- // Start the ServiceWorker and open a communication port: const { port, baseUrl, close: closeChannel } = await WebRunHttp.newRemoteRelayChannel(); invalidation.then(closeChannel); // ----------------- // Define the base URL for this service: const serviceBaseUrl = `${baseUrl}~${endpointKey}`; // ----------------- // This "database" is used to store submitted data: let data = { firstName: "John", lastName: "Smith" }; const div = htl.html`

`; function updateDiv() { div.innerText = JSON.stringify(data); } updateDiv(); // ----------------- // Request dispatcher. const httpHandler = async (request) => { const { url, method } = request; const path = url.slice(serviceBaseUrl.length); if (method === "POST") { const f = await request.formData(); for (const [name, value] of f.entries()) { data[name] = value; } updateDiv(); return replyWithHtmlPage(`

Success!

Recieved data:

${JSON.stringify(data, null, 2)}

Return back.

`); } else if (method === "GET") { return replyWithHtmlPage(`

Submit Form

Click here to refresh this page.

`); } }; const close = await WebRunHttp.initHttpService(httpHandler, { key: endpointKey, port }); invalidation.then(close); const endpointUrl = `${serviceBaseUrl}/index.html`; const label = `/~${endpointKey}/index.html`; const iframe = renderIframe(endpointUrl, label); return htl.html`

${div}${iframe}`; // -------------------- function replyWithHtmlPage(content) { return new Response( ` ${content} `, { status: 200, headers: { "Content-Type": "text/html" } } ); } }33:[] 2f:{"title":"WebRun: HTTP Service","cells":[{"id":0,"value":"# WebRun: HTTP Service\n***Code, execute and debug the whole application stack in the browser***\n","pinned":false,"hidden":false,"mode":"md"},{"id":8,"value":"[WebRunHTTP](https://github.com/statewalker/webrun-http-browser/) allows to code, execute and debug your web application in the browser. Even without internet connection.\n\nThis library starts a [ServiceWorker](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API) delegating HTTP calls to functions defined in this notebook. Communication between this page and handlers goes through a [MessagePort](https://developer.mozilla.org/en-US/docs/Web/API/MessagePort) instance.\n","pinned":false,"hidden":false,"mode":"md"},{"id":64,"value":"\n```js\nimport * as WebRunHttp from \"https://unpkg.com/@statewalker/webrun-http-browser@0.3/dist/index.js\";\n\n// Step 1: Start a ServiceWorker and open a MessageChannel used to recieve HTTP requests and send responses:\nconst connection = await WebRunHttp.newRemoteRelayChannel();\n\n// Step 2: Define HTTP handler:\nconst httpHandler = (request) => new Response(\"Hello\");\n\n// Step 3: Instantiate a \"server\" using the communcation channel with the ServiceWorker:\nconst close = await WebRunHttp.initHttpService(httpHandler, {\n key : \"MY_ENDPOINT\", // Service prefix\n port : connection.port\n});\n\n// Now the service is available on this URL:\nconst serviceUrl = `\\${connection.baseUrl}/~MY_ENDPOINT/`;\n\n```","pinned":false,"hidden":false,"mode":"md"},{"id":23,"value":"toc({\n headers: \"h2,h3,h4,h5\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":172,"value":"## Example 1: Basic HTTP Handler","pinned":false,"hidden":false,"mode":"md"},{"id":127,"value":"{\n await visibility();\n\n // Constants\n const endpointKey = \"EXAMPLE_1\";\n\n // Step 1: Create a local function returning files when a new HTTP request arrives:\n const httpHandler = async (request) => {\n return new Response(\"Hello World!\");\n };\n\n // Step 2: Start a ServiceWorker and open a MessageChannel used to recieve HTTP requests and send responses:\n const {\n port,\n baseUrl,\n close: closeChannel\n } = await WebRunHttp.newRemoteRelayChannel();\n invalidation.then(closeChannel);\n const serviceUrl = new URL(`~${endpointKey}/`, baseUrl);\n\n // Step 3: Instantiate a \"server\" using the communcation channel with the ServiceWorker:\n const close = await WebRunHttp.initHttpService(httpHandler, {\n key: endpointKey,\n port\n });\n invalidation.then(close);\n\n const endpointUrl = `${serviceUrl}/index.html`;\n const label = `/~${endpointKey}/index.html`;\n return renderIframe(endpointUrl, label);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":78,"value":"## Example 2: Static File Server\n\nIn this example we show visualization of a simple site with three files: \n- `/index.html` - the main HTML file using JavaScript and CSS files\n- `/index.css` - styles used by the HTML page\n- `/index.js` - script file\n\nNote that the `index.js` is imported using the classical ESM module syntax, which is not possible without HTTP services:\n```js\n \n```","pinned":false,"hidden":false,"mode":"md"},{"id":90,"value":"files = ({\n \"/index.js\": {\n content: `\nexport function sayHello(name) {\n return \"Hello \" + name + \"!\";\n}\n`,\n mimeType: \"application/javascript\"\n },\n \"/index.css\": {\n content: `\n #greeting { color: red; }\n`,\n mimeType: \"text/css\"\n },\n \"/index.html\": {\n content: `\n\n\n\n \n \n \n \n\n\n

\n \n\n\n`,\n mimeType: \"text/html\"\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":60,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":201,"value":"## Example 3: Handling POST Requests\n\nIn this example we create a simple site submitting data with forms. The data are stored in an object defined in this cell.\n\nYou can open this form in a separate window and check that data are really sent from this cell.","pinned":false,"hidden":false,"mode":"md"},{"id":206,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":307,"value":"function renderIframe(url, label) {\n return htl.html`

\n \n

`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":68,"value":"## Imports And Configuration","pinned":false,"hidden":false,"mode":"md"},{"id":56,"value":"WebRunHttp = import(\n \"https://unpkg.com/@statewalker/webrun-http-browser@0.3/dist/index.js\"\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":25,"value":"import { toc } from \"@nebrius/indented-toc\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}