Multicast example

HttpRelay.io multicast communication example

by Jonas Jasas

HTML

<h1>Httprelay.io mcast example</h1>
<p>
Mcast communication method provides one to many buffered and asynchronous data transfers between HTTP clients (web browser to web browser).
</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>Communication channel ID (must be unique and secret)</legend>
  <label target="channelInput">https://demo.httprelay.io/mcast/<label/><input id="channelInput"> 
</fieldset><br>

<fieldset>
<legend>Producer client POST <span class="mcastContainer"></span></legend>
  <input id="msgInput" placeholder="Message">
  <button id="sendBtn">Send</button>
</fieldset><br>

<fieldset id="receiverA">
  <legend>Consumer client A GET <span class="mcastContainer"></span></legend>
</fieldset><br>

<fieldset id="receiverB">
  <legend>Consumer client B GET <span class="mcastContainer"></span></legend>
</fieldset>

JavaScript

$.ajaxSetup({xhrFields: {withCredentials: true}});	// For cookies with SeqId

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

// Receiver A
var receive = function(elId) {	
  $.get(mcastUrl)
    .done(function(data) {
      $(elId).prepend(data + '<br>');
    }).always(function() {
      receive(elId);
    })
}

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

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

receive('#receiverA');
receive('#receiverB');