{"id":56362,"date":"2022-07-09T03:01:57","date_gmt":"2022-07-08T17:01:57","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=56362"},"modified":"2022-07-08T21:48:15","modified_gmt":"2022-07-08T11:48:15","slug":"broadcast-api-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/broadcast-api-primer-tutorial\/","title":{"rendered":"Broadcast Channel API Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/broadcast_api_test.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Broadcast Channel API Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/broadcast_api_test.jpg\" title=\"Broadcast Channel API Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Broadcast Channel API Primer Tutorial<\/p><\/div>\n<p>Broadcasting is a tried and trusted model of &#8230;<\/p>\n<ul>\n<li>information distribution<\/li>\n<li>entertainment distribution<\/li>\n<\/ul>\n<p> &#8230; and if you add in &#8220;listeners who can respond&#8221; (perhaps named and the broadcaster can re-respond) you can add &#8230;<\/p>\n<ul>\n<li>feedback<\/li>\n<li>collaboration<\/li>\n<li>sharing<\/li>\n<\/ul>\n<p> &#8230; into the mix.  Well, today, we have a <a target=_blank title='Broadcast Channel API information' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Broadcast_Channel_API'>Broadcast Channel API<\/a> idea where same device, same web browser users can subscribe to a Broadcast Channel and join into <a target=_blank title='window.postMessage() information' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Window\/postMessage'>postMessage<\/a>() inspired functionality of this ilk.<\/p>\n<p><code><br \/>\n&lt;html&gt;<br \/>\n&lt;head&gt;<br \/>\n&lt;title&gt;Broadcast API Usage - RJM Programming - July, 2022 ... thanks to https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Broadcast_Channel_API&lt;\/title&gt;<br \/>\n&lt;\/head&gt;<br \/>\n&lt;body&gt;<br \/>\n&lt;style&gt;<br \/>\n  td { vertical-align: top; }<br \/>\n  #ta { width: 98%; background-color: yellow; }<br \/>\n  #tab { width: 98%; background-color: lightblue; }<br \/>\n&lt;\/style&gt;<br \/>\n&lt;table border=20 style='width:100%;'&gt;<br \/>\n&lt;tr&gt;&lt;th contenteditable=true id=bname&gt;Broadcaster&lt;\/th&gt;&lt;th contenteditable=true id=lname&gt;Listener&lt;\/th&gt;&lt;\/tr&gt;<br \/>\n&lt;tr&gt;&lt;td id=blist&gt;<br \/>\n&lt;input style='width:100%;' id=itab type=text placeholder='RJM Programming Broadcast Channel Name of yours' value='' onblur='newone(this);'&gt;&lt;\/input&gt;<br \/>\n&lt;textarea id=tab placeholder='' value='' onblur='sthis(this);' rows=5 cols=80&gt;&lt;\/textarea&gt;<br \/>\n&lt;\/td&gt;<br \/>\n&lt;td id=btextarea&gt;<br \/>\n&lt;input id=ita style='width:100%;' type=text placeholder='RJM Programming Broadcast Channel Name of broadcaster to subscribe to' value='' onblur='onenew(this);'&gt;&lt;\/input&gt;<br \/>\n&lt;textarea id=ta onblur='sthis(this);' placeholder='' value='' rows=5 cols=80&gt;&lt;\/textarea&gt;<br \/>\n&lt;\/td&gt;&lt;\/tr&gt;<br \/>\n&lt;\/table&gt;<br \/>\n<br \/>\n&lt;script type='text\/javascript'&gt;<br \/>\n  var lastmsg='';<br \/>\n  let ourbc=null;<br \/>\n  let yourbc=null;<br \/>\n  let pbc=null;<br \/>\n  let bc=null;<br \/>\n  var wois=null;<br \/>\n<br \/> <br \/>\n  var ebc=location.search.split('bc=')[1] ? decodeURIComponent(location.search.split('bc=')[1].split('&')[0]).replace(\/\\+\/g,' ') : \"\";<br \/>\n  if (ebc.trim() != '') {<br \/>\n    \/\/const bc=null;<br \/>\n    document.getElementById('itab').placeholder=ebc;<br \/>\n    document.getElementById('ita').placeholder=ebc;<br \/>\n    document.getElementById('itab').value='';<br \/>\n    document.getElementById('ita').value='';<br \/>\n    document.getElementById('itab').onblur=function(event) { event.target.value=ebc; }<br \/>\n    document.getElementById('ita').onblur=function(event) { event.target.value=ebc; }<br \/>\n    document.getElementById('itab').setAttribute('readonly',true);<br \/>\n    document.getElementById('tab').setAttribute('readonly',true);<br \/>\n    document.getElementById('tab').style.display='none';<br \/>\n    yourbc = new BroadcastChannel(ebc);<br \/>\n    yourbc.onmessage = event =&gt; {<br \/>\n      if (minussc(event.data) != lastmsg) {<br \/>\n        \/\/alert('in with msg=' + event.data);<br \/>\n        \/\/document.getElementById('ta').value+=String.fromCharCode(10) + event.data.replace(lastmsg, '');<br \/>\n        document.getElementById('ta').value=String.fromCharCode(10) + event.data; \/\/.replace(lastmsg, '');<br \/>\n        document.getElementById('ta').title='' + new Date();<br \/>\n        document.getElementById('ta').rows='' + oureval(3 + eval('' + document.getElementById('ta').rows));<br \/>\n        document.getElementById('tab').rows='' + oureval(3 + eval('' + document.getElementById('tab').rows));<br \/>\n        if (yourbc) {<br \/>\n          \/\/yourbc.postMessage(document.getElementById('lname').innerHTML + ': ' + minussc(event.data)); \/\/.replace(lastmsg, ''));<br \/>\n          yourbc.postMessage(event.data); \/\/.replace(lastmsg, ''));<br \/>\n          window.opener.andback(); \/\/ wois.focus();<br \/>\n        }<br \/>\n        lastmsg=minussc(event.data);<br \/>\n      }<br \/>\n    };<br \/>\n    wois=window.opener;<br \/>\n  }<br \/>\n<br \/> <br \/>\n  function andback() {<br \/>\n    \/\/alert('Am back');<br \/>\n    window.focus();<br \/>\n  }<br \/>\n<br \/> <br \/>\n  function oureval(inv) {<br \/>\n    var tabi=document.getElementById('tab').value.split(String.fromCharCode(10));<br \/>\n    var tai=document.getElementById('ta').value.split(String.fromCharCode(10));<br \/>\n    return Math.max(eval(2 + eval('' + tabi.length)), eval(2 + eval('' + tai.length)));<br \/>\n  }<br \/>\n<br \/>\n  function newone(iv) {<br \/>\n   if (iv.value.trim() != '') {<br \/>\n    \/\/ Connection to a broadcast channel<br \/>\n    \/\/if (ourbc) {<br \/>\n    \/\/  ourbc.close();<br \/>\n    \/\/}<br \/>\n    \/\/const bc = new BroadcastChannel(iv.value);<br \/>\n    bc = new BroadcastChannel(iv.value);<br \/>\n    pbc=bc;<br \/>\n    ourbc=bc;<br \/>\n    document.getElementById('ita').setAttribute('readonly',true);<br \/>\n    document.getElementById('ta').setAttribute('readonly',true);<br \/>\n    document.getElementById('ta').style.display='none';<br \/>\n    ebc=iv.value;<br \/>\n    document.getElementById('itab').placeholder=ebc;<br \/>\n    document.getElementById('ita').placeholder=ebc;<br \/>\n    document.getElementById('itab').value='';<br \/>\n    document.getElementById('ita').value='';<br \/>\n    document.getElementById('itab').onblur=function(event) { event.target.value=ebc; }<br \/>\n    document.getElementById('ita').onblur=function(event) { event.target.value=ebc; }<br \/>\n    bc.onmessage = event =&gt; {<br \/>\n      if (minussc(event.data) != lastmsg) {<br \/>\n        \/\/document.getElementById('tab').value+=String.fromCharCode(10) + event.data.replace(lastmsg, '');<br \/>\n        document.getElementById('tab').value=String.fromCharCode(10) + event.data; \/\/.replace(lastmsg, '');<br \/>\n        document.getElementById('tab').title='' + new Date();<br \/>\n        document.getElementById('ta').rows='' + oureval(3 + eval('' + document.getElementById('ta').rows));<br \/>\n        document.getElementById('tab').rows='' + oureval(3 + eval('' + document.getElementById('tab').rows));<br \/>\n        if (bc) {<br \/>\n          \/\/bc.postMessage(document.getElementById('bname').innerHTML + ': ' + minussc(event.data)); \/\/.replace(lastmsg, ''));<br \/>\n          bc.postMessage(event.data); \/\/.replace(lastmsg, ''));<br \/>\n          wois.focus();<br \/>\n        }<br \/>\n        lastmsg=minussc(event.data);<br \/>\n      }<br \/>\n    };<br \/>\n    wois=window.open(document.URL.split('#')[0].split('?')[0] + '?bc=' + encodeURIComponent(iv.placeholder), '_blank');<br \/>\n   }<br \/>\n  }<br \/>\n<br \/> <br \/>\n  function onenew(iv) {<br \/>\n    yourbc = new BroadcastChannel(iv.value);<br \/>\n    yourbc.onmessage = event =&gt; {<br \/>\n      if (minussc(event.data) != lastmsg) {<br \/>\n        \/\/document.getElementById('tab').value+=String.fromCharCode(10) + event.data.replace(lastmsg, '');<br \/>\n        document.getElementById('tab').value=String.fromCharCode(10) + event.data; \/\/.replace(lastmsg, '');<br \/>\n        document.getElementById('tab').title='' + new Date();<br \/>\n        document.getElementById('ta').rows='' + oureval(3 + eval('' + document.getElementById('ta').rows));<br \/>\n        document.getElementById('tab').rows='' + oureval(3 + eval('' + document.getElementById('tab').rows));<br \/>\n        if (ourbc) {<br \/>\n          \/\/ourbc.postMessage(document.getElementById('bname').innerHTML + ': ' + minussc(event.data)); \/\/.replace(lastmsg, ''));<br \/>\n          ourbc.postMessage(event.data); \/\/.replace(lastmsg, ''));<br \/>\n          wois.focus();<br \/>\n        }<br \/>\n        lastmsg=minussc(event.data);<br \/>\n      }<br \/>\n    };<br \/>\n  }<br \/>\n<br \/> <br \/>\n  function minussc(insa) {<br \/>\n    if (insa.indexOf(': ') != -1) {<br \/>\n      return insa.replace(insa.split(': ')[0] + ': ','');<br \/>\n    }<br \/>\n    return insa;<br \/>\n  }<br \/>\n<br \/> <br \/>\n  function sthis(iv) {<br \/>\n    if (iv.value.trim() != '') {<br \/>\n    if (yourbc && !pbc) {<br \/>\n      yourbc.postMessage(document.getElementById('lname').innerHTML + ': ' + minussc(iv.value));<br \/>\n      document.getElementById('ta').rows='' + oureval(3 + eval('' + document.getElementById('ta').rows));<br \/>\n      document.getElementById('tab').rows='' + oureval(3 + eval('' + document.getElementById('tab').rows));<br \/>\n      iv.placeholder+=String.fromCharCode(10) + iv.value;<br \/>\n      iv.value='';<br \/>\n    } else if (bc) {<br \/>\n      \/\/alert('at broadcaster with msg=' + iv.value);<br \/>\n      \/\/bc=newone(document.getElementById('itab'));<br \/>\n      bc.postMessage(document.getElementById('bname').innerHTML + ': ' + minussc(iv.value));<br \/>\n      document.getElementById('ta').rows='' + oureval(3 + eval('' + document.getElementById('ta').rows));<br \/>\n      document.getElementById('tab').rows='' + oureval(3 + eval('' + document.getElementById('tab').rows));<br \/>\n      iv.placeholder+=String.fromCharCode(10) + iv.value;<br \/>\n      iv.value='';<br \/>\n    }<br \/>\n    }<br \/>\n  }<br \/>\n&lt;\/script&gt;<br \/>\n&lt;\/body&gt;<br \/>\n&lt;\/html&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; as a first draft &#8220;proof of concept&#8221; <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/broadcast_api_test.html_GETME\">broadcast_api_test.html<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/broadcast_api_test.html\">Broadcast API web application<\/a> you can try for yourself.<\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d56362' onclick='var dv=document.getElementById(\"d56362\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/broadcast\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d56362' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Broadcasting is a tried and trusted model of &#8230; information distribution entertainment distribution &#8230; and if you add in &#8220;listeners who can respond&#8221; (perhaps named and the broadcaster can re-respond) you can add &#8230; feedback collaboration sharing &#8230; into the &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/broadcast-api-primer-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,14,37],"tags":[88,1710,4027,4026,198,1604,1709,2442,576,652,2114,2227,997,1133,1262,1319],"class_list":["post-56362","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-api","tag-broadcast","tag-broadcast-channel-api","tag-broadcaster","tag-channel","tag-collaboration","tag-communication","tag-contenteditable","tag-html","tag-javascript","tag-listener","tag-postmessage","tag-programming","tag-share","tag-textarea","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/56362"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=56362"}],"version-history":[{"count":4,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/56362\/revisions"}],"predecessor-version":[{"id":56366,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/56362\/revisions\/56366"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=56362"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=56362"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=56362"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}