Largely based on jtbandes's blog post Using Protobuf Data with the Foxglove WebSocket Connection, this package contains example code to send protobuf messages between a websocket server and Foxglove visualization.
server
: A websocket server using Foxglove WebSocket Protocolextension
: Custom extension created via foxglove/create-foxglove-extensionmisc
: The proto used for this example, and an example Foxglove layout used for debugging
- Run the websocket server using instructions in
server/README.md
- Open Foxglove with a Foxglove WebSocket connection to
ws://localhost:8765
- Build the extension to test locally, or package & upload to your Foxglove organization (see
extension/README.md
) - Add the custom panel to your layout using Visualization Settings > Extensions from the top right menu
You'll see the messages published by the server on the /server/json-messages
and /server/protobuf-messages
topics.
Click the layout's "Publish" button to send a client message to the server, and observe the decoded message in the server's console logs.
The client publishes these messages to the /client/json-messages
and /client/protobuf-messages
topics;
once the server parses those, it forwards the parsed messages to the respective server channels for debugging.
This example uses the .proto
used in the blog post; its Python module is generated via:
protoc --python_out=. ExampleMsg.proto
The Typescript module is generated using ts-proto:
protoc --plugin=./node_modules/.bin/protoc-gen-ts_proto --ts_proto_out=. ExampleMsg.proto