Sync example

HttpRelay.io sync HTTP client communication example

by Jonas Jasas

HTML

<h1>Httprelay.io sync example</h1>
<p>A and B HTTP clients (web browser to web browser) synchronously exchanging messages using URL query parameters</p>

<p>
  <em>IMPORTANT!</em> demo.httprelay.io instance runs in extremely limited environment.
  In order to evaluate performance or use it in production please 
  <a href="https://gitlab.com/jonas.jasas/httprelay#installation" target="_blank">run your own instance</a>.
</p>

<fieldset>
  <legend>A HTTP Client</legend>
  GET https://demo.httprelay.io/sync/<input class="chan" size=6>?<input class="msg" placeholder="msg=mymessage" size=12><button>Exchange with B</button><br>
  <p>Response "Httprelay-Query" header field value:<p>
  </p>
</fieldset><br>

<fieldset>
  <legend>B HTTP Client</legend>
  GET https://demo.httprelay.io/sync/<input class="chan" size=6>?<input class="msg" placeholder="msg=mymessage" size=12><button>Exchange with A</button><br>
  <p>Response "Httprelay-Query" header field value:<p>
</fieldset>

JavaScript

// Send message
$('button').click(function(e) {
  let chan = $(e.currentTarget).siblings('.chan').val();
  let elMsg = $(e.currentTarget).siblings('.msg');
  let elPanel = $(e.currentTarget).parent();
	elPanel.attr('disabled', '');
  $('.chan').attr('disabled', '');
  
  $.get('https://demo.httprelay.io/sync/' + chan + '?' + elMsg.val())
  	.done(function(data, textStatus, request) {
      elPanel.append(request.getResponseHeader('Httprelay-Query') + '<br>');
  	})
  	.always(function() {
  		elPanel.removeAttr('disabled');
		  $('.chan').removeAttr('disabled');
		  elMsg.val(null);
  	});
})

var linkUrl;
$('.chan').on('paste keyup', function(e) {
	$('.chan').val($(e.currentTarget).val());
})

// Generating random channel id
$('.chan').val(Math.random().toString(36).substr(4)).trigger('change')