Httprelay Proxy Serve HTML

by Jonas Jasas

HTML

<h1>Serve HTML page directly from your browser</h1>
<h2><a href="https://httprelay.io/" target="_blank">HTTP Relay</a> proxy communication method</h2>

<p>
  Copy this link and paste it in to the new browser tab to see the result (or share this link with the other users):
  <div id="serverLink" href="" target="_blank">
    <span class="proxy-url" id ="proxyUrl"></span><span class="proxy-server" id="proxyServer"></span><span class="proxy-path" id ="proxyPath"></span>
  </div>
</p>

<details>
  <summary>URL legend</summary>
  <ul>
    <li class="proxy-url">URL of HTTP Relay proxy communication method</li>
    <li class="proxy-server">Server name</li>
    <li class="proxy-path">Path</li>
  </ul>
</details>

<p>
  You can edit this HTML and changes will be visible imediately using link above.
</p>

  <textarea id="pageContent" autofocus cols="80" rows="20">
<!doctype html>
<html lang=en>
  <head>
    <meta charset=utf-8>
    <meta http-equiv="refresh" content="1" />
    <title>Httprelay.io example</title>
  </head>
  <body>
    <h1>HTTP Relay proxy communication method</h1>
    <p>This page is served directly from the browser</p>
  </body>
</html>
  </textarea>

CSS

.proxy-url {
  color: blue;
}

.proxy-server {
  color: green;
}

.proxy-path {
  color: red;
}

JavaScript

import Httprelay from 'https://cdn.httprelay.io/httprelay-proxy-v1.js'

// Generating unique server name
let serverName = getUniqueServerName('demo-html')

// Creating a server
let httprelay = new Httprelay(serverName)

// Setting URL path that will route request to our handler
let path = '/html'

// Registering handler for the path
httprelay.get(path, () => new Response(document.getElementById('pageContent').value))

// Starting server
httprelay.start()





// NOT IMPORTANT ///////////////////////////////////////////////////////////////////////////////
let urlParts = ['https:/demo.httprelay.io/proxy/', serverName, path]
document.getElementById('serverLink').setAttribute('href', urlParts.join(''));
document.getElementById('proxyUrl').innerHTML = urlParts[0];
document.getElementById('proxyServer').innerHTML = urlParts[1];
document.getElementById('proxyPath').innerHTML = urlParts[2];

function getUniqueServerName(name) {
	let serverName = localStorage.getItem(name);
  if (!serverName) {
  	serverName = `${name}-${Math.round(Math.random()*10000)}`
    localStorage.setItem(name, serverName);
  }
	return serverName
}