Once you’ve downloaded the last version of the Abetoo Javascript library you’re done to start.
We’re going to build a website which allow us to connect and receive messages.
Open a regular text editor and create a new file called helloworld.html, and copy the following lines,
<html>
<body>
<div><h2>Abetoo Library JavaScript Hello World</h2></div>
<div>Messages Received</div>
<div>
<textarea readonly id="messagesreceived" rows="13" cols="40" >
</textarea>
</div
</body>
<script type="text/javascript" src="abetoo.js"></script>
<script language="javascript" type="text/javascript">
// 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;
}
</script>
</html>
let’s go and check it out the source code more deeply,
The most important thing you have to do is to include the abetoo library with the following line, the file abetoo.js has to be on the same folder you are working on.
.... <script type="text/javascript" src="abetoo.js"></script> ....
Then we can define and launch the connection,
....
// Define a new Abetoo connection
var abetoo = Abetoo.getInstance();
abetoo.init("-7glliYjxdE-H6QudCmEL7g636307126198941784#"+
"8dd71c893d5502f2b5ae0e5175a8c588a0060474", callback);
....
… and establish a listener for the incoming messages,
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;
}
in this particular case, whenever a new message is received, it’s appended to the received messages box.
If you open the generated helloworld.html file with a web browser you’ll see something like that,
You can download the full source code of this example.
Leave A Comment?