Messaging at Edge

Pre-requisites:

  1. You have created a developer account with ClearBlade (https://platform.clearblade.com).
  2. You have logged in with the developer account and created a System on the ClearBlade platform.
  3. You have created User accounts on the ClearBlade platform.

Message at Edge

  1. Create a project directory/folder with name webapp.

  2. Go to the webapp folder and Create a index.html file.

  3. Open the index.html file in any text based editor of your choice and Copy & Paste the following code snippet.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Sample Publish App</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="ClearBlade.js"></script>
  <script type="text/javascript" src="mqttws31.js"></script>
</head>
<body onload="startup()">
    <div class="container text-center">
 <form class="form-horizontal" role="form" style="margin-top:20px;">
          <h3>Messaging Sample - Publish App</h3>
               <div class="form-group">
      <label class="control-label col-sm-2">Message to Publish:</label>
      <div class="col-sm-10">
        <input type="text" class="form-control" id="msgPub" placeholder="Enter Message to Publish">
      </div>
    </div>
      <div class="form-group">
      <div class="col-sm-offset-2 col-sm-10">
        <button type="button" class="btn btn-primary"  onclick="publishMsg (event)">Publish</button>
      </div>
    </div>
  </form>
</div>
</body>
</html>


4. Download and place https://raw.githubusercontent.com/ClearBlade/JavaScript-API/master/ClearBlade.js inside your project directory.


5. Download and place https://raw.githubusercontent.com/ClearBlade/JavaScript-API/master/mqttws31.js inside your project directory.

Usage

  1. Initialize ClearBlade.init() from the below JavaScript code snippet, pointing to your Edge correctly. (Edit the initOptions to appropriate values)

  2. You need to copy and paste the following Javascript snippet into section of the index.html file that you just created.

<script>
var cb = new ClearBlade();
var topic = "mytopic";

/*
Example
Var initOptions = {
  URI : ‘http://192.168.0.92’,
  messagingURI : ‘192.168.0.92’,
  messagingPort: 8904,
  useMQTT: true,
  cleanSession: true,
  systemKey: ‘f887dxxxxxxxxxxxxxxxxxxxxxxx01’,
  systemSecret: ‘F887DCxxxxxxxxxxxxxxxxxxxxxx01’,
  Email: ‘fan@cb.com’,
  password: ‘password’
}
*/

var initOptions = {
  URI : <IP_ADDRESS_OF_EDGE>,
  messagingURI : <IP_ADDRESS_OF_EDGE>,  
  messagingPort:<MESSAGE_PORT>,
  useMQTT: true,
  cleanSession: true,
  systemKey: <EDGE_SYSTEM_KEY>,
  systemSecret: <EDGE_SYSTEM_SECRET> ,
  email:<USER_EMAIL>,
  password:<USER_PASSWORD>
};

var startup= function(){
    var initCallback = function(err, data){
        if(err) {
         console.log("init failed")
        } else {
         connectToMessaging()
        }
};
initOptions.callback = initCallback;
cb.init(initOptions);
}
var connectToMessaging = function() {
    var connectCallback = function(data) {
        console.log("connected to messaging");
        //Write your code here   
    }

    //Set “useSSl”:true if your platform url starts with “https://” or else false
    messaging = cb.Messaging({"useSSL":false}, connectCallback);
    console.log("connecting to messaging");
};

var publishMsg = function(event){
    var msg = document.getElementById("msgPub").value;
    console.log("publishing to: "+topic+"  with message: "+msg);
    messaging.publish(topic, JSON.stringify(msg));        
}
</script>

It will publish a message to a topic called mytopic on your edge.
3. You can verify the messages getting published on your Edge by following below steps:

  1. Go to your System on the ClearBlade platform.

  2. Login to your Edge, by clicking on the Edge and enter the correct credentials.

  3. You will see an Edge platform similar to following.


4. Go to Messaging to tab by clicking on the Message button.


5. Click on the Subscribe button, this will subscribe you to mytopic on the Edge.
6. Open the index.html file, that you just created, in a web browser.
7. Input your message in the Message to Input: text box and click on the Publish button.


8. You will see a message getting published on your Edge under the topic mytopic.


9. You have successfully completed Messaging at Edge

Using the ClearBlade Message Relay

Information on how to use the ClearBlade Message Relay can be found here.