To Infinity and Beyond

Once you’ve understood the basics, you’re ready to communicate the web app with the world.

We’re going to build a web app that allows us to send and receive messages to/from any other connected devices, even another web app. This web app will also allow us to test the connectivity against remote devices.

If you don’t change the Remote Channel id, every message sent will appear at the abetoo website.

Open a regular text editor and create a new file called messagetesttool.html and copy the following code,

<html>
<body>
 <div><h2>Abetoo Library JavaScript Test Tool</h2></div>
 <table>
 <tr>
 <td>
 <div>Remote Channel Id</div>
 <div><textarea id="remotechannel" rows="5" cols="40" ></textarea>
 <div>Message Content</div>
 <div>
 <textarea id="messagecontent" placeholder="write a new message..." 
 rows="5" cols="40" ></textarea></div>
 <div><button type="button" onclick="sendMessage();"/>Send</div>
 </td>
 <td>
 <div>Messages Received</div>
 <div><textarea readonly id="messagesreceived" rows="13" cols="40" >
 </textarea>
 </td>
 </tr>
 </table>
</body>

<script type="text/javascript" src="abetoo.js"></script>
<script language="javascript" type="text/javascript">

 // Default remote channel
 var remoteChannelId = "-7glliYjxdE-H6QudCmEL7g636307126198941784#" +
 "8dd71c893d5502f2b5ae0e5175a8c588a0060474";
 var textarea = document.getElementById('remotechannel');
 textarea.value = remoteChannelId;
 
 // Define a new Abetoo connection
 var abetoo = Abetoo.getInstance();
 abetoo.init("-7glliYjxdE-H6QudCmEL7g636307126198941784#"+ 
 "8dd71c893d5502f2b5ae0e5175a8c588a0060474", callback);
 function callback(newmessage)
 {
  // Once a new message is received, append it to the messages received box
  var textelement = document.getElementById('messagesreceived');
  textelement.value += newmessage + "\n";
  textelement.scrollTop = textelement.scrollHeight;
 }

 // This function is called whenever the send button is clicked
 function sendMessage()
 {
  var remotechannel = document.getElementById('remotechannel').value;
  var messagecontent = document.getElementById('messagecontent').value;
  var correlationid = "-";
  abetoo.sendMessage(remotechannel, messagecontent, correlationid);
 } 
 </script>
</html>

There’s a few changes over the hello world sample code.

We’ve introduced a new function to send messages, whenever the send button is clicked a new message is sent to the remote channel introduced and with the content defined in the textarea with the id messagecontent.

....
 // This function is called whenever the send button is clicked
 function sendMessage()
 {
  var remotechannel = document.getElementById('remotechannel').value;
  var messagecontent = document.getElementById('messagecontent').value;
  var correlationid = "-";
  abetoo.sendMessage(remotechannel, messagecontent, correlationid);
 } 
....

If you want to change the default local Channel id, please modify the abetoo.init function call with your unique channel id.

If you launch the code above with a regular web browser, you’ll see something like that,

This app is very useful not only to communicate with another web app but to be able to test quickly ours desktop/mobile app. You can use it as a remote console test.

You can download the full source code of this example with the following link.

Was this article helpful?

Yes No

Related Articles

3 Comments

  1. PP

    here i am, can you help me, i can’t zip my code now

    Insert title here

    //Default remote channel

    var remoteChannelId = “-7glliYjxdE-H6QudCmEL7g636307126198941784#8dd71c893d5502f2b5ae0e5175a8c588a0060474”;

    //Define a new Abetoo connection
    var abetoo = Abetoo.getInstance();
    abetoo.init(“-reOSRJ0ez02b7pOwHnSwuQ636307126198881907#6590affe9f73f5704b5444e8a92e68db6ca00e01”, callback);
    function callback(msg)
    {
    }

    function sendMessage()
    {
    abetoo.sendMessage(remoteChannelId, “on”, “-“);
    }

    2. abetoo

      Hi.

      I’ve uploaded a fixed version of the code you posted.

      Please be careful, you have to unzip the content to any folder, there are two files a html file and a js file, unzip both to a folder. Then you can open the html file with any regular web browser.

      Pay attention to the channel Id, if you introduce an invalid channel id, it won’t work.

      Here is the code.

      http://abetoo.com/wiki/wp-content/uploads/2017/07/sample.zip

      Thank you.

Leave A Comment?