Announcing the Foxglove WebSocket Protocol
Jacob Bandes-Storch ·
Foxglove Studio has its origins in the Robot Operating System (ROS) ecosystem. Many of Studio’s visualization panels were inspired by off-the-shelf ROS tooling, and the app integrates seamlessly with ROS data sources, including live connections and recorded bag files. However, we recognize that not everyone in the robotics industry uses ROS. We’ve talked to teams who have modified and replaced pieces of ROS, some who have used other off-the-shelf messaging solutions like eCAL and Apollo Cyber RT, and some who have built their own stack entirely using tools like Redis or ZeroMQ.
At Foxglove, our mission is to bring world-class tooling to all robotics teams — large and small, ROS or otherwise. That’s why today we’re excited to announce the Foxglove WebSocket connection, a new protocol that allows anyone to use their data inside Studio v0.24.
Stream data into Foxglove Studio over a WebSocket
WebSockets offer a simple interface for two-way communication between servers and clients. We chose this protocol as the basis for this new Studio connection because it is well-supported in browsers — allowing us to offer equal functionality in our desktop and web apps — and because WebSocket server and client libraries are readily available across many different languages and frameworks.
To use the new protocol with Foxglove Studio, you will need to build a custom server that transmits data to clients. Because connections are initiated from Foxglove Studio, the app will act as a client.
The Foxglove WebSocket protocol doesn’t specify what format your data needs to be in — instead, it requires the server to provide this information to the client dynamically. This is intentional, because we foresee teams wanting to work with many different kinds of data in Foxglove Studio. For this initial launch, we’ve integrated support for two common encodings: JSON and Protocol Buffers (Protobuf).
Along with Studio support for the new WebSocket connection, we’re providing some sample programs to showcase the new functionality. Ultimately, engineering teams will need to write their own code to load their data into Foxglove Studio via WebSocket. However, the following examples can help you understand what we’ve built, and serve as a starting point for building your custom server.
Make sure you’ve installed Node.js before running these examples.
Visualize CPU and memory usage
The system monitor command (sysmon) starts up a WebSocket server and transmits basic information about your computer, like its CPU and memory usage.
At the command line, run npx @foxglove/ws-protocol-examples sysmon to start the system monitor.
$ npx @foxglove/ws-protocol-examples sysmon
foxglove:sysmon ╭────────────────────────────────────────────────────────────────────────────────────╮
foxglove:sysmon │ │
foxglove:sysmon │ 📡 Server listening on localhost:8765. To see data, visit: │
foxglove:sysmon │ https://app.foxglove.dev/~/view?ds=foxglove-websocket&ds.url=ws://localhost:8765/ │
foxglove:sysmon │ │
foxglove:sysmon ╰────────────────────────────────────────────────────────────────────────────────────╯ +0ms
To see the data being transmitted by your server, open Foxglove. Add a Raw Messages panel to your layout, and select the system_stats topic to see a live feed memory usage and other system information. You can also try out a Plot panel with system_stats.total_cpu_usage to see your CPU usage on a graph.
Display camera images
The image-server command will start up an example server that transmits images, similar to those captured by your robot’s camera, to Foxglove Studio as binary data.
Close out the previous server by pressing control-C. Now, run npx @foxglove/ws-protocol-examples image-server. If Foxglove Studio is still open, it should automatically connect to the new WebSocket server.
Add an Image panel to your layout, and you’ll start to see images from the example_image topic. That was easy!
Getting custom data into Foxglove Studio
At this point, you might be wondering how to get your own data into Foxglove Studio. To do this, you’ll need to write a WebSocket server. Studio will connect to the server, receive information about the available data, and request data that the user wants to visualize. The foxglove/ws-protocol repository contains libraries you can install and use with your own system, as well as some examples to get you started. We currently provide libraries to help you write servers in JavaScript/TypeScript (@foxglove/ws-protocol) and Python (foxglove-websocket).
Your server will need to inform Foxglove Studio about the data’s format, or encoding, as well as its structure, or schema. For JSON-encoded data, Studio expects schemas in the JSON Schema format. For Protobuf-encoded data it expects a FileDescriptorSet, which is a binary representation of your Protobuf definitions that can be generated at runtime.
For more details on the protocol and supported encodings, visit the foxglove/ws-protocol repository and the Foxglove documentation.
Share your feedback
We’re excited to enable more teams to work with their data in Foxglove Studio with the new Foxglove WebSocket protocol. But we can’t do it alone — we need your input on specific needs and pain points to help guide the future direction of this protocol. If you’re interested in using Foxglove Studio with data formats other than JSON and Protobuf, or have any other feedback, please get in touch.
Feel free to share your thoughts in Slack, file bug reports and feature requests on GitHub (studio or ws-protocol), or message us directly on Twitter. We can’t wait to expand this feature to help more robotics teams load and explore their custom data inside Foxglove Studio!
Read more:
How Foxglove compares to the original ROS visualization tool.
Esther WeonEsther Weon
Writing custom panels in Foxglove Studio using the extensions API
Esther WeonEsther WeonGet blog posts sent directly to your inbox.