Foxglove WebSocket

Foxglove Studio can load live data via an encoding-agnostic Foxglove WebSocket connection.

The Foxglove WebSocket connection in Foxglove Studio allows you to connect to a server via an encoding-agnostic WebSocket connection. We currently support receiving Protobuf and JSON data.

The server transmitting data will advertise a set of channels to Foxglove Studio. Each channel has a human-readable topic name, as well as information about the data's format, or encoding, and its structure, or schema. For more information on how to set up your own server, reference the protocol specification and our examples (Python, TypeScript).

Encoding support

For channels with encoding: "json", Studio expects the schema to be a JSON Schema definition. Each message should be UTF8-encoded JSON representing an object. Binary data should be represented in the JSON object as a base64-encoded string, and in the schema using contentEncoding (for example, { "type": "string", "contentEncoding": "base64" }).

For channels with encoding: "protobuf", Studio expects the schema to be a base64-encoded binary FileDescriptorSet (as produced by protoc --descriptor_set_out) , and schemaName to be one of the message types defined in the FileDescriptorSet. Each message should be encoded in the protobuf binary wire format. To get your data in a format Studio understands, you can find .proto files that are compatible with the standard ROS data types in our foxglove/ros-message-schemas repo.

Please get in touch if there are other data formats that your team would like to see supported.

Getting started

The foxglove/ws-protocol repo provides both Python and JavaScript/TypeScript packages you can install to build your own custom Foxglove WebSocket servers and clients.

It also includes a @foxglove/ws-protocol-examples npm package that provides example servers and clients. You can run these examples to explore how Foxglove Studio can receive system stats and image data from a custom WebSocket server.

$ npx @foxglove/ws-protocol-examples sysmon
$ npx @foxglove/ws-protocol-examples image-server

Loading data in Foxglove Studio

To see your Foxglove WebSocket server data in Foxglove Studio, select Open connection in the data sources dialog, and click on the Foxglove WebSocket tab. Enter the URL to your WebSocket server:

foxglove websocket dialog

The repo also includes code templates for building your own custom server (Python or JavaScript/TypeScript) and client (JavaScript/TypeScript).