Please ask about problems and questions regarding this tutorial on answers.ros.org. Don't forget to include in your question the link to this page, the versions of your OS & ROS, and also add appropriate tags.

Writing a publisher and subscriber in rosjs

Description: Describes how to use the js tools within the remote_lab package to write a publisher and subscriber in rosjs

Tutorial Level: BEGINNER

Contents

The Code
The Code, Expained

The following tutorial shows how to create a publisher and subscriber in rosjs.

The Code

<!DOCTYPE html>
<html>
<head>
<title>rosjs Publisher Subscriber Tutorial</title>
<!-- REQUIRED scripts -->
<script type="text/javascript" src="js/jquery/jquery-latest.js"></script>
<script type="text/javascript" src="js/ros/ros.js"></script>
<script type="text/javascript" src="js/ros/common.js"></script>
<script>
function log(msg) {$('#log').append(msg.toString() + '<br>');  }
function start()
{
  log("Connecting to rosbridge.");
  var node = new ros.NodeHandle("ws://localhost:9090");
  node.setOnClose(function(e) {
    log("Disconnected or Can't Connect.");
  });
  node.setOnError(function(e) {
    log("Unknown error!");
  });
  node.setOnOpen(function(e) {
    log("Connection to rosbridge established.");

   //publish the time every 1000 miliseconds

   setInterval(function(){
           var currentTime=new Date();
           var hours=currentTime.getHours();
           var minutes=currentTime.getMinutes();
           var seconds=currentTime.getSeconds();
           var timeMessage="It is now "+ hours+ ":" + minutes + ":"+ seconds ;
           node.publish('/talker', 'std_msgs/String', ros.json({data: timeMessage}));

   }, 1000);
   node.subscribe('/talker', 'std_msgs/String', function(msg){  log(msg.data) });
  });
}
</script>
</head>
<body onload="start()" style="margin:0;padding:0;background-color:white;overflow:hidden">
<div style="font-family: fixed-width; font-size: small;" id="log"></div>
</body>
</html>

The Code, Expained

Now we break the code down further:

<!DOCTYPE html>
<html>
<head>
<title>rosjs Publisher Subscriber Tutorial</title>
<!-- REQUIRED scripts -->
<script type="text/javascript" src="js/jquery/jquery-latest.js"></script>
<script type="text/javascript" src="js/ros/ros.js"></script>
<script type="text/javascript" src="js/ros/common.js"></script>
<script>

The beginning of the website which includes the title that shows up at the top of the browser. Also it shows the included javascript pages. The first includes jquery, necessary for sending messages. ros.js and common.js are javascript files that define the functionality required for the web browser to communicate with ROS.

function log(msg) {$('#log').append(msg.toString() + '<br>');  }

This defines a log function that takes in a message, msg, and will append it to the text in the "log" <div>.

log("Connecting to rosbridge.");
  var node = new ros.NodeHandle("ws://localhost:9090");
  node.setOnClose(function(e) {
    log("Disconnected or Can't Connect.");
  });
  node.setOnError(function(e) {
    log("Unknown error!");
  });
  node.setOnOpen(function(e) {
    log("Connection to rosbridge established.");

This code initializes the websocket connection with rosbridge.

setInterval(function(){
           var currentTime=new Date();
           var hours=currentTime.getHours();
           var minutes=currentTime.getMinutes();
           var seconds=currentTime.getSeconds();
           var timeMessage="It is now "+ hours+ ":" + minutes + ":"+ seconds ;
           node.publish('/talker', 'std_msgs/String', ros.json({data: timeMessage}));

   }, 1000);

This code gets the current time and date publishes it as a "std_msgs/String" message on the "/talker" topic every 1000 milliseconds.

node.subscribe('/talker', 'std_msgs/String', function(msg){  log(msg.data) });

This code subscribes to the "/talker" topic which is of type "std_msgs/String", defines a callback that will call the log function when a message is received.