Foxglove client example in typescript using ros-foxglove-bridge

[EnzoGhisoni]

I'm trying to replace ros-bridge-server with ros-foxglove-bridge to interact with a ROS2 application (to work with services and subscriber). I'm trying to create a test client in typescript to handle service

For the typescript, I use FoxgloveClient from @foxglove/ws-protocol to create the socket and @foxglove/cdr to decode data provided by ros-foxglove-bridge on ROS2 installation. I'm able to decode simple messages such as strings (std_msgs/msg/String) but I'm not able to decode it when it's more complicated message types (nav_msgs/msg/Odometry.msg https://docs.ros2.org/foxy/api/nav_msgs/msg/Odometry.html).

Version:
"@foxglove/cdr": "^3.3.0",
"@foxglove/ws-protocol": "^0.7.2",

Platform:
Ubuntu 22.04
Test in localhost
Data from ROS2 humble using ros-foxglove-bridge using commit [e37a3e1]

Steps To Reproduce
I based my function on this example https://github.com/foxglove/ws-protocol/blob/main/typescript/ws-protocol-examples/src/examples/service-client.ts:
Here is the function in typescript that I use to start the websocket, subscribe to the odom topic and decode the received message.

import { FoxgloveClient } from "@foxglove/ws-protocol";
import { CdrReader } from "@foxglove/cdr";

async function subscriber_example(url: string) {
    const address = url.startsWith("ws://") || url.startsWith("wss://") ? url : `ws://${url}`;
    let fallbackMsgEncoding: string | undefined;
    
    console.log(`Client connecting to ${address}`);
    const client = new FoxgloveClient({
      ws: new WebSocket(address, [FoxgloveClient.SUPPORTED_SUBPROTOCOL]),
    });
    client.on("error", (error) => {
      console.log("Error", error);
      throw error;
    });
    client.on("serverInfo", (serverInfo) => {
      const supportedEncodings = serverInfo.supportedEncodings ?? [];
      fallbackMsgEncoding = supportedEncodings.find((encoding) =>
        SUPPORTED_MSG_ENCODINGS.includes(encoding),
      );
    });
    client.on("advertise", (services) => {
        // To get the topic odom
        const regexpSearch = new RegExp("/odom", 'i');
        const topic = services.find((s) =>regexpSearch.test(s.topic))
        
        console.log(topic);
        if (!topic) {
            return;
        }
        client.subscribe(topic.id);
        
    });
    client.on("message", (response) => {
        const reader = new CdrReader(response.data);
        console.log(reader.string())
    });
    }

export default subscriber_example

If the message is a string, the console.log(reader.string()) provides the published string. With an odom message, the console.log(reader.string()) provides the following output:
@������odom��������base_footprint��{�Q������ʑ���߿��5�75�?"B�5�����w5��Wi?��Y��0�?�+�����?�

Expected Behavior

Do you have an idea about how to decode this type of messages (maybe using https://github.com/foxglove/schemas/tree/main) ?

[jtbandes]

        const reader = new CdrReader(response.data);
        console.log(reader.string())

CDR is a low-level serialization format that is unaware of ROS messages. Reading a string() value out of the message would ignore the other fields of the message, namely the header. You probably want to use @foxglove/rosmsg2-serialization instead. See here for an example: https://github.com/foxglove/mcap/blob/b8a73890348ef2dc69272b377fd2faab56f0303f/typescript/examples/validate/scripts/validate.ts#L154-L158