The new ROS2TFClient + React application

[pfarinha91]

Hello!

So, following up on the recent PR #731 of adding a TF client for ROS 2 on roslibjs. I decided to try and use it in a React application that my team is working on for using Three.js (react-three-fiber) for visualizing ROS 2 data, but I've run into a issue. I will describe what's happening and provide some code snippets and we can follow up a discussion on the matter as proposed by @EzraBrooks on #731.

So, I changed the Roslibjs version on package.json to github:RobotWebTools/roslibjs#develop and installed it. Then, realized that actions are still not implemented on the main release of rosbridge for Ros Humble, so I cloned and compiled the most recent version of the rosbridge_suite (branch ros2), launched the new rosbridge_websocketand the tf2_web_republisher fork from @pac48 .

I'm now able to get TFs arriving, but something wrong is happening with the rosbridge as I stop being able to unsubscribe from other topic subscribers and can't dispose ROS2TFClient when the component unmounts and eventually WebSocketClosedError: Tried to write to a closed websocket errors start raining on the rosbridge websocket if I try to reconnect.

Maybe I'm doing something wrong, but this was my approach (sample code, some logic is not there like changing topics, etc):

import React, { useState, useEffect } from 'react';
import { Canvas } from '@react-three/fiber';
import * as ROSLIB from 'roslib';

const Component = ({ ros, topic, type, frame }) => {

  const [msg, setMsg] = useState(null);
  const [exampleSubscriber, setExampleSubscriber] = useState(null);

  const [tf, setTf] = useState(null);
  const [tfclient, setTfclient] = useState(null);
  
  useEffect(() => {
    if (!exampleSubscriber) {
      setExampleSubscriber(new ROSLIB.Topic({
        ros: ros,
        name: topic,
        messageType: type,
      }));
    }
  },[topic])

  useEffect(() => {
    exampleSubscriber?.subscribe(setMsg);
    //Unsubscibe on component unmount
    return () => {
      exampleSubscriber?.unsubscribe();
    }
  },[exampleSubscriber]);

  useEffect(() => {  
    if (!tfclient) {
      setTfclient(new ROSLIB.ROS2TFClient({
        ros : ros, 
        fixedFrame : "map"}
      ));
    } ;
  },[]);

  useEffect(() => {
    tfclient?.subscribe('base_link', setTf);
    //Unsubscibe on component unmount
    return () => {
      tfclient?.unsubscribe('base_link', setTf);
      tfclient?.dispose();
    }
  },[tfclient])

  console.log({msg,tf})

  return (
    // three.js canvas and its components
  );
};

So I launch everything:
ros2 run tf2_web_republisher tf2_web_republisher_node
ros2 launch rosbridge_server rosbridge_websocket_launch.xml
The rosbag:
ros2 bag play example_rosbag

And launch my app and connect to the rosbridge_websocket and both msg and tf start arriving:

But, I can no longer unsubscribe correctly from topic subscribers (exampleSubscriber in this case).

Before, on disconnect and component unmount, the rosbridge disconnects cleanly:

Now, with an active subscription on TF client, I try to disconnect/unmount and this happens:

The subscriber topic does not unsubscribe and on the next connection it creates new subscribers and duplicates it. I think the TFClient may actually unsubscribe (I've printed and checked the object and the frame_id is removed) but there is no feedback on the rosbridge). This only happens if I call a ROS2TFClient.subscribe(), if I don't subscribe a TF, everything is ok.

Am I doing something wrong or is the rosbridge not stable with actions yet, or something? Can someone reproduce this?

If you can make it work, please give me some insights on your approach!

• Library version: https://github.com/RobotWebTools/roslibjs (develop branch)
• Rosbridge version: https://github.com/RobotWebTools/rosbridge_suite (ros2 branch)
• tf2_web_republisher version: https://github.com/pac48/tf2_web_republisher
• ROS version: ROS Humble
• Node version: 18.15
• React version: 18.3.1
• Platform / OS: Ubuntu 22.04

Thank you :)

[EzraBrooks]

Just to help narrow down the issue and make sure we're seeing a roslibjs issue as opposed to a React lifecycle issue, I have a couple recommendations:

Instead of doing useState(null) and then using an effect to set the Topic state, try using useMemo like so:

const exampleSubscriber = useMemo(() => new ROSLIB.Topic({
  ros: ros,
  name: topic,
  messageType: type,
}), [ros, topic, type]);

You can apply a similar model to defining your ROS2TFClient.

I suspect you are actually causing extremely high-rate re-renders on your React component and things are getting confused. As a general React tip, you should never call a state setter within a high-rate callback - so if you need to have references to the "most recent message" like you have here, I would recommend using useRef instead of useState for the TF and the message.

[EzraBrooks]

The ref update should not trigger a render, that is correct. I would recommend in your R3F component checking the contents of the refs in a useFrame hook instead of checking them in the render loop. This is what is advised in https://docs.pmnd.rs/react-three-fiber/advanced/pitfalls

[EzraBrooks]

but even if I put a simple console.log() callback it also works, but the rosbridge problem persists.

Okay, that's very interesting - that might be definitive evidence that the issue is in roslibjs or tf2_web_republisher. Could you create a minimum reproduction without React in the loop?

[emusman-lab]

@pfarinha91 did you find any solution. I am facing a similar issue.
I have attached a /cmd_vel publisher to a button. When i press the button it publish the speed on the before mentioned topic. I ran into issue if i include ROS3D.UrdfClient or ROS3D.LaserScan. The button is in HTML and a JavaScript code is attached to run the roslib and ros3d.
What happens is that i am able to receive URDF and Laserscan data but i cannot publish anymore on any topic. In case i reload page, the rosbridge server continuously say this "WebSocketClosedError: Tried to write to a closed websocket". Still if i move the robot by publishing at cmd_vel from terminal I can see it is moving in the web and laserscan data works too but i cannot publish anymore or use other topics instead of the one used by ROS3d for map and laserscan. I dont see any errors on tf2_web_republisher from @pac48 .

Can you please guide me how i can solve this issue here is my platform and packages detail
Ubuntu 22.04
ROS2 Humble inside docker [Ubuntu 22.04]
ros2 branch => https://github.com/RobotWebTools/rosbridge_suite
build from source roslibjs => https://github.com/RobotWebTools/roslibjs
tf2_web_republisher => https://github.com/pac48/tf2_web_republisher

[pfarinha91]

@emusman-lab I was having a simular issue with Rosbridge blocking further publish / subscriptions after some point, but setting the send_action_goals_in_new_thread and call_services_in_new_thread as true kind of solved that.

Regarding the WebSocketClosedError: Tried to write to a closed websocket, I'm also still having that error and found no solution. If I try to unsubscribe everything (topics and TFs) when closing / reloding the page and if I have TFs being subscribed I will get that error and it starts accumulating until the point that nothing works. I still think that something is not being correctly unsubscribed as it makes no difference if I call the unsubscribe method on the TFClient or not.

I also confirm that I see no errors on tf2_web_republisher from @pac48 and it always continues to work well without restarting.

I had to move on to other stuff so I don't have any other developments, unfortunately.

[emusman-lab]

@pfarinha91 I solved the issue I was facing by creating a separate client for ROS3D and other publishers that I had in my JS code. This did the trick for me.