{"id":17664,"date":"2015-10-10T05:01:36","date_gmt":"2015-10-09T19:01:36","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=17664"},"modified":"2015-10-10T14:20:49","modified_gmt":"2015-10-10T04:20:49","slug":"htmljavascriptphp-broadcast-and-listen-messaging-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascriptphp-broadcast-and-listen-messaging-tutorial\/","title":{"rendered":"HTML\/Javascript\/PHP Broadcast and Listen Messaging Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/broadcast_listen.html\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"HTML\/Javascript\/PHP Broadcast and Listen Messaging Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/broadcast_listen_more.gif\" title=\"HTML\/Javascript\/PHP Broadcast and Listen Messaging Tutorial\"   \/><\/a><p class=\"wp-caption-text\">HTML\/Javascript\/PHP Broadcast and Listen Messaging Tutorial<\/p><\/div>\n<p>Yesterday, with <a target=_blank title='HTML\/Javascript\/PHP Broadcast and Listen Mailbox Tutorial' href='#hjpbalmt'>HTML\/Javascript\/PHP Broadcast and Listen Mailbox Tutorial<\/a> as shown below, we gave a mailbox functionality to our ongoing Broadcaster and Listener project to allow for the third of the functionalities below &#8230;<\/p>\n<ol>\n<li>broadcasting of messages<\/li>\n<li>listening to messages<\/li>\n<li>regarding that message, replying to the broadcaster in reply<\/li>\n<\/ol>\n<p> &#8230; and you may remember its <i>&#8220;that&#8217;s for tomorrow&#8221;<\/i> pledge for an &#8230;<\/p>\n<blockquote>\n<p>automated messaging arrangement for messages to be sent between individual user &#8220;Broadcast and Listen&#8221; mailboxes<\/p>\n<\/blockquote>\n<p> &#8230; so here we are, today, further along with the project with the recent <a target=_blank title='Email information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Email'>email<\/a> feeling parts being augmented a bit with a bit more of a <a target=_blank title='Chat information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Online_chat'>chat<\/a> feel to this web application.<\/p>\n<p>Again, the code consists of &#8230;<\/p>\n<ul>\n<li>HTML\/Javascript supervisor called <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/broadcast_listen.html--GETME' title='broadcast_listen.html'>broadcast_listen.html<\/a> (changed from yesterday as per <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/broadcast_listen.html-GETME' title='broadcast_listen.html'>broadcast_listen.html<\/a>)<\/li>\n<li>PHP <a target=_blank title='HTML iframe element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_iframe.asp'>iframe<\/a> child called <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/broadcast_listen.php--GETME' title='broadcast_listen.php'>broadcast_listen.php<\/a>  (changed from yesterday as per <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/broadcast_listen.php-GETME' title='broadcast_listen.php'>broadcast_listen.php<\/a>) (aka our recent <a target=_blank title='\"Client Pre-emptive Iframe\" at this blog' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/?s=client-pre-emptive-iframe'>&#8220;Client Pre-emptive Iframe&#8221;<\/a> concept)<\/li>\n<li>A &#8220;proof of concept&#8221; temporary PHP <a target=_blank title='Javascript window.open() popup window method information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/met_win_open.asp'>window.open()<\/a> child called <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/test_broadcast_listen.php_GETME' title='test_broadcast_listen.php'>test_broadcast_listen.php<\/a> is still there, but not necessary now<\/li>\n<li>HTML everchanging broadcast data iframe child called <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/broadcast_list.html' title='broadcast_list.html'>broadcast_list.html<\/a> (nuts and bolts of which can be gleaned via Web Browser&#8217;s View-&gt;Page Source)<\/li>\n<\/ul>\n<p>We hope you try a <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/broadcast_listen.html' title='broadcast_listen.html'>live run<\/a> &#8230; we need some brave broadcasters.   We&#8217;d appreciate any feedback.<\/p>\n<hr>\n<p id='hjpbalmt'>Previous relevant <a target=_blank title='HTML\/Javascript\/PHP Broadcast and Listen Mailbox Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascriptphp-roadcast-and-listen-mailbox-tutorial\/'>HTML\/Javascript\/PHP Broadcast and Listen Mailbox Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/broadcast_listen.html\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"HTML\/Javascript\/PHP Broadcast and Listen Mailbox Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/broadcast_listen_more.jpg\" title=\"HTML\/Javascript\/PHP Broadcast and Listen Mailbox Tutorial\"   \/><\/a><p class=\"wp-caption-text\">HTML\/Javascript\/PHP Broadcast and Listen Mailbox Tutorial<\/p><\/div>\n<p>Yesterday, with <a target=_blank title='HTML\/Javascript Broadcast and Listen Primer Tutorial' href='#hjblpt'>HTML\/Javascript Broadcast and Listen Primer Tutorial<\/a> as shown below, we started our Broadcaster and Listener &#8230;<\/p>\n<blockquote>\n<p> &#8230; and we use the HTML canvas element as a &#8220;videogame captioner&#8221; (somehow we think of the word &#8220;teletext&#8221;<sub>er<\/sub>) type of letter by letter presenter of the wording.<\/p>\n<\/blockquote>\n<p> &#8230; and saw it as a bit like &#8230;<\/p>\n<ul>\n<li><a target=_blank title='Email information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Email'>email<\/a> &#8230; and a bit like &#8230;<\/li>\n<li><a target=_blank title='Chat information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Online_chat'>chat<\/a><\/li>\n<\/ul>\n<p> &#8230; and today&#8217;s progress (which is also talked about in WordPress 4.1.1 with <a target=_blank title='HTML\/Javascript\/PHP Broadcast and Listen Mailbox Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascriptphp-broadcast-and-listen-mailbox-tutorial\/'>HTML\/Javascript\/PHP Broadcast and Listen Mailbox Tutorial<\/a>) hones in a lot on some <i>email<\/i> concepts by giving the HTML\/Javascript supervisor web application the means to &#8220;mailboxes&#8221; you could call &#8220;inbox&#8221; and &#8220;outbox&#8221; in the form of a &#8220;Client Pre-emptive Iframe&#8221; organised by the child PHP program to create, read and write to these mailboxes.  Today&#8217;s tutorial <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/broadcast_listen_more.jpg\">picture<\/a> shows a Firefox Firebug view of the HTML &#8220;describing&#8221; these HTML iframe mailboxes.<\/p>\n<p>In order to do this we are working to get the kernel of the idea correct first, and to unit test that kernel of an idea, in readiness for what is missing &#8230; an automated messaging arrangement for messages to be sent between individual user &#8220;Broadcast and Listen&#8221; mailboxes.  That&#8217;s for tomorrow.<\/p>\n<p>The code consists of &#8230;<\/p>\n<ul>\n<li>HTML\/Javascript supervisor called <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/broadcast_listen.html-GETME' title='broadcast_listen.html'>broadcast_listen.html<\/a> (changed from yesterday as per <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/broadcast_listen.html-GETME' title='broadcast_listen.html'>broadcast_listen.html<\/a>)<\/li>\n<li>PHP <a target=_blank title='HTML iframe element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_iframe.asp'>iframe<\/a> child called <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/broadcast_listen.php-GETME' title='broadcast_listen.php'>broadcast_listen.php<\/a>  (changed from yesterday as per <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/broadcast_listen.php-GETME' title='broadcast_listen.php'>broadcast_listen.php<\/a>) (aka our recent <a target=_blank title='\"Client Pre-emptive Iframe\" at this blog' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/?s=client-pre-emptive-iframe'>&#8220;Client Pre-emptive Iframe&#8221;<\/a> concept)<\/li>\n<li>A &#8220;proof of concept&#8221; temporary PHP <a target=_blank title='Javascript window.open() popup window method information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/met_win_open.asp'>window.open()<\/a> child called <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/test_broadcast_listen.php_GETME' title='test_broadcast_listen.php'>test_broadcast_listen.php<\/a><\/li>\n<li>HTML everchanging broadcast data iframe child called <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/broadcast_list.html' title='broadcast_list.html'>broadcast_list.html<\/a> (nuts and bolts of which can be gleaned via Web Browser&#8217;s View-&gt;Page Source)<\/li>\n<\/ul>\n<p>Hope you try a <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/broadcast_listen.html' title='broadcast_listen.html'>live run<\/a>.<\/p>\n<hr>\n<p id='hjblpt'>Previous relevant <a target=_blank title='HTML\/Javascript Broadcast and Listen Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-broadcast-and-listen-primer-tutorial\/'>HTML\/Javascript Broadcast and Listen Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/broadcast_listen.html\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"HTML\/Javascript Broadcast and Listen Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/broadcast_listen.jpg\" title=\"HTML\/Javascript Broadcast and Listen Primer Tutorial\" id='balo' onmouseover=\" this.src=this.src.replace('.jpg','.xgif').replace('.gif','.xjpg').replace('.x','.'); \"  \/><\/a><p class=\"wp-caption-text\">HTML\/Javascript Broadcast and Listen Primer Tutorial<\/p><\/div>\n<p>The Canvas HTML element tag can be used as the container to draw graphics on the fly usually via the use of Javascript functions for rendering and event management.<\/p>\n<p>In today&#8217;s tutorial we mainly use the <a target=_blank href='http:\/\/www.w3schools.com\/tags\/canvas_stroketext.asp' title='HTML5 Canvas strokeText() method information from w3schools ... thanks'>strokeText<\/a> function to create a webpage where you can either be a &#8230;<\/p>\n<ul>\n<li>Broadcaster (of wording content) &#8230; or &#8230;<\/li>\n<li>Listener (to wording content)<\/li>\n<\/ul>\n<p> &#8230; and we use the HTML canvas element as a &#8220;videogame captioner&#8221; (somehow we think of the word &#8220;teletext&#8221;<sub>er<\/sub>) type of letter by letter presenter of the wording.<\/p>\n<p>Today&#8217;s tutorial also features some Javascript form validation using the HTML form element&#8217;s <a target=_blank title='Javascript onsubmit event information frpm w3schools' href='http:\/\/www.w3schools.com\/tags\/ev_onsubmit.asp'><i>onsubmit<\/i><\/a> event logic to say, with client-side Javascript (even though the HTML form&#8217;s <a target=_blank title='HTML form element method property information from w3schools' href='http:\/\/www.w3schools.com\/tags\/att_form_method.asp'>method<\/a> is POST), whether a broadcaster&#8217;s &#8220;words&#8221; fit the bill.<\/p>\n<p>This web application is in &#8220;hugely&#8221; (just &#8220;massively&#8221;) early days, and so we know there is so much to do.  Is it?<\/p>\n<ul>\n<li><a target=_blank title='Email information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Email'>email<\/a><\/li>\n<li><a target=_blank title='Chat information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Online_chat'>chat<\/a><\/li>\n<\/ul>\n<p>We&#8217;re not exactly sure, but we&#8217;re working on it.  Email and chat require user registration.  We only have the Broadcaster optionally registering up to now.  Email can have attachments.  We have no such facility here yet.  Chat is all about the here and now, as you may get a handle on by visiting our RJM Programming hosted phpChat website at <a target=_blank title='RJM Programming chat website via phpChat' href='http:\/\/www.rjmprogramming.com.au\/plus'>RJM Programming phpChat website<\/a>, while today&#8217;s web application is more about the past, the way things sit just now.  Chat is a multi-user interactive communicator using <a target=_blank title='Network socket information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Network_socket'>sockets<\/a> to facilitate inter-process communications, and we were not going to those lengths today &#8230; but do have ideas here for a product called &#8220;Broadcast Listener&#8221; or perhaps RRPC (Really Really Patient Chat).  We&#8217;ll see.<\/p>\n<p>The code consists of &#8230;<\/p>\n<ul>\n<li>HTML\/Javascript supervisor called <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/broadcast_listen.html_GETME' title='broadcast_listen.html'>broadcast_listen.html<\/a><\/li>\n<li>PHP <a target=_blank title='HTML iframe element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_iframe.asp'>iframe<\/a> child called <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/broadcast_listen.php_GETME' title='broadcast_listen.php'>broadcast_listen.php<\/a> (aka our recent <a target=_blank title='\"Client Pre-emptive Iframe\" at this blog' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/?s=client-pre-emptive-iframe'>&#8220;Client Pre-emptive Iframe&#8221;<\/a> concept)<\/li>\n<li>HTML everchanging broadcast data iframe child called <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/broadcast_list.html' title='broadcast_list.html'>broadcast_list.html<\/a> (nuts and bolts of which can be gleaned via Web Browser&#8217;s View-&gt;Page Source)<\/li>\n<\/ul>\n<p>Within that <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/broadcast_listen.html_GETME' title='broadcast_listen.html'>broadcast_listen.html<\/a> code you&#8217;ll see an innocuous line of code &#8230;<\/p>\n<p><code><br \/>\n      nextx+=8;<br \/>\n<\/code><\/p>\n<p> &#8230; that is moving the X co-ordinate along in the &#8220;teletext&#8221;<sub>er<\/sub> (ie. to the next letter).  To make a &#8220;videogame captioner&#8221; act like one you need to not slap the whole text onto the HTML canvas all at once, but instead, do it one letter at a time, and delay the process a bit between letters.  So we will have trouble making this look good for fonts that are not <a target=_blank title='Monospaced font information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Monospaced_font'>monospaced<\/a> (or fixed width) like <a target=_blank title='Courier New font information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Courier_%28typeface%29#Courier_New'>Courier New<\/a> (which we use today in 14px form).<\/p>\n<p>You may want to read more at <a target=_blank title='HTML Canvas Reference' href='http:\/\/www.w3schools.com\/tags\/ref_canvas.asp'>HTML Canvas Reference<\/a> as a generic reference, or here, at the tutorial <a target=_blank title='javascript - How do I add a simple onClick event handler to a canvas element? - Stack Overflow' href='http:\/\/stackoverflow.com\/questions\/9880279\/how-do-i-add-a-simple-onclick-event-handler-to-a-canvas-element'>javascript &#8211; How do I add a simple onClick event handler to a canvas element? &#8211; Stack Overflow<\/a>.<\/p>\n<p>As you can imagine, this HTML canvas element, new to HTML5, can be very useful for some practical client-side web functionality.<\/p>\n<p>We hope you enjoy this communication tutorial <a target=_blank title='Canvas HTML element live run tutorial'  href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/broadcast_listen.html\">live run<\/a>.<\/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='#d17614' onclick='var dv=document.getElementById(\"d17614\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/?tag=email\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d17614' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\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='#d17639' onclick='var dv=document.getElementById(\"d17639\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/?tag=mailbox\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d17639' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\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='#d17664' onclick='var dv=document.getElementById(\"d17664\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/?tag=messaging\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d17664' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Yesterday, with HTML\/Javascript\/PHP Broadcast and Listen Mailbox Tutorial as shown below, we gave a mailbox functionality to our ongoing Broadcaster and Listener project to allow for the third of the functionalities below &#8230; broadcasting of messages listening to messages regarding &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascriptphp-broadcast-and-listen-messaging-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":[1710,184,200,1709,380,438,453,576,587,652,1711,1713,775,1712,932,997,1319,1433],"class_list":["post-17664","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-broadcast","tag-canvas","tag-chat","tag-communication","tag-email","tag-firebug","tag-form-validation","tag-html","tag-iframe","tag-javascript","tag-listen","tag-mailbox","tag-messaging","tag-onsubmit","tag-php","tag-programming","tag-tutorial","tag-window-open"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/17664"}],"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=17664"}],"version-history":[{"count":2,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/17664\/revisions"}],"predecessor-version":[{"id":17666,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/17664\/revisions\/17666"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=17664"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=17664"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=17664"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}