实战分享用roslibjs在Web端控制机器人移动附完整代码示例去年在开发一个远程机器人监控系统时我发现很多团队还在使用传统的桌面客户端来控制机器人。这不仅增加了部署成本也让跨平台协作变得困难。于是我开始探索如何通过Web浏览器直接与ROS机器人交互最终发现roslibjs这个强大的工具链。本文将分享如何从零开始构建一个完整的Web端机器人控制系统。1. 环境准备与工具链搭建要让Web浏览器与ROS通信我们需要搭建一个完整的桥梁系统。这套工具链的核心是rosbridge_suite它就像一座连接Web世界和ROS世界的桥梁。1.1 必备组件安装首先确保你的系统已经安装了ROS推荐Kinetic或Melodic版本。然后通过以下命令安装核心组件sudo apt-get install ros-$ROS_DISTRO-rosbridge-suite这个命令会安装rosbridge_websocket它是实现实时通信的关键。接下来获取JavaScript库git clone https://github.com/RobotWebTools/roslibjs.git提示如果你只需要基础功能可以直接使用CDN引入roslibjs无需本地克隆仓库。1.2 服务启动与验证启动rosbridge服务非常简单roslaunch rosbridge_server rosbridge_websocket.launch服务启动后默认会在9090端口监听WebSocket连接。你可以通过以下命令验证服务是否正常运行netstat -tuln | grep 9090如果看到类似下面的输出说明服务已就绪tcp6 0 0 :::9090 :::* LISTEN2. 基础通信架构解析理解roslibjs的工作原理对后续开发至关重要。这套系统主要包含三个关键部分通信层基于WebSocket协议提供双向实时通信能力协议转换层将ROS消息转换为JSON格式反之亦然API层提供简洁的JavaScript接口隐藏底层细节2.1 消息流转示意图Web浏览器 ←WebSocket→ rosbridge ←ROS API→ ROS Master这种架构的优势在于无需在浏览器端运行ROS可以利用现代浏览器的强大能力支持跨平台访问2.2 性能考量在实际项目中我发现需要注意几个性能关键点因素影响优化建议消息频率高频消息可能导致浏览器卡顿适当降低发布频率消息大小大消息会增加延迟精简消息内容连接数多个连接会消耗资源复用连接3. 核心功能实现让我们通过一个完整的示例来演示如何控制机器人移动。这个例子将实现连接到ROS发布控制指令订阅状态反馈3.1 HTML基础框架首先创建一个基本的HTML文件结构!DOCTYPE html html head meta charsetutf-8 title机器人Web控制器/title script srchttps://static.robotwebtools.org/roslibjs/current/roslib.min.js/script /head body h1机器人控制面板/h1 div idstatus未连接/div !-- 控制界面将在这里添加 -- script // JavaScript代码将在这里编写 /script /body /html3.2 ROS连接管理在script标签内添加连接管理代码// 创建ROS连接 const ros new ROSLIB.Ros({ url: ws://window.location.hostname:9090 }); // 连接状态监听 ros.on(connection, () { document.getElementById(status).textContent 已连接; console.log(Connected to ROS); }); ros.on(error, (error) { document.getElementById(status).textContent 连接错误; console.error(Connection error:, error); }); ros.on(close, () { document.getElementById(status).textContent 连接已关闭; console.log(Connection closed); });注意在实际部署时应该将localhost替换为服务器的实际IP地址。4. 运动控制实现机器人运动控制通常通过/cmd_vel话题实现使用geometry_msgs/Twist消息类型。4.1 创建发布者const cmdVel new ROSLIB.Topic({ ros: ros, name: /cmd_vel, messageType: geometry_msgs/Twist }); function moveRobot(linearX, angularZ) { const twist new ROSLIB.Message({ linear: { x: linearX, y: 0, z: 0 }, angular: { x: 0, y: 0, z: angularZ } }); cmdVel.publish(twist); }4.2 添加控制界面在body标签内添加控制按钮div classcontrols button onclickmoveRobot(0.5, 0)前进/button button onclickmoveRobot(-0.5, 0)后退/button button onclickmoveRobot(0, 0.5)左转/button button onclickmoveRobot(0, -0.5)右转/button button onclickmoveRobot(0, 0)停止/button /div4.3 添加速度滑块控制对于更精确的控制可以添加滑块div label线速度: input typerange idlinear min0 max1 step0.1 value0/label span idlinearValue0/span /div div label角速度: input typerange idangular min-1 max1 step0.1 value0/label span idangularValue0/span /div button onclicksendCustomVelocity()发送/button script function sendCustomVelocity() { const linear parseFloat(document.getElementById(linear).value); const angular parseFloat(document.getElementById(angular).value); moveRobot(linear, angular); } // 更新显示值 document.getElementById(linear).addEventListener(input, (e) { document.getElementById(linearValue).textContent e.target.value; }); document.getElementById(angular).addEventListener(input, (e) { document.getElementById(angularValue).textContent e.target.value; }); /script5. 状态监控与反馈一个完整的控制系统还需要状态反馈机制。5.1 订阅机器人状态const odomListener new ROSLIB.Topic({ ros: ros, name: /odom, messageType: nav_msgs/Odometry }); odomListener.subscribe((message) { const pose message.pose.pose; document.getElementById(position).innerHTML X: ${pose.position.x.toFixed(2)}br Y: ${pose.position.y.toFixed(2)}br Z: ${pose.position.z.toFixed(2)} ; });5.2 显示位置信息在HTML中添加显示区域h2当前位置/h2 div idposition等待数据.../div5.3 电池状态监控const batteryListener new ROSLIB.Topic({ ros: ros, name: /battery, messageType: sensor_msgs/BatteryState }); batteryListener.subscribe((message) { const batteryLevel message.percentage * 100; document.getElementById(battery).textContent ${batteryLevel.toFixed(0)}%; // 根据电量改变颜色 const batteryElement document.getElementById(battery); if(batteryLevel 20) { batteryElement.style.color red; } else if(batteryLevel 50) { batteryElement.style.color orange; } else { batteryElement.style.color green; } });对应的HTMLh2电池状态/h2 div idbattery未知/div6. 高级功能与优化基础功能实现后我们可以考虑添加一些增强体验的功能。6.1 键盘控制添加键盘控制可以提升操作体验document.addEventListener(keydown, (event) { switch(event.key) { case ArrowUp: moveRobot(0.5, 0); break; case ArrowDown: moveRobot(-0.5, 0); break; case ArrowLeft: moveRobot(0, 0.5); break; case ArrowRight: moveRobot(0, -0.5); break; case : moveRobot(0, 0); break; } });6.2 自动重连机制网络不稳定时自动重连很有必要function setupConnection() { // ...之前的连接代码... ros.on(close, () { document.getElementById(status).textContent 连接断开尝试重连...; setTimeout(() { ros.connect(ws://window.location.hostname:9090); }, 3000); }); } setupConnection();6.3 性能优化技巧在实际项目中我总结了几个优化点节流控制指令避免发送过多指令使用二进制传输对于大数据量消息压缩消息特别是图像数据离线缓存缓存静态资源如URDF文件// 节流示例 let lastSendTime 0; function throttledMove(linear, angular) { const now Date.now(); if(now - lastSendTime 100) { // 每100ms最多发送一次 moveRobot(linear, angular); lastSendTime now; } }7. 安全考虑与部署建议将Web控制界面暴露在公网需要特别注意安全。7.1 安全措施启用认证配置rosbridge的认证使用HTTPS加密通信限制IP只允许特定IP访问速率限制防止滥用7.2 部署架构对于生产环境建议采用以下架构[用户浏览器] ←HTTPS→ [反向代理] ←WebSocket→ [rosbridge] ←ROS→ [机器人]Nginx配置示例server { listen 443 ssl; server_name yourdomain.com; ssl_certificate /path/to/cert.pem; ssl_certificate_key /path/to/key.pem; location / { proxy_pass http://localhost:9090; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection upgrade; } }8. 调试技巧与常见问题开发过程中难免会遇到各种问题这里分享一些调试经验。8.1 调试工具浏览器开发者工具查看控制台日志和网络请求rostopic工具验证消息是否正确发布rqt_graph可视化节点连接关系8.2 常见错误错误现象可能原因解决方案连接失败rosbridge未运行检查rosbridge服务状态消息未收到话题名称不匹配使用rostopic list验证延迟高网络问题检查网络状况考虑本地测试8.3 日志记录添加详细的日志有助于问题排查function log(message) { const timestamp new Date().toISOString(); console.log([${timestamp}] ${message}); // 也可以显示在页面上的日志区域 const logElement document.getElementById(log); if(logElement) { logElement.innerHTML [${timestamp}] ${message}br; } }在HTML中添加日志显示区域div idlog styleheight:200px;overflow:auto;border:1px solid #ccc;padding:5px;/div9. 扩展功能思路基础功能实现后可以考虑扩展更多实用功能。9.1 地图显示使用ros2djs显示二维地图script srchttps://static.robotwebtools.org/ros2djs/current/ros2d.min.js/script div idmap/div script const viewer new ROS2D.Viewer({ divID: map, width: 800, height: 600 }); const mapClient new ROS2D.OccupancyGridClient({ ros: ros, rootObject: viewer.scene, topic: /map, continuous: true }); /script9.2 三维模型查看使用ros3djs显示机器人模型script srchttps://static.robotwebtools.org/ros3djs/current/ros3d.min.js/script div idurdf/div script const urdfViewer new ROS3D.Viewer({ divID: urdf, width: 800, height: 600, antialias: true }); const urdfClient new ROS3D.UrdfClient({ ros: ros, tfClient: new ROS3D.TFClient({ros: ros}), rootObject: urdfViewer.scene, path: http://resources.robotwebtools.org/, loader: new ROS3D.COLLADA_LOADER() }); /script9.3 多机器人控制对于多机器人系统可以扩展为class RobotController { constructor(name) { this.name name; this.cmdVel new ROSLIB.Topic({ ros: ros, name: /${name}/cmd_vel, messageType: geometry_msgs/Twist }); } move(linear, angular) { const twist new ROSLIB.Message({ linear: { x: linear, y: 0, z: 0 }, angular: { x: 0, y: 0, z: angular } }); this.cmdVel.publish(twist); } } // 创建多个机器人实例 const robot1 new RobotController(robot1); const robot2 new RobotController(robot2);10. 完整示例代码以下是整合了所有功能的完整示例代码!DOCTYPE html html head meta charsetutf-8 title高级机器人Web控制器/title script srchttps://static.robotwebtools.org/roslibjs/current/roslib.min.js/script style .controls { margin: 20px 0; } button { padding: 10px; margin: 5px; } #map, #urdf { border: 1px solid #000; margin: 10px 0; } /style /head body h1高级机器人控制面板/h1 div idstatus未连接/div h2运动控制/h2 div classcontrols button onclickmoveRobot(0.5, 0)前进/button button onclickmoveRobot(-0.5, 0)后退/button button onclickmoveRobot(0, 0.5)左转/button button onclickmoveRobot(0, -0.5)右转/button button onclickmoveRobot(0, 0)停止/button /div div label线速度: input typerange idlinear min0 max1 step0.1 value0/label span idlinearValue0/span /div div label角速度: input typerange idangular min-1 max1 step0.1 value0/label span idangularValue0/span /div button onclicksendCustomVelocity()发送/button h2状态监控/h2 div idposition等待数据.../div div idbattery未知/div h2系统日志/h2 div idlog styleheight:200px;overflow:auto;border:1px solid #ccc;padding:5px;/div script // 初始化ROS连接 const ros new ROSLIB.Ros({ url: ws://window.location.hostname:9090 }); // 连接状态处理 ros.on(connection, () { updateStatus(已连接, green); log(成功连接到ROS); setupSubscribers(); }); ros.on(error, (error) { updateStatus(连接错误: error, red); log(连接错误: error); }); ros.on(close, () { updateStatus(连接断开尝试重连..., orange); log(连接断开3秒后尝试重连); setTimeout(() ros.connect(ws://window.location.hostname:9090), 3000); }); // 状态更新函数 function updateStatus(text, color) { const statusElement document.getElementById(status); statusElement.textContent text; statusElement.style.color color; } // 日志函数 function log(message) { const timestamp new Date().toLocaleTimeString(); console.log([${timestamp}] ${message}); const logElement document.getElementById(log); logElement.innerHTML [${timestamp}] ${message}br; logElement.scrollTop logElement.scrollHeight; } // 运动控制 const cmdVel new ROSLIB.Topic({ ros: ros, name: /cmd_vel, messageType: geometry_msgs/Twist }); function moveRobot(linearX, angularZ) { const twist new ROSLIB.Message({ linear: { x: linearX, y: 0, z: 0 }, angular: { x: 0, y: 0, z: angularZ } }); cmdVel.publish(twist); log(发送控制指令: 线速度${linearX}, 角速度${angularZ}); } // 滑块控制 document.getElementById(linear).addEventListener(input, (e) { document.getElementById(linearValue).textContent e.target.value; }); document.getElementById(angular).addEventListener(input, (e) { document.getElementById(angularValue).textContent e.target.value; }); function sendCustomVelocity() { const linear parseFloat(document.getElementById(linear).value); const angular parseFloat(document.getElementById(angular).value); moveRobot(linear, angular); } // 键盘控制 document.addEventListener(keydown, (event) { switch(event.key) { case ArrowUp: moveRobot(0.5, 0); break; case ArrowDown: moveRobot(-0.5, 0); break; case ArrowLeft: moveRobot(0, 0.5); break; case ArrowRight: moveRobot(0, -0.5); break; case : moveRobot(0, 0); break; } }); // 状态订阅 function setupSubscribers() { // 里程计 const odomListener new ROSLIB.Topic({ ros: ros, name: /odom, messageType: nav_msgs/Odometry }); odomListener.subscribe((message) { const pose message.pose.pose; document.getElementById(position).innerHTML X: ${pose.position.x.toFixed(2)}br Y: ${pose.position.y.toFixed(2)}br Z: ${pose.position.z.toFixed(2)} ; }); // 电池状态 const batteryListener new ROSLIB.Topic({ ros: ros, name: /battery, messageType: sensor_msgs/BatteryState }); batteryListener.subscribe((message) { const batteryLevel message.percentage * 100; const batteryElement document.getElementById(battery); batteryElement.textContent ${batteryLevel.toFixed(0)}%; if(batteryLevel 20) { batteryElement.style.color red; } else if(batteryLevel 50) { batteryElement.style.color orange; } else { batteryElement.style.color green; } }); log(订阅器已设置); } /script /body /html在最近的一个仓储机器人项目中这套Web控制系统成功替代了原有的桌面客户端使操作人员可以通过平板电脑或手机随时随地监控和控制机器人。实际使用中发现合理设置控制指令的发送频率对系统稳定性至关重要通常建议将控制指令限制在10Hz以下。
实战分享：用roslibjs在Web端控制机器人移动（附完整代码示例）
实战分享用roslibjs在Web端控制机器人移动附完整代码示例去年在开发一个远程机器人监控系统时我发现很多团队还在使用传统的桌面客户端来控制机器人。这不仅增加了部署成本也让跨平台协作变得困难。于是我开始探索如何通过Web浏览器直接与ROS机器人交互最终发现roslibjs这个强大的工具链。本文将分享如何从零开始构建一个完整的Web端机器人控制系统。1. 环境准备与工具链搭建要让Web浏览器与ROS通信我们需要搭建一个完整的桥梁系统。这套工具链的核心是rosbridge_suite它就像一座连接Web世界和ROS世界的桥梁。1.1 必备组件安装首先确保你的系统已经安装了ROS推荐Kinetic或Melodic版本。然后通过以下命令安装核心组件sudo apt-get install ros-$ROS_DISTRO-rosbridge-suite这个命令会安装rosbridge_websocket它是实现实时通信的关键。接下来获取JavaScript库git clone https://github.com/RobotWebTools/roslibjs.git提示如果你只需要基础功能可以直接使用CDN引入roslibjs无需本地克隆仓库。1.2 服务启动与验证启动rosbridge服务非常简单roslaunch rosbridge_server rosbridge_websocket.launch服务启动后默认会在9090端口监听WebSocket连接。你可以通过以下命令验证服务是否正常运行netstat -tuln | grep 9090如果看到类似下面的输出说明服务已就绪tcp6 0 0 :::9090 :::* LISTEN2. 基础通信架构解析理解roslibjs的工作原理对后续开发至关重要。这套系统主要包含三个关键部分通信层基于WebSocket协议提供双向实时通信能力协议转换层将ROS消息转换为JSON格式反之亦然API层提供简洁的JavaScript接口隐藏底层细节2.1 消息流转示意图Web浏览器 ←WebSocket→ rosbridge ←ROS API→ ROS Master这种架构的优势在于无需在浏览器端运行ROS可以利用现代浏览器的强大能力支持跨平台访问2.2 性能考量在实际项目中我发现需要注意几个性能关键点因素影响优化建议消息频率高频消息可能导致浏览器卡顿适当降低发布频率消息大小大消息会增加延迟精简消息内容连接数多个连接会消耗资源复用连接3. 核心功能实现让我们通过一个完整的示例来演示如何控制机器人移动。这个例子将实现连接到ROS发布控制指令订阅状态反馈3.1 HTML基础框架首先创建一个基本的HTML文件结构!DOCTYPE html html head meta charsetutf-8 title机器人Web控制器/title script srchttps://static.robotwebtools.org/roslibjs/current/roslib.min.js/script /head body h1机器人控制面板/h1 div idstatus未连接/div !-- 控制界面将在这里添加 -- script // JavaScript代码将在这里编写 /script /body /html3.2 ROS连接管理在script标签内添加连接管理代码// 创建ROS连接 const ros new ROSLIB.Ros({ url: ws://window.location.hostname:9090 }); // 连接状态监听 ros.on(connection, () { document.getElementById(status).textContent 已连接; console.log(Connected to ROS); }); ros.on(error, (error) { document.getElementById(status).textContent 连接错误; console.error(Connection error:, error); }); ros.on(close, () { document.getElementById(status).textContent 连接已关闭; console.log(Connection closed); });注意在实际部署时应该将localhost替换为服务器的实际IP地址。4. 运动控制实现机器人运动控制通常通过/cmd_vel话题实现使用geometry_msgs/Twist消息类型。4.1 创建发布者const cmdVel new ROSLIB.Topic({ ros: ros, name: /cmd_vel, messageType: geometry_msgs/Twist }); function moveRobot(linearX, angularZ) { const twist new ROSLIB.Message({ linear: { x: linearX, y: 0, z: 0 }, angular: { x: 0, y: 0, z: angularZ } }); cmdVel.publish(twist); }4.2 添加控制界面在body标签内添加控制按钮div classcontrols button onclickmoveRobot(0.5, 0)前进/button button onclickmoveRobot(-0.5, 0)后退/button button onclickmoveRobot(0, 0.5)左转/button button onclickmoveRobot(0, -0.5)右转/button button onclickmoveRobot(0, 0)停止/button /div4.3 添加速度滑块控制对于更精确的控制可以添加滑块div label线速度: input typerange idlinear min0 max1 step0.1 value0/label span idlinearValue0/span /div div label角速度: input typerange idangular min-1 max1 step0.1 value0/label span idangularValue0/span /div button onclicksendCustomVelocity()发送/button script function sendCustomVelocity() { const linear parseFloat(document.getElementById(linear).value); const angular parseFloat(document.getElementById(angular).value); moveRobot(linear, angular); } // 更新显示值 document.getElementById(linear).addEventListener(input, (e) { document.getElementById(linearValue).textContent e.target.value; }); document.getElementById(angular).addEventListener(input, (e) { document.getElementById(angularValue).textContent e.target.value; }); /script5. 状态监控与反馈一个完整的控制系统还需要状态反馈机制。5.1 订阅机器人状态const odomListener new ROSLIB.Topic({ ros: ros, name: /odom, messageType: nav_msgs/Odometry }); odomListener.subscribe((message) { const pose message.pose.pose; document.getElementById(position).innerHTML X: ${pose.position.x.toFixed(2)}br Y: ${pose.position.y.toFixed(2)}br Z: ${pose.position.z.toFixed(2)} ; });5.2 显示位置信息在HTML中添加显示区域h2当前位置/h2 div idposition等待数据.../div5.3 电池状态监控const batteryListener new ROSLIB.Topic({ ros: ros, name: /battery, messageType: sensor_msgs/BatteryState }); batteryListener.subscribe((message) { const batteryLevel message.percentage * 100; document.getElementById(battery).textContent ${batteryLevel.toFixed(0)}%; // 根据电量改变颜色 const batteryElement document.getElementById(battery); if(batteryLevel 20) { batteryElement.style.color red; } else if(batteryLevel 50) { batteryElement.style.color orange; } else { batteryElement.style.color green; } });对应的HTMLh2电池状态/h2 div idbattery未知/div6. 高级功能与优化基础功能实现后我们可以考虑添加一些增强体验的功能。6.1 键盘控制添加键盘控制可以提升操作体验document.addEventListener(keydown, (event) { switch(event.key) { case ArrowUp: moveRobot(0.5, 0); break; case ArrowDown: moveRobot(-0.5, 0); break; case ArrowLeft: moveRobot(0, 0.5); break; case ArrowRight: moveRobot(0, -0.5); break; case : moveRobot(0, 0); break; } });6.2 自动重连机制网络不稳定时自动重连很有必要function setupConnection() { // ...之前的连接代码... ros.on(close, () { document.getElementById(status).textContent 连接断开尝试重连...; setTimeout(() { ros.connect(ws://window.location.hostname:9090); }, 3000); }); } setupConnection();6.3 性能优化技巧在实际项目中我总结了几个优化点节流控制指令避免发送过多指令使用二进制传输对于大数据量消息压缩消息特别是图像数据离线缓存缓存静态资源如URDF文件// 节流示例 let lastSendTime 0; function throttledMove(linear, angular) { const now Date.now(); if(now - lastSendTime 100) { // 每100ms最多发送一次 moveRobot(linear, angular); lastSendTime now; } }7. 安全考虑与部署建议将Web控制界面暴露在公网需要特别注意安全。7.1 安全措施启用认证配置rosbridge的认证使用HTTPS加密通信限制IP只允许特定IP访问速率限制防止滥用7.2 部署架构对于生产环境建议采用以下架构[用户浏览器] ←HTTPS→ [反向代理] ←WebSocket→ [rosbridge] ←ROS→ [机器人]Nginx配置示例server { listen 443 ssl; server_name yourdomain.com; ssl_certificate /path/to/cert.pem; ssl_certificate_key /path/to/key.pem; location / { proxy_pass http://localhost:9090; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection upgrade; } }8. 调试技巧与常见问题开发过程中难免会遇到各种问题这里分享一些调试经验。8.1 调试工具浏览器开发者工具查看控制台日志和网络请求rostopic工具验证消息是否正确发布rqt_graph可视化节点连接关系8.2 常见错误错误现象可能原因解决方案连接失败rosbridge未运行检查rosbridge服务状态消息未收到话题名称不匹配使用rostopic list验证延迟高网络问题检查网络状况考虑本地测试8.3 日志记录添加详细的日志有助于问题排查function log(message) { const timestamp new Date().toISOString(); console.log([${timestamp}] ${message}); // 也可以显示在页面上的日志区域 const logElement document.getElementById(log); if(logElement) { logElement.innerHTML [${timestamp}] ${message}br; } }在HTML中添加日志显示区域div idlog styleheight:200px;overflow:auto;border:1px solid #ccc;padding:5px;/div9. 扩展功能思路基础功能实现后可以考虑扩展更多实用功能。9.1 地图显示使用ros2djs显示二维地图script srchttps://static.robotwebtools.org/ros2djs/current/ros2d.min.js/script div idmap/div script const viewer new ROS2D.Viewer({ divID: map, width: 800, height: 600 }); const mapClient new ROS2D.OccupancyGridClient({ ros: ros, rootObject: viewer.scene, topic: /map, continuous: true }); /script9.2 三维模型查看使用ros3djs显示机器人模型script srchttps://static.robotwebtools.org/ros3djs/current/ros3d.min.js/script div idurdf/div script const urdfViewer new ROS3D.Viewer({ divID: urdf, width: 800, height: 600, antialias: true }); const urdfClient new ROS3D.UrdfClient({ ros: ros, tfClient: new ROS3D.TFClient({ros: ros}), rootObject: urdfViewer.scene, path: http://resources.robotwebtools.org/, loader: new ROS3D.COLLADA_LOADER() }); /script9.3 多机器人控制对于多机器人系统可以扩展为class RobotController { constructor(name) { this.name name; this.cmdVel new ROSLIB.Topic({ ros: ros, name: /${name}/cmd_vel, messageType: geometry_msgs/Twist }); } move(linear, angular) { const twist new ROSLIB.Message({ linear: { x: linear, y: 0, z: 0 }, angular: { x: 0, y: 0, z: angular } }); this.cmdVel.publish(twist); } } // 创建多个机器人实例 const robot1 new RobotController(robot1); const robot2 new RobotController(robot2);10. 完整示例代码以下是整合了所有功能的完整示例代码!DOCTYPE html html head meta charsetutf-8 title高级机器人Web控制器/title script srchttps://static.robotwebtools.org/roslibjs/current/roslib.min.js/script style .controls { margin: 20px 0; } button { padding: 10px; margin: 5px; } #map, #urdf { border: 1px solid #000; margin: 10px 0; } /style /head body h1高级机器人控制面板/h1 div idstatus未连接/div h2运动控制/h2 div classcontrols button onclickmoveRobot(0.5, 0)前进/button button onclickmoveRobot(-0.5, 0)后退/button button onclickmoveRobot(0, 0.5)左转/button button onclickmoveRobot(0, -0.5)右转/button button onclickmoveRobot(0, 0)停止/button /div div label线速度: input typerange idlinear min0 max1 step0.1 value0/label span idlinearValue0/span /div div label角速度: input typerange idangular min-1 max1 step0.1 value0/label span idangularValue0/span /div button onclicksendCustomVelocity()发送/button h2状态监控/h2 div idposition等待数据.../div div idbattery未知/div h2系统日志/h2 div idlog styleheight:200px;overflow:auto;border:1px solid #ccc;padding:5px;/div script // 初始化ROS连接 const ros new ROSLIB.Ros({ url: ws://window.location.hostname:9090 }); // 连接状态处理 ros.on(connection, () { updateStatus(已连接, green); log(成功连接到ROS); setupSubscribers(); }); ros.on(error, (error) { updateStatus(连接错误: error, red); log(连接错误: error); }); ros.on(close, () { updateStatus(连接断开尝试重连..., orange); log(连接断开3秒后尝试重连); setTimeout(() ros.connect(ws://window.location.hostname:9090), 3000); }); // 状态更新函数 function updateStatus(text, color) { const statusElement document.getElementById(status); statusElement.textContent text; statusElement.style.color color; } // 日志函数 function log(message) { const timestamp new Date().toLocaleTimeString(); console.log([${timestamp}] ${message}); const logElement document.getElementById(log); logElement.innerHTML [${timestamp}] ${message}br; logElement.scrollTop logElement.scrollHeight; } // 运动控制 const cmdVel new ROSLIB.Topic({ ros: ros, name: /cmd_vel, messageType: geometry_msgs/Twist }); function moveRobot(linearX, angularZ) { const twist new ROSLIB.Message({ linear: { x: linearX, y: 0, z: 0 }, angular: { x: 0, y: 0, z: angularZ } }); cmdVel.publish(twist); log(发送控制指令: 线速度${linearX}, 角速度${angularZ}); } // 滑块控制 document.getElementById(linear).addEventListener(input, (e) { document.getElementById(linearValue).textContent e.target.value; }); document.getElementById(angular).addEventListener(input, (e) { document.getElementById(angularValue).textContent e.target.value; }); function sendCustomVelocity() { const linear parseFloat(document.getElementById(linear).value); const angular parseFloat(document.getElementById(angular).value); moveRobot(linear, angular); } // 键盘控制 document.addEventListener(keydown, (event) { switch(event.key) { case ArrowUp: moveRobot(0.5, 0); break; case ArrowDown: moveRobot(-0.5, 0); break; case ArrowLeft: moveRobot(0, 0.5); break; case ArrowRight: moveRobot(0, -0.5); break; case : moveRobot(0, 0); break; } }); // 状态订阅 function setupSubscribers() { // 里程计 const odomListener new ROSLIB.Topic({ ros: ros, name: /odom, messageType: nav_msgs/Odometry }); odomListener.subscribe((message) { const pose message.pose.pose; document.getElementById(position).innerHTML X: ${pose.position.x.toFixed(2)}br Y: ${pose.position.y.toFixed(2)}br Z: ${pose.position.z.toFixed(2)} ; }); // 电池状态 const batteryListener new ROSLIB.Topic({ ros: ros, name: /battery, messageType: sensor_msgs/BatteryState }); batteryListener.subscribe((message) { const batteryLevel message.percentage * 100; const batteryElement document.getElementById(battery); batteryElement.textContent ${batteryLevel.toFixed(0)}%; if(batteryLevel 20) { batteryElement.style.color red; } else if(batteryLevel 50) { batteryElement.style.color orange; } else { batteryElement.style.color green; } }); log(订阅器已设置); } /script /body /html在最近的一个仓储机器人项目中这套Web控制系统成功替代了原有的桌面客户端使操作人员可以通过平板电脑或手机随时随地监控和控制机器人。实际使用中发现合理设置控制指令的发送频率对系统稳定性至关重要通常建议将控制指令限制在10Hz以下。
