This post is an introduction to using Rosbridge with ROS 1 and JavaScript. If you're working on a ROS 2 robot, check out our blog post Using Rosbridge with ROS 2. For information on how to use Rosbridge with Foxglove, check out our docs.

If you've decided to build a robot using ROS (Robot Operating System), you now have easy access to a wide range of open source libraries, developer tools, and device drivers to support every step of your robotics development journey. Included in this rich ecosystem is Rosbridge, an easy way for you to interact with your robot and its data from a web page.

In this tutorial, we'll cover what exactly Rosbridge offers, and how to start using it with your own ROS 1 projects. By the end, we'll have created a web page that can listen to messages published by your ROS stack.

Why Rosbridge?

Web browsers have spent decades making it easier to build and distribute interfaces that are easy to use, lightning-fast, and available cross-platform. Unfortunately, ROS nodes communicate with each other via TCP/UDP sockets, which are not available in web browsers.

Rosbridge fills this gap by providing the connection between your robot and web browser using WebSockets, which are supported in every modern web browser. It exposes the pub/sub functionality of ROS, so that you can publish and subscribe to topics from your web page.

Create a web page that listens to your ROS stack

First, we'll build a web page that communicates across a Rosbridge connection to do two things:

Listen for the Rosbridge connection, and display its status on the page

Listen to a specific ROS topic, and list its published messages on the page

We'll be using roslibjs to handle our web page's Rosbridge communications.

Create a basic HTML file titled index.html:



Open this file in your browser:

blank page

Now, let's update our page with the status of the Rosbridge connection:



Finally, we'll listen to a topic and display its received messages on the page:



Run your Rosbridge server

Now that we've written all the code we need for our web page to show meaningful information from our ROS stack, let's test it all out.

For the purposes of this tutorial, we'll assume you already have ROS 1 installed on your computer. Let's start by installing the \[rosbridge\_server]\(http\://wiki.ros.org/rosbridge\_server) package:



Next, you may have to source your development environment:



To launch the Rosbridge WebSocket server, run the launch file included with the Rosbridge install:



Refresh your web page to reconnect to the robot, and verify that your index.html file now shows "Connection: successful":

with Rosbridge status

In a Terminal window, publish a message to /my\_topic:



You'll see that the page now shows the latest /my\_topic message received:

with received message

Publishing more /my\_topic messages with different data will add their text to this growing list.

You've successfully subscribed to and received messages from a Rosbridge WebSocket server! While this tutorial covered an extremely simple example, Rosbridge connections make it possible for more complex web-based tools (like Foxglove Studio) to connect to your live robotics data.

Keep learning

Rosbridge can be a useful tool for accelerating your robotics development. It brings the advantages of the web to the robotics world, helping us build zero-install user interfaces that anyone can use.

With Rosbridge, the possibilities are endless. Instead of having every teammate install the complex development environment that working with ROS usually requires, you can now use developer tools, create operator dashboards, and share data insights across your organization - all with a simple web page.



You can find all code referenced in this tutorial in our foxglove/tutorials GitHub repo. You can also experiment with connecting to your ROS robot via a hosted version of this demo .

Foxglove Studio is an example of a web-based application that uses a Rosbridge connection to connect to your live ROS data. Open up Studio to build a real-time dashboard that visualizes and debugs your data – all from the comfort of your favorite web browser.


This post is an introduction to using Rosbridge with ROS 2 and JavaScript. If you're working on a ROS 1 robot, check out our blog post Using Rosbridge with ROS 1. For information on how to use Rosbridge with Foxglove, check out our docs.

If you've decided to build a robot using ROS (Robot Operating System), you now have easy access to a wide range of open source libraries, developer tools, and device drivers to support every step of your robotics development journey. Included in this rich ecosystem is Rosbridge, an easy way for you to interact with your robot and its data from a web page.

In this tutorial, we'll cover what exactly Rosbridge offers, and how to start using it with your own ROS 2 projects. By the end, we'll have created a web page that can listen to messages published by your ROS stack.

Why Rosbridge?

Web browsers have spent decades making it easier to build and distribute interfaces that are easy to use, lightning-fast, and available cross-platform. Unfortunately, ROS nodes communicate with each other via TCP/UDP sockets, which are not available in web browsers.

Rosbridge fills this gap by providing the connection between your robot and web browser using WebSockets, which are supported in every modern web browser. It exposes the pub/sub functionality of ROS, so that you can publish and subscribe to topics from your web page.

Create a web page that listens to your ROS stack

First, we'll build a web page that communicates across a Rosbridge connection to do two things:

Listen for the Rosbridge connection, and display its status on the page

Listen to a specific ROS topic, and list its published messages on the page

We'll be using roslibjs to handle our web page's Rosbridge communications.

Create a basic HTML file titled index.html:



Open this file in your browser:

blank page

Now, let's update our page with the status of the Rosbridge connection:



Finally, we'll listen to a topic and display its received messages on the page:



Run your Rosbridge server

Now that we've written all the code we need for our web page to show meaningful information from our ROS stack, let's test it all out.

For the purposes of this tutorial, we'll assume you already have ROS 2 installed on your computer. Let's start by installing the \[rosbridge\_server]\(http\://wiki.ros.org/rosbridge\_server) package:



Next, you may have to source your development environment:



To launch the Rosbridge WebSocket server, run the launch file included with the Rosbridge install:



Refresh your web page to reconnect to the robot, and verify that your index.html file now shows "Connection: successful":

with Rosbridge status

In a Terminal window, publish a message to /my\_topic:



You'll see that the page now shows the latest /my\_topic message received:

with received message

Publishing more /my\_topic messages with different data will add their text to this growing list.

You've successfully subscribed to and received messages from a Rosbridge WebSocket server! While this tutorial covered an extremely simple example, Rosbridge connections make it possible for more complex web-based tools (like Foxglove Studio) to connect to your live robotics data.

Keep learning

Rosbridge can be a useful tool for accelerating your robotics development. It brings the advantages of the web to the robotics world, helping us build zero-install user interfaces that anyone can use.

With Rosbridge, the possibilities are endless. Instead of having every teammate install the complex development environment that working with ROS usually requires, you can now use developer tools, create operator dashboards, and share data insights across your organization - all with a simple web page.



You can find all code referenced in this tutorial in our foxglove/tutorials GitHub repo. You can also experiment with connecting to your ROS robot via a hosted version of this demo .

Foxglove Studio is an example of a web-based application that uses a Rosbridge connection to connect to your live ROS data. Open up Studio to build a real-time dashboard that visualizes and debugs your data – all from the comfort of your favorite web browser.


We heard you were looking for the ultimate robotics remote...

We are happy to announce that we’re launching the foxglove-studio snap, to help millions of Linux users install Foxglove Studio with a single terminal command.

Snaps are app packages that make it easy to securely install applications without worrying about dependencies
or compatibility with your particular Linux distribution. You can discover snaps to install by browsing
the Snap Store.

In addition to being available via the Snap Store, snaps for future Foxglove Studio releases
will now be included in our weekly release assets.

To get started, install the Foxglove Studio desktop
app:



Launch the app either from your application launcher or the command line:



Read Ubuntu’s own announcement or check out the foxglove-studio snap page for more details. You can also join our Slack community to give feedback or ask questions about this new installation option.


Announcing the foxglove-studio Snap

Read more:

Ready to try Foxglove?