Getting started (for javascript dummies) - ROS 2 humble, Ubuntu 22

[Ryanf55]

I'm a ROS/C++ developer using roslibjs to inspect the state of my autonomous system. I've written less than 200 lines of javascript in my life. Here's how I got started with this library (open to edits).

Assumptions

First off, some assumptions:

• You are on Ubuntu 22
• You don't have node, npm, pnpm, or this library installed
• You use humble
• You have ros2 properly installed already

Install

1. Install nvm to get at least version 18 of node ref

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash
source instlal/setup.bash
nvm ls-remote
nvm install 22

1. Install pnpm

curl -fsSL https://get.pnpm.io/install.sh | sh -
source ~/.bashrc

1. Create a workspace (perhaps another package in your standard ros src folder) and enter into it

2. Use pnpm to install roslibjs

pnpm install roslib@github:RobotWebTools/roslibjs

^ I believe this is what created the package.json file.

Amend the package.json file to add "type": "module"

1. Install rosbridge

sudo apt install ros-humble-rosbridge-server

1. Run rosbridge

# Source the local ROS install so we can get custom messages
source /your/path/to/install/setup.bash
ros2 launch rosbridge_server rosbridge_websocket_launch.xml

Minimal setup

Create a folder, anywhere, with two files.
roslib_echo.js

#!/usr/bin/env node

import * as ROSLIB from 'roslib';

var ros = new ROSLIB.Ros({
    url: 'ws://localhost:9090'
});

ros.on('connection', function () {
    console.log('Connected to websocket server.');
});

ros.on('error', function (error) {
    console.log('Error connecting to websocket server: ', error);
});

ros.on('close', function () {
    console.log('Connection to websocket server closed.');
});

var listener = new ROSLIB.Topic({
    ros: ros,
    name: '/my_topic',
    messageType: 'std_msgs/Header'
});

listener.subscribe(function (message) {
    console.log('Received message on ' + listener.name + ' at time ' + message.stamp.sec + ' [s]');
});

In another terminal, publish a header that keeps incrementing the time so we can see it change.

ros2 topic pub /my_topic std_msgs/msg/Header "{ stamp: now }"

In another terminal, run your javascript app.

node roslib_echo.js

Expect the following logs for roslib_echo.js

Connected to websocket server.
Received message on /my_topic at time 1730959668 [s]
Received message on /my_topic at time 1730959669 [s]

And, for rosbridge

[rosbridge_websocket-1] [INFO] [1730959703.952066265] [rosbridge_websocket]: Rosbridge WebSocket server started on port 9090
[rosbridge_websocket-1] [INFO] [1730959707.694591316] [rosbridge_websocket]: Calling services in existing thread
[rosbridge_websocket-1] [INFO] [1730959707.694884410] [rosbridge_websocket]: Sending action goals in existing thread
[rosbridge_websocket-1] [INFO] [1730959707.695664715] [rosbridge_websocket]: Client connected. 1 clients total.
[rosbridge_websocket-1] [INFO] [1730959707.707813660] [rosbridge_websocket]: [Client 195c6a15-c7fe-4b7a-83f7-a8234ce58c72] Subscribed to /my_topic

Now, time to pipe the data in to cesium.js to see where my airplane is in the world!

Gotchas

• The examples reference local files, but I installed roslibjs with npm
• The import command in the examples didn't work
• The pnpm installer didn't tell me to install npm first and failed with odd errors

Next up

I want to figure out how to embed this javascript in html that also is part of my cesium app.

[EzraBrooks]

Thanks for posting this!

The examples reference local files, but I installed roslibjs with npm

Yeah, the examples are very very outdated. I did my best to keep them functional when I did a bunch of modernization of this codebase, but I frankly didn't invest any time into modernizing them.

The import command in the examples didn't work

Which are you talking about?

The pnpm installer didn't tell me to install npm first and failed with odd errors

That is odd. I wonder if we should document installing pnpm via corepack, which is where the Node ecosystem appears to be heading. nvm, I misinterpreted and misremembered - for some reason I thought roslibjs used PNPM, which it does not.

[Ryanf55]

The import here only works if you are running your javascript inside the roslibjs repo:

roslibjs/examples/ros2_simple.html

Line 6 in c34478b

<script src="../dist/RosLib.umd.cjs"></script>

I don't think most people using this won't be doing development for their GUI in-tree .

Any tips on if I did the import in a more user-realistic way would be appreciated.

[EzraBrooks]

Ah, right. Yeah, a more realistic example for using roslib directly within HTML without a bundler or package manager (which is a workflow I attempted to preserve but do not use myself so may be buggy) would be to use something like UNPKG which is a CDN that wraps NPM.

I'd generally recommend against doing that in 2024, though, and point you toward using a web framework like React, Svelte, or Vue (in that order in my personal preference) where you can use Node-style import statements and have them work fine.