react-ros
Edit page
Examples
Echo TopicGetting StartedConnect to ROSToggleConnect in useSubscribe to a topic
Readme

Getting Started

Throughout these examples we will assume you've already gone through the process of installing ROS or ROS2 and have a ROS websocket server running and available to connect with.

The first step in connecting ROS with a website will always be establishing a connection. With react-ros, we make this easy by providing a very simple and easy-to-use context provider called useROS to get you started.

Connect to ROS

Here is an example of how you can use the useROS component and connect your website to your robot! In this example we provide a ToggleConnect component that uses the useROS context provider to quickly and easily integrate ROS into any button or status indicator you could want to use.

import React from 'react'
import { useROS } from '../ROS'
function ToggleConnect() {
  const { isConnected, topics, url, changeUrl, toggleConnection } = useROS();
  return (
    <div>
      <p>
        <b>Simple connect:  </b><button onClick={ toggleConnection }>Toggle Connect</button>  <br />
        <b>ROS url input:  </b><input name="urlInput" defaultValue={ url } onChange={event => changeUrl(event.target.value)} />  <br />
        <b>ROS url to connect to:  </b> {url}  <br />
        <b>Status of ROS:</b> { isConnected ? "connected" : "not connected" }   <br />
        <b>Topics detected:</b><br />
        { topics.map((topic, i) => <li key={i}>    {topic.path}</li> )}
      </p>
    </div>
  );
}
export default ToggleConnect;

ToggleConnect in use

To use the simple ToggleConnect component we made above, wrap it in the provided ROS context provider component from react-ros and everything should just work. Go ahead and try it live below on your robot!

Here is a simple echo example that prints out messages on a specific topic to the console:

// EchoTopic.js
import React, { useState, useEffect } from 'react'
import { useROS } from 'react-ros'
var listener = null;
function EchoTopic() {
  const { createListener, topics } = useROS();
  const [ topic, setTopic ] = useState('/');
  const [ queue, setQueue ] = useState(0);
  const [ compression, setCompression ] = useState('none');
  useEffect(() => {
    handleTopic(topic);
  });
  const unsubscribe = () => {
    if (listener) {
      console.log("Unsubscribing");
      listener.unsubscribe();
    }
  }
  const handleTopic = (topicInput) => {
    if (topic !== topicInput) {
      setTopic(topicInput);
      unsubscribe();
      return;
    }
    unsubscribe();
    listener = null;
    for (var i in topics) {
      if (topics[i].path == topicInput) {
        listener = createListener( topics[i].path,
                                   topics[i].msgType,
                                   Number(queue),
                                   compression);
        break;
      }
    }
    if (listener) {
      console.log("Subscribing to messages...");
      listener.subscribe(handleMsg);
    } else {
      console.log("Topic '" + topic + "' not found...make sure to input the full topic path - including the leading '/'");
    }
  }
  const handleQueue = (queueInput) => {
    setQueue(queueInput);
  }
  const handleCompression = (compInput) => {
    setCompression(compInput);
  }
  const handleMsg = (msg) => {
    console.log(msg);
  }
  return (
    <div>
      <b>Message Queue Length:  </b><input name="queueInput" defaultValue={ queue } onChange={event => handleQueue(event.target.value)} />  <br />
      <b>Compression:  </b><input name="compInput" defaultValue={ compression } onChange={event => handleCompression(event.target.value)} />  <br />
      <b>Topic to echo:  </b><input name="topicInput" defaultValue={ topic } onChange={event => handleTopic(event.target.value)} />  <br />
    </div>
  );
}
export default EchoTopic;

And then we use this EchoTopic component within the ROS context provider like below.

Note: not shown in the code below is import { ROS } from 'react-ros' and import EchoTopic from './EchoTopic' at the top of the file. This is needed in order to use the ROS context provider component and the EchoTopic component.

Simple connect:
ROS url input:
ROS url to connect to: ws://localhost:9090
Status of ROS: not connected
Topics detected:

Message Queue Length:
Compression:
Topic to echo:

Subscribe to a topic

Taking the toggle example even further - once connected, you should be able to subscribe to a topic and print out messages as they are received.