Link example

HttpRelay.io link (p2p) communication example

by Jonas Jasas

HTML

<h1>Httprelay.io link example</h1>

<p>Link communication method provides HTTP clien to HTTP client (web browser to web browser) synchronous one directional data transfers.</p>

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

<fieldset>
  <legend>Communication channel ID (must be unique and secret)</legend>
  <label target="channelInput">https://demo.httprelay.io/link/<label/><input id="channelInput"> 
</fieldset><br>

<fieldset>
  <legend>A client -> Send information to POST <span class="linkContainer"></span></legend>
  <input id="msgInput" placeholder="Message">
  <button id="sendBtn">Send</button>
</fieldset><br>

<fieldset id="receivedData">
  <legend>B client -> Received information from GET <span class="linkContainer"></span></legend>
</fieldset>

JavaScript

// Sending message
$('#sendBtn').click(function() {
  $.post(linkUrl, $('#msgInput').val());
  $('#msgInput').val(null);
})

// Receiving message
var receive = function() {	
  $.get(linkUrl).done(function(data) {
    $('#receivedData').append(data + '<br>');
  }).always(receive)
}

var linkUrl;
$('#channelInput').on('change keyup', function() {
  linkUrl = 'https://demo.httprelay.io/link/' + $('#channelInput').val();
  $('.linkContainer').html(linkUrl)
})

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

receive();