An overview of how ROSBridge and ROSLIBJS works/utilized for command control
sudo apt install ros-noetic-rosbridge-server<script src="https://static.robotwebtools.org/roslibjs/current/roslib.min.js"></script><script src="PATH-TO-DOWNLOADED-SCRIPT"></script>import React, { Component } from 'react';
import { Alert } from 'react-bootstrap';
class ROSConnect extends Component {
constructor() {
super()
this.state = { connected: false, ros: null }
}
// run the function as soon as the page renders
componentDidMount() {
this.init_connection()
}
// a function to connect to the robot using ROSLIBJS
init_connection() {
this.state.ros = new window.ROSLIB.Ros()
this.state.ros.on("connection", () => {
this.setState({connected: true})
})
this.state.ros.on("close", () => {
this.setState({connected: false})
// try to reconnect to rosbridge every 3 seconds
setTimeout(() => {
try{
// ip address of the rosbridge server and port
this.state.ros.connect('ws://127.0.0.1:9090')
}catch (error) {
console.log("connection error:", error);
}
// if the robot disconnects try to reconnect every 3 seconds (1000 ms = 1 second)
}, 3000);
})
try{
// connect to rosbridge using websocket
this.state.ros.connect('ws://127.0.0.1:9090')
}catch (error) {
console.log("connection error:", error);
}
}
render() {
return (
// a Alert component from react-bootstrap showing if the robot is connected or not
<div>
<Alert className='text-center m-3' variant={this.state.connected ? "success" : "danger"}>
{this.state.connected ? "Robot Connected" : "Robot Disconnected"}
</Alert>
</div>
);
}
}
export default ROSConnect;