peerreynders/quickshot.html

## quickshot.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Quickshot</title>
</head>
<body>
  <p>Open the Console!</p>
  <p>
    <ul>
      <li><a href="https://github.com/CrowdHailer/gen_browser">gen_browser</a></li>
      <li><a href="https://github.com/CrowdHailer/gen_browser/blob/master/examples/standalone.exs">standalone.exs</a></li>
    </ul>
  </p>
  <script type="text/javascript">
   const FIRST_MESSAGE_TYPE = '__gen_browser__/init';
   const SOURCE_URL = 'http://localhost:8080/mailbox';
   const SEND_PATH = 'http://localhost:8080/send/';

   let source = new EventSource(SOURCE_URL);
   let messageListener = null;
   let timeoutID = null;

   const removeMessageListener = () => {
     if (messageListener) {
       source.removeEventListener('message', messageListener, false);
       messageListener = null;
     }
   };
   const setMessageListener = listener => {
     if (messageListener) {
       removeMessageListener()
     }
     messageListener = listener;
     source.addEventListener('message', messageListener, false);
   };

   const onOpen = event => {
     console.info('onOpen: %O', event);
     source.removeEventListener('open', onOpen, false);
   };

   const closeEventSource = () => {
     timeoutID = null;
     source.removeEventListener('error', onError, false);
     removeMessageListener();
     source.close();
     console.info('CLOSED');
   };

   const onFirstMessage = event => {
     const {type, address, config} = JSON.parse(event.data)

     if(type === FIRST_MESSAGE_TYPE ) {
       console.info('onFirstMessage \naddress: %s \nlogger address: %s', address, config.logger);
       setMessageListener(onMessage);   // regular message processing
       send(address);                   // send a message to ourselves

     } else {
       // Unexpected first message
       if(timeoutID) { // cancel close - DO IT NOW
         clearTimeout(timeoutID);
       }
       console.error('Invalid first message: %O', event.data);
       closeEventSource();
     }
   };

   console.info('EventSource: ', source);
   source.addEventListener('open', onOpen, false);
   source.addEventListener('error', onError, false);
   setMessageListener(onFirstMessage);

   timeoutID = setTimeout(closeEventSource, 5000); // close event source in five seconds

   // --- === ---

   function onMessage(event) {
     msg = JSON.parse(event.data);
     console.info('onMessage: %O', msg);
   }
   function onError(e) {
     if (e.readyState === EventSource.CLOSED) {
       console.info('Completed - e.g. Server closed event source. %O', e)
     } else {
       console.error('onError %O', e)
     }
   }

   function send(address) {
     const sendUrl = SEND_PATH + address;
     const body = JSON.stringify('It\'s Alive!');
     const request = new Request(sendUrl, {method: 'POST', body});

     fetch(request).then(onResponse, onFetchError);
   }
   function onResponse(response) {
     const {status, statusText} = response;
     console.info('onResponse: status %.3d %s', status, statusText);
   }
   function onFetchError(error) {
     console.error('onFetchError %O', error);
   }

  </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Quickshot</title>
	</head>
	<body>
	<p>Open the Console!</p>
	<p>
	<ul>
	<li><a href="https://github.com/CrowdHailer/gen_browser">gen_browser</a></li>
	<li><a href="https://github.com/CrowdHailer/gen_browser/blob/master/examples/standalone.exs">standalone.exs</a></li>
	</ul>
	</p>
	<script type="text/javascript">
	const FIRST_MESSAGE_TYPE = '__gen_browser__/init';
	const SOURCE_URL = 'http://localhost:8080/mailbox';
	const SEND_PATH = 'http://localhost:8080/send/';

	let source = new EventSource(SOURCE_URL);
	let messageListener = null;
	let timeoutID = null;

	const removeMessageListener = () => {
	if (messageListener) {
	source.removeEventListener('message', messageListener, false);
	messageListener = null;
	}
	};
	const setMessageListener = listener => {
	if (messageListener) {
	removeMessageListener()
	}
	messageListener = listener;
	source.addEventListener('message', messageListener, false);
	};

	const onOpen = event => {
	console.info('onOpen: %O', event);
	source.removeEventListener('open', onOpen, false);
	};

	const closeEventSource = () => {
	timeoutID = null;
	source.removeEventListener('error', onError, false);
	removeMessageListener();
	source.close();
	console.info('CLOSED');
	};

	const onFirstMessage = event => {
	const {type, address, config} = JSON.parse(event.data)

	if(type === FIRST_MESSAGE_TYPE ) {
	console.info('onFirstMessage \naddress: %s \nlogger address: %s', address, config.logger);
	setMessageListener(onMessage); // regular message processing
	send(address); // send a message to ourselves

	} else {
	// Unexpected first message
	if(timeoutID) { // cancel close - DO IT NOW
	clearTimeout(timeoutID);
	}
	console.error('Invalid first message: %O', event.data);
	closeEventSource();
	}
	};

	console.info('EventSource: ', source);
	source.addEventListener('open', onOpen, false);
	source.addEventListener('error', onError, false);
	setMessageListener(onFirstMessage);

	timeoutID = setTimeout(closeEventSource, 5000); // close event source in five seconds

	// --- === ---

	function onMessage(event) {
	msg = JSON.parse(event.data);
	console.info('onMessage: %O', msg);
	}
	function onError(e) {
	if (e.readyState === EventSource.CLOSED) {
	console.info('Completed - e.g. Server closed event source. %O', e)
	} else {
	console.error('onError %O', e)
	}
	}

	function send(address) {
	const sendUrl = SEND_PATH + address;
	const body = JSON.stringify('It\'s Alive!');
	const request = new Request(sendUrl, {method: 'POST', body});

	fetch(request).then(onResponse, onFetchError);
	}
	function onResponse(response) {
	const {status, statusText} = response;
	console.info('onResponse: status %.3d %s', status, statusText);
	}
	function onFetchError(error) {
	console.error('onFetchError %O', error);
	}

	</script>
	</body>
	</html>