Linux 主机运行 ROS 核心和 rosbridge_server，并通过 WebSocket 开放通信端口；Windows 主机上的 Vue 应用则通过 roslibjs 库连接到这个 WebSocket 端口，从而订阅和发布 ROS 话题。

简单来说，架构分为三层：

• Windows (Vue 前端)：负责用户界面和交互。

• 网络通信：使用 WebSocket 协议，这是连接前后端的桥梁。rosbridge 提供了 WebSocket 服务端。

• Linux (ROS 后端)：负责机器人核心逻辑、传感器数据处理等。

• 第一步：在 Linux 上启动 ROS 和 rosbridge

  这是最重要的一步。首先确保你的 ROS 环境已安装，然后在 Linux 终端中安装并启动 rosbridge_server。

  bash

  # 安装 rosbridge (将 <rosdistro> 替换为你的ROS版本，如 noetic, humble)
  sudo apt-get install ros-<rosdistro>-rosbridge-suite
  
  # 启动 rosbridge WebSocket 服务器，默认端口为 9090
  roslaunch rosbridge_server rosbridge_websocket.launch

• 启动成功后，你的 Linux 机器就在 ws://<linux_ip>:9090 这个地址上监听来自 Vue 前端的连接了

• 第二步：在 Windows 上创建 Vue 项目并安装依赖

  在你的 Windows 开发机上，创建 Vue 项目并安装 roslib 库。

• # 创建 Vue 项目 (如果你还没有)
  npm create vue@latest my-ros-app
  cd my-ros-app

  # 安装 roslibjs，这是 Vue 与 rosbridge 通信的核心库
  npm install roslib

• 第三步：在 Vue 组件中连接 ROS

  在你的 Vue 组件中，引入 roslib 并编写连接代码。最关键的是，WebSocket 地址要指向你 Linux 机器的正确 IP。

• // 在某个 Vue 组件中，例如 App.vue
  

  <template>
    <div id="app">
      <h1>ROS Vue 应用</h1>
      <p>连接状态: {{ isConnected ? '已连接' : '未连接' }}</p>
      <button @click="connectToRos" :disabled="isConnected">连接 ROS</button>
      <button @click="publishTopic" :disabled="!isConnected">发布速度指令</button>
    </div>
  </template>

• <script>
  

  import * as ROSLIB from 'roslib';
  export default {
    data() {
      return {
        ros: null,
        isConnected: false,
        // 重要：这里要填你 Linux 机器的 IP 地址和 rosbridge 端口
        rosbridgeUrl: 'ws://你的Linux机器IP:9090', 
      };
    },
    methods: {
      connectToRos() {
        this.ros = new ROSLIB.Ros({
          url: this.rosbridgeUrl
        });
  
        this.ros.on('connection', () => {
          console.log('成功连接到 ROS!');
          this.isConnected = true;
        });
  
        this.ros.on('error', (error) => {
          console.error('连接 ROS 出错:', error);
        });
  
        this.ros.on('close', () => {
          console.log('与 ROS 的连接已关闭');
          this.isConnected = false;
        });
      },
      // 示例：发布一个话题
      publishTopic() {
        if (!this.isConnected) return;
        // 创建话题对象
        const cmdVel = new ROSLIB.Topic({
          ros: this.ros,
          name: '/cmd_vel',
          messageType: 'geometry_msgs/Twist'
        });
        // 创建消息对象
        const twist = new ROSLIB.Message({
          linear: { x: 0.1, y: 0, z: 0 },
          angular: { x: 0, y: 0, z: 0 }
        });
        // 发布消息
        cmdVel.publish(twist);
      }
    },
    mounted() {
      // 组件挂载时自动连接
      this.connectToRos();
    },
    beforeDestroy() {
      // 组件销毁前关闭连接
      if (this.ros) {
        this.ros.close();
      }
    }
  };

  </script>

• 第四步：运行你的 Vue 应用

  bash

  npm run dev

• 在浏览器中打开你的 Vue 应用，如果一切正常，你应该能看到浏览器控制台输出 "成功连接到 ROS!" 的信息。