如何在React应用中通过按钮调用rosnodejs启动ROS Launch文件？

尝试在无后端的React应用中，通过按钮结合rosnodejs启动ROS Launch文件，操作步骤如下：

1. 安装rosnodejs：

npm install rosnodejs

2. 在JSX文件中编写组件代码：

import React, { Component } from "react";
import * as rosnodejs from 'rosnodejs';

const rosNode = await rosnodejs.initNode('my_node');
async function launchFile(){
  const { run } = rosnodejs;
  await run('turtlebot3_house.launch', 'turtlebot3_gazebo');
}

function MyButton(){
  return (
    <button onClick={launchFile}>Launch ROS file</button>
  );
}

export default MyButton;

3. 在index.js中导入组件：

import MyButton from "./components/Launch Buttons"

ReactDOM.render(
  <React.StrictMode>
    <App />
    <MyButton />
  </React.StrictMode>,
  document.getElementById("root")
);

但导入rosnodejs的代码行出现大量错误，想确认是否是安装环节的问题，以及正确的实现方式。

1. rosnodejs不支持浏览器环境：rosnodejs是基于Node.js开发的ROS客户端库，依赖child_process、net等Node.js核心模块，这些模块在浏览器中不存在，直接在React前端代码中导入必然报错。
2. 顶层await语法错误：const rosNode = await rosnodejs.initNode('my_node');属于顶层await，即使在Node.js环境中，也需要文件是ES模块且支持顶层await语法，直接放在组件外部不符合规范。
3. 组件路径问题：导入路径中的空格可能导致解析错误，"./components/Launch Buttons"这种带空格的路径需要处理，更建议直接修改文件名去掉空格。

由于rosnodejs只能在Node.js环境运行，必须通过后端服务中转实现需求，具体步骤如下：

1. 搭建Node.js后端服务 #

• 初始化后端项目：

mkdir ros-backend && cd ros-backend
npm init -y
npm install rosnodejs express cors

• 编写后端服务代码（server.js）：

const express = require('express');
const cors = require('cors');
const rosnodejs = require('rosnodejs');

const app = express();
app.use(cors());
app.use(express.json());

// 初始化ROS节点
let rosNode;
async function initRosNode() {
  rosNode = await rosnodejs.initNode('ros_backend_node');
}
initRosNode();

// 定义启动launch文件的接口
app.post('/launch', async (req, res) => {
  try {
    const { launchFile, packageName } = req.body;
    if (!launchFile || !packageName) {
      return res.status(400).send('缺少launch文件名或包名参数');
    }
    const { run } = rosnodejs;
    await run(launchFile, packageName);
    res.status(200).send('Launch文件启动成功');
  } catch (error) {
    res.status(500).send(`启动失败：${error.message}`);
  }
});

const PORT = 3001;
app.listen(PORT, () => {
  console.log(`后端服务运行在http://localhost:${PORT}`);
});

2. 修改React前端代码 #

• 调整MyButton组件逻辑，改为调用后端接口：

import React from "react";

async function launchFile(){
  try {
    const response = await fetch('http://localhost:3001/launch', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        launchFile: 'turtlebot3_house.launch',
        packageName: 'turtlebot3_gazebo'
      })
    });
    const result = await response.text();
    console.log(result);
    alert(result);
  } catch (error) {
    console.error('请求失败：', error);
    alert('启动失败，请检查后端服务是否正常运行');
  }
}

function MyButton(){
  return (
    <button onClick={launchFile}>Launch ROS file</button>
  );
}

export default MyButton;

• 修正index.js中的组件导入路径：

import MyButton from "./components/LaunchButtons"; // 移除路径中的空格，或改为"./components/Launch Buttons"

ReactDOM.render(
  <React.StrictMode>
    <App />
    <MyButton />
  </React.StrictMode>,
  document.getElementById("root")
);

3. 运行流程 #

1. 确保本地ROS环境已配置（执行source /opt/ros/[你的ROS版本]/setup.bash）。
2. 启动后端服务：

node server.js

3. 启动React前端应用：

npm start

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