如何使用Python通过Foxglove WebSocket Server传输Protobuf数据并在Studio展示模型

1. 定义Protobuf消息结构 #

首先创建Protobuf定义文件（如example.proto），描述需传输的数据格式：

syntax = "proto3";

package example;

// 传感器数据消息
message SensorData {
  float temperature = 1;
  float humidity = 2;
  int64 timestamp = 3; // 纳秒级时间戳，适配Foxglove Studio时间轴
}

// 可选：用于3D模型姿态控制的消息
message ModelPose {
  float x = 1;
  float y = 2;
  float z = 3;
  float roll = 4;
  float pitch = 5;
  float yaw = 6;
}

使用Protobuf编译器生成Python代码：

protoc --python_out=. example.proto

执行后会生成example_pb2.py文件，用于消息的序列化与反序列化。

2. 安装依赖库 #

安装Foxglove WebSocket SDK和Protobuf Python库：

pip install foxglove-websocket protobuf

3. 编写Python WebSocket服务器 #

以下是完整的服务器代码，实现Protobuf数据的持续发送：

import asyncio
import time
from foxglove_websocket import run_cancellable
from foxglove_websocket.server import FoxgloveServer, ChannelId
from example_pb2 import SensorData, ModelPose

async def main():
    # 启动WebSocket服务器，监听本地8765端口
    async with FoxgloveServer("0.0.0.0", 8765, "Python Protobuf Server") as server:
        # 注册传感器数据通道：指定编码为protobuf，传入schema定义
        sensor_channel = await server.add_channel({
            "name": "sensor_data",
            "encoding": "protobuf",
            "schemaName": "example.SensorData",
            "schema": open("example.proto", "r").read(),
        })

        # 可选：注册模型姿态通道
        pose_channel = await server.add_channel({
            "name": "model_pose",
            "encoding": "protobuf",
            "schemaName": "example.ModelPose",
            "schema": open("example.proto", "r").read(),
        })

        # 循环发送数据
        while True:
            # 构造并序列化传感器数据
            sensor_msg = SensorData(
                temperature=25.0 + (time.time() % 10) * 0.8,
                humidity=55.0 + (time.time() % 15) * 0.5,
                timestamp=int(time.time() * 1e9)
            )
            await server.send_message(sensor_channel, sensor_msg.SerializeToString())

            # 构造并序列化模型姿态数据（模拟移动）
            pose_msg = ModelPose(
                x=(time.time() % 5) - 2.5,
                y=(time.time() % 4) - 2.0,
                z=0.0,
                yaw=time.time() % 360
            )
            await server.send_message(pose_channel, pose_msg.SerializeToString())

            await asyncio.sleep(0.1)

if __name__ == "__main__":
    run_cancellable(main())

代码关键说明 #

• FoxgloveServer：创建WebSocket服务器实例，指定监听地址、端口和服务器名称
• add_channel：注册数据通道时必须指定encoding: "protobuf"，并传入完整的Protobuf schema内容，schemaName需严格匹配.proto中的package.消息名
• SerializeToString()：将Protobuf消息对象序列化为二进制数据后发送

4. 在Foxglove Studio中配置展示 #

连接WebSocket服务器 #

1. 打开Foxglove Studio，点击顶部菜单栏的「Open Connection」
2. 选择「WebSocket」类型，输入连接地址ws://localhost:8765，点击「Connect」

可视化传感器数据 #

1. 连接成功后，左侧「Channels」面板会显示sensor_data通道
2. 将通道拖拽到右侧画布，选择合适的组件（如「Number Panel」显示实时数值，「Line Chart」展示数据趋势）

展示3D模型并绑定姿态数据 #

1. 在画布中添加「3D Panel」
2. 点击面板右上角的「+」→「Add Model」，上传GLB/GLTF格式的模型文件
3. 选中模型，在右侧「Properties」面板中，将「Position」「Rotation」字段绑定到model_pose通道的对应字段（如x→model_pose.x），模型会根据发送的姿态数据实时更新

常见问题排查 #

• 连接失败：检查服务器是否正常运行，端口是否被占用，防火墙是否允许8765端口的入站连接
• 消息解析错误：确保schemaName与Protobuf定义的package.消息名完全一致，schema内容和本地.proto文件一致
• 时间轴不同步：确保发送的timestamp是纳秒级整数，Foxglove Studio默认使用纳秒时间戳

内容的提问来源于stack exchange，提问作者Sonny Gong