How to use

Make a js program which will act as a Node inside your React App. there you will need to set a name for the node and pass a ros object from the Roslib library.

Subscribers: Publishers: Services: Best Practices:

Tutorial

npx create-react-app ros-test

$npm install --save roslib

$npm install --save react-roomiebot-ros

$npm install --save react-router-dom

$npm install --save history

$npm start

Go to index.js and write this code:

import React from 'react';

import ReactDOM from 'react-dom';

import { Router, Switch, Route } from "react-router-dom";

import './index.css';

import history from './history';

import {vars, mode} from './vars';

import App from './App';

import reportWebVitals from './reportWebVitals';

import Home from './components/Home/Home';

//// ROS

let ROSLIB = require('roslib');

let rosStatus=0;

let ROS_URL = vars[mode].rosUrl;

//Se realiza la conexion a ROS

let ros = new ROSLIB.Ros({

url : ROS_URL

});

  

//Cuando se conecte a ROS

ros.on('connection', function() {

//console.log('Connected to websocket server.');

rosStatus=1;

});

//Cuando exista un error

ros.on('error', function(error) {

//console.log('Error connecting to websocket server: ', error);

reconnectRos ();

});

//Cuando se cierre la conexion

ros.on('close', function() {

//console.log('Connection to websocket server closed.');

reconnectRos ();

});

function reconnectRos () {
if(rosStatus === 0){
//console.log("Connecting to ros");
rosStatus=2;
}

if(rosStatus === 1){
rosStatus=2;
//console.log("Reconnecting to ros");
}

if(rosStatus === 2){
rosStatus=3;
setTimeout(()=>{
rosStatus=1;
//console.log("Reconnecting ...");
ros.close();
ros.connect(ROS_URL);
},3000);
}
};

