thisisjofrank/ably.html

## ably.html
<!DOCTYPE html>
<html>
<head>
  <title>PubNub JavaScript SDK QuickStart</title>
</head>

<body>
<div>
  <strong>Earth:</strong> <input id="update-text" type="input" placeholder="enter update for Earth here"/>
  <input id="publish-button" type="submit" value="Submit Update to The Guide"/>
  <p><strong>Updates</strong></p>
  <div id="messages-top"/>
</div>
</body>

<script src="//cdn.ably.io/lib/ably.min-1.js"></script>

<script>
  (async function () {

    const messagesTop = document.getElementById('messages-top');
    const updateText = document.getElementById('update-text');
    const sendButton = document.getElementById('publish-button');
    sendButton.addEventListener('click', () => { submitUpdate(theEntry, updateText.value) });

    const theChannel = 'the_guide';
    const theEntry = 'Earth';

    const ably = new Ably.Realtime.Promise({ authUrl: '/api/createTokenRequest' }); // Maybe paste API keys in here for like for like
    const channel = await ably.channels.get(theChannel);

    ably.connection.on('connected', (event) => {
      displayMessage(`[STATUS: ${event.current}]`, `connected to channels: ${channel.name}`);
      submitUpdate(theEntry, 'Harmless.');
    });

    channel.subscribe(function(event) {
      displayMessage('[MESSAGE: received]', event.data.entry + ': ' + event.data.update);
    });

    const submitUpdate = async function(anEntry, anUpdate) {
      await channel.publish({ name: "PUBLISH", data: { 'entry': anEntry, 'update': anUpdate }});
      displayMessage('[PUBLISH: sent]', 'timetoken: ?????');
      updateText.value = "";
    };

    const displayMessage = function(messageType, aMessage) {
      let pmessage = document.createElement('p');
      let br = document.createElement('br');

      messagesTop.after(pmessage);
      pmessage.appendChild(document.createTextNode(messageType));
      pmessage.appendChild(br);
      pmessage.appendChild(document.createTextNode(aMessage));
    }

  })();
</script>

</html>

## pubnub.html
<!DOCTYPE html>
<html>
<head>
  <title>PubNub JavaScript SDK QuickStart</title>
</head>

<body>
<div>
  <strong>Earth:</strong> <input id="update-text" type="input" placeholder="enter update for Earth here"/>
  <input id="publish-button" type="submit" value="Submit Update to The Guide"/>
  <p><strong>Updates</strong></p>
  <div id="messages-top"/>
</div>
</body>

<script src="https://cdn.pubnub.com/sdk/javascript/pubnub.4.27.4.min.js"></script>

<script>
  const messagesTop = document.getElementById('messages-top');
  const updateText = document.getElementById('update-text');
  const sendButton = document.getElementById('publish-button');
  sendButton.addEventListener('click', () => { submitUpdate(theEntry, updateText.value) });

  const clientUUID = PubNub.generateUUID();
  const theChannel = 'the_guide';
  const theEntry = 'Earth';

  const pubnub = new PubNub({ publishKey: 'pub-c-4b99e3c0-1f72-4516-89ed-c5ae29a2444f', subscribeKey: 'sub-c-28965322-bf61-11ea-bcf8-42a3de10f872',  uuid: clientUUID });

  pubnub.addListener({
    message: function(event) {
      displayMessage('[MESSAGE: received]',
        event.message.entry + ': ' + event.message.update);
    },
    presence: function(event) {
      displayMessage('[PRESENCE: ' + event.action + ']',
        'uuid: ' + event.uuid + ', channel: ' + event.channel);
    },
    status: function(event) {
      displayMessage('[STATUS: ' + event.category + ']',
        'connected to channels: ' + event.affectedChannels);

      if (event.category == 'PNConnectedCategory') {
        submitUpdate(theEntry, 'Harmless.');
      }
    }
  });

  pubnub.subscribe({ channels: ['the_guide'], withPresence: true });

  const submitUpdate = function(anEntry, anUpdate) {
    pubnub.publish({
      channel : theChannel,
      message : {'entry' : anEntry, 'update' : anUpdate}
    },
    function(status, response) {
      if (status.error) {
        console.log(status)
      }
      else {
        displayMessage('[PUBLISH: sent]',
          'timetoken: ' + response.timetoken);

        updateText.value="";
      }
    });
  };

  const displayMessage = function(messageType, aMessage) {
    let pmessage = document.createElement('p');
    let br = document.createElement('br');

    messagesTop.after(pmessage);
    pmessage.appendChild(document.createTextNode(messageType));
    pmessage.appendChild(br);
    pmessage.appendChild(document.createTextNode(aMessage));
  }

</script>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>PubNub JavaScript SDK QuickStart</title>
	</head>

	<body>
	<div>
	<strong>Earth:</strong> <input id="update-text" type="input" placeholder="enter update for Earth here"/>
	<input id="publish-button" type="submit" value="Submit Update to The Guide"/>
	<p><strong>Updates</strong></p>
	<div id="messages-top"/>
	</div>
	</body>

	<script src="//cdn.ably.io/lib/ably.min-1.js"></script>

	<script>
	(async function () {

	const messagesTop = document.getElementById('messages-top');
	const updateText = document.getElementById('update-text');
	const sendButton = document.getElementById('publish-button');
	sendButton.addEventListener('click', () => { submitUpdate(theEntry, updateText.value) });

	const theChannel = 'the_guide';
	const theEntry = 'Earth';

	const ably = new Ably.Realtime.Promise({ authUrl: '/api/createTokenRequest' }); // Maybe paste API keys in here for like for like
	const channel = await ably.channels.get(theChannel);

	ably.connection.on('connected', (event) => {
	displayMessage(`[STATUS: ${event.current}]`, `connected to channels: ${channel.name}`);
	submitUpdate(theEntry, 'Harmless.');
	});

	channel.subscribe(function(event) {
	displayMessage('[MESSAGE: received]', event.data.entry + ': ' + event.data.update);
	});

	const submitUpdate = async function(anEntry, anUpdate) {
	await channel.publish({ name: "PUBLISH", data: { 'entry': anEntry, 'update': anUpdate }});
	displayMessage('[PUBLISH: sent]', 'timetoken: ?????');
	updateText.value = "";
	};

	const displayMessage = function(messageType, aMessage) {
	let pmessage = document.createElement('p');
	let br = document.createElement('br');

	messagesTop.after(pmessage);
	pmessage.appendChild(document.createTextNode(messageType));
	pmessage.appendChild(br);
	pmessage.appendChild(document.createTextNode(aMessage));
	}

	})();
	</script>

	</html>