ReactDOM.render(
<Router  history={history}>
<Switch>
<Route  exact  path="/"  component={()=><Home  ros={ros}></Home>}/>
</Switch>
{/* <App /> */}
</Router>,

document.getElementById('root')
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();`

Create a new file called history.jsx and set this code:

import { createBrowserHistory as history} from 'history';

export default history();

Create another file called vars.jsx and add this code:

export const mode = 'dev'
export const vars = {
prod: {
rosUrl: "ws://172.17.0.1:8081",
},
dev: {
rosUrl: "ws://172.17.0.1:8081"
},
}

Create a new folder in src named components, inside it another one called Home. Then create three files: Home.jsx, Home-context.jsx, and HomeNode.jsx

Home-context.js

import React from "react";

export const status =

{

//// ROSLIB OBJECT ////

rbotRos: null,

//// TOPICS MESSAGES ////

///FRONT VARIABLES/////

attributes: {

a: 0.0,

b: 0.0,

sum: 0.0,

text: ""

},

setState: () => {}

}

export const HomeContext = React.createContext(status);

HomeNode.jsx

import React, { Component } from "react";

import {status, HomeContext} from './Home-context';

let RoomiebotRos = require('react-roomiebot-ros');

  

class HomeNode extends Component {

constructor(props){

super(props)

this.state = status;

}

  

yyy_callback = (message) => {

console.log("callback from yyy in home:", message);

status.attributes.text = message.data;

}

onSystemInit_callback = () =>{

console.log("Conectado a ROS");

}

loopForever_callback = () => {

//console.log("LOOP");

}

componentDidMount = () => {

document.title = 'Home'

console.log("Builded on 2020-11-26");

//const myClass = new RoomiebotRosDos('rosHome',this.props.ros);

this.state.rbotRos = new RoomiebotRos('rosHome',this.props.ros);

this.state.rbotRos.setOnSystemInit(this.onSystemInit_callback);

this.state.rbotRos.setLoopForever(this.loopForever_callback);

this.state.rbotRos.startRun();

console.log("new build");

console.log(this.state.rbotRos);

////////////////////////////////////////////////////////////////

//////// SUBSCRIBERS ////////

////////////////////////////////////////////////////////////////

this.state.rbotRos.newSubscriber('/yyy', 'std_msgs/String', this.yyy_callback);

////////////////////////////////////////////////////////////////

//////// PUBLISHERS ////////

////////////////////////////////////////////////////////////////

this.state.rbotRos.newPublisher('/zzz', 'std_msgs/String');

////////////////////////////////////////////////////////////////

//////// SERVICES ////////

////////////////////////////////////////////////////////////////

  

this._ismounted = true;

  

}

componentWillUnmount = () => {

this._ismounted = false;

this.state.rbotRos.stopRun();

}

render(){

return(

<React.Fragment>

{this.props.children}

</React.Fragment>

)

};

}

HomeNode.contextType = HomeContext;

export default HomeNode;

Home.jsx

import React, { Component } from "react";

import logo from '../../logo.svg';

import '../../App.css';

import {status, HomeContext} from './Home-context'

import HomeNode from './HomeNode'

  

class Home extends Component {

constructor(props){

super(props)

this.state = status;

}

componentDidMount(){

console.log(`homeNew state`);

console.log(this.state);

this.intervalId = setInterval(this.fetchData, 5000);

}

  

fetchData = () =>{

let texting = status.attributes.text;

console.log('texting: ',texting)

this.setState(status)

}

  

componentWillUnmount = () => {

this._ismounted = false;

this.state.rbotRos.stopRun();

}

  

handleClick() {

this.state.rbotRos.tryPublish('/zzz',{data:"saludos"});

}

render() {

return (

<HomeContext.Provider value = {this.state}>

<HomeNode ros={this.props.ros} >

<div>

<header className="App-header">

<img src={logo} className="App-logo" alt="logo" />

<p>

Edit <code>src/App.js</code> and save to reload.

</p>

{this.state.attributes.text}

<button onClick={() => this.handleClick()}>

Click me

</button>

</header>

</div>

</HomeNode>

</HomeContext.Provider>

)

}

}
export default Home;

Testing code:

Now that you are ready to test your front end react app with ROS; lets start rosbidge server and test th topics publishing and subscribing:

$roslaunch rosbridge_server rosbridge_websocket.launch 

Try to send something to yoour front with this command:

$rostopic pub -1 /yyy std_msgs/String "data: 'roomiebotRos'"

Now Use the click Button in the app to send something over /zzz topic, you can listen to it with:

$rostopic echo /zzz

Using services:

Next step is to use the services with the React App. Lets add this code in the render method in Home.js:

....
 <form onSubmit={this.handleSubmit}>        
    <label>
      A:
    <input type="text" name ="a" onChange={this.handleChangeA} /> 
    </label>
    <label>
      B:
    <input type="text" name ="b" onChange={this.handleChangeB} /> 
    </label>
    <input type="submit" value="Submit" />
  </form>
  Suma: 
  {this.state.attributes.sum}
...

Here we added three functions to handle the events, handleChangeA and handleChangeB, there, we will send the value from the textbox to the context attributes a and b:

handleChangeA = (event) =>{
  let form = event.target.value;
  this.state.attributes.a= parseInt(form)
  console.log('handleChange: ',form)
  this.setState(status)
}
handleChangeB = (event) =>{
let form = event.target.value;
this.state.attributes.b= parseInt(form)
console.log('handleChange: ',form)
this.setState(status)
}

Now, the third function added, was the handleOnsubmit function, in which we are going to call the classic AddtwoInts service from the ros tutorials:

...
handleSubmit = (event) =>{
  alert('A name was submitted: ' + this.state.attributes.a+ '+'+ this.state.attributes.b);
  let request = new ROSLIB.ServiceRequest({
    a : this.state.attributes.a,
    b : this.state.attributes.b
  });
  this.state.rbotRos.tryCallService('/add_two_ints',request,
  (response)=>{
    console.log('response', response.sum);
    this.state.attributes.sum= response.sum 
    }
    );
  event.preventDefault();
  this.setState(status)
}
...

And in the HomeNode.jsx script lets add the NewService declaration of the service:

	...
    ////////        SERVICES                              ////////
    ////////////////////////////////////////////////////////////////
    this.state.rbotRos.newService('/add_two_ints', 'rospy_tutorials/AddTwoInts');
	...

So now you have two textboxes where you must write integer values and when you Click on the Submit button it will call the rosservice, assign the response to the status.attributes.sum var in the home-context and render this value just below the textboxes.

Oh, I forgot, you havent launch the AddTwoInts Server in ROS, just type this:

$rosrun rospy_tutorials add_two_ints_server