当前位置：首页 > news >正文

ROS1通过rosbridge在局域网中控制turtle进行运动（PC和手机）

news 2026/2/8 21:43:15

通过ROSbridge控制小海龟（turtlesim）的具体案例。使用一个简单的Python脚本通过通过局域网上连接上传ROSbridge服务器，并发送速度指令来控制小海龟的移动
功能包的结构如下：
在这里插入图片描述

HTML文件的编写（界面）

html用于存放html文件，内容包含了可以通过前进，后退，左转，右转，停止等动作，在这里已经编写好了，最后的效果如下图：
在这里插入图片描述
在这里附上程序源码，将源码复制自己的目录的当中即可，也不一定是要在自己的功能包当中

<!DOCTYPE html>  
<html lang="en">  
<head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>Turtle Control</title>  <style>  /* 简单的样式 */  body {  font-family: Arial, sans-serif;  text-align: center;  }  button {  margin: 10px;  padding: 10px 20px;  font-size: 16px;  }  </style>  
</head>  
<body>  <h1>Turtle Control</h1>  <button id="forwardButton">前进</button>  <button id="backwardButton">后退</button>  <button id="leftButton">左转</button>  <button id="rightButton">右转</button>  <button id="stopButton">停止</button>  <script src="../js/turtle_control.js"></script>  
</body>  
</html>

在上述的html文件当中，会用到一个叫turtle_control.js的文件，这个文件就是后续需要通过编写然后给ROS系统传递信息。路径需要自行记住。

JS文件的编写（发送控制消息）

同样的通过编写js文件，语法就是经典的JavaScript，程序源码如下：
下面的程序当中，192.168.31.110要更换成自己的 ip地址，后面的9090要记住，后面调用rosbridge 的时候会用得上。

// WebSocket连接信息  
const wsUri = "ws://192.168.31.110:9090";  
let socket = new WebSocket(wsUri);  // 定义速度消息  
function createVelocityCommand(linear, angular) {  return JSON.stringify({  op: "publish",  type: "geometry_msgs/Twist",  topic: "/turtle1/cmd_vel",  msg: {  linear: { x: linear, y: 0, z: 0 },  angular: { x: 0, y: 0, z: angular }  }  });  
}  // 处理WebSocket连接打开  
socket.onopen = function(event) {  console.log("Connected to ROSbridge");  
};  // 处理WebSocket接收到的消息  
socket.onmessage = function(event) {  console.log("Received:", event.data);  
};  // 处理WebSocket错误  
socket.onerror = function(error) {  console.error("WebSocket Error:", error);  
};  // 处理按钮点击事件  
document.getElementById('forwardButton').addEventListener('click', function() {  socket.send(createVelocityCommand(1, 0)); // 前进  
});  document.getElementById('backwardButton').addEventListener('click', function() {  socket.send(createVelocityCommand(-1, 0)); // 后退  
});  document.getElementById('leftButton').addEventListener('click', function() {  socket.send(createVelocityCommand(0, 1)); // 左转  
});  document.getElementById('rightButton').addEventListener('click', function() {  socket.send(createVelocityCommand(0, -1)); // 右转  
});  document.getElementById('stopButton').addEventListener('click', function() {  socket.send(createVelocityCommand(0, 0)); // 停止  
});  // 可以在这里添加更多的逻辑，比如处理关闭连接等

安装rosbridge_suite包

确保你已经安装了ROS和rosbridge_suite包。你可以通过以下命令安装它们（以ROS Noetic为例）：

sudo apt-get install ros-noetic-rosbridge-suite

开始执行

然后，启动ROScore和小海龟仿真器：

roscore
rosrun turtlesim turtlesim_node

接下来，启动ROSbridge WebSocket服务器。你可以使用rosbridge_websocket包来做到这一点：

rosrun rosbridge_server rosbridge_websocket

在这里为了方便，我写成了一个launch文件同时启动这两个节点，程序内容如下：

<?xml version="1.0"?>
<launch><node pkg="turtlesim" type="turtlesim_node" name="turtle1" output="screen"/><node pkg="rosbridge_server" type="rosbridge_websocket" name="rosbridge_server" output="screen"/>
</launch>

接着就可以按部就班的执行了

新建一个命令行终端，输入指令roslaunch web_rosbridge web_rosbridge.launch
然后再新建一个命令行终端，接着输入指令python3 -m http.server 8080

这两个指令的ip地址要区分开rosbridge通信的地址是的localhost:9090，而上传到本地的服务端用到的是8080端口，也就是我们只需要通过查看自己的设备在同一个局域网下的ip地址，后面跟上8080，就可以访问了，还有就是需要注意的就是输入第二个指令执行这个http.server服务的时候，尽量在自己html目录下进行执行，方便打开对应的ip地址直接可以进行查看。

同样的我们通过手机，连接上同样的局域网之后，接着输入自己手机的ip地址到浏览器上，记得加上对应的8080号端口，效果如下：
在这里插入图片描述

🌸🌸🌸完结撒花🌸🌸🌸

🌈🌈Redamancy🌈🌈

ROS1通过rosbridge在局域网中控制turtle进行运动（PC和手机）

HTML文件的编写（界面）

JS文件的编写（发送控制消息）

安装rosbridge_suite包

开始执行

相关文章：

ROS1通过rosbridge在局域网中控制turtle进行运动（PC和手机）

MQ高级篇---消息可靠性

SpringMVC | SpringMVC中的 “文件上传和下载”

JVM快速入门（2）HotSpot和堆、新生区、永久区、堆内存调优、JProfiler工具分析OOM原因、GC（垃圾回收）、JVM经典面试笔试题整理

我的风采——android studio

BMS设计中的短路保护和MOSFET选型（上）

用go实现一个任务调度类（泛型）

ansible 管理工具以及常用模块

javaSSM公司招聘管理系统IDEA开发mysql数据库web结构计算机java编程maven项目

蓝桥杯day11刷题日记

IDEA, Pycharm, Goland控制台乱码

JavaScript单元测试jasmine学习（一）

108、3D Gaussian Splatting for Real-Time Radiance Field Rendering

PHP之CURL和Socket

【Web】NKCTF 2024 个人wp(部分)

QT常见布局器使用

政安晨：【深度学习部署】—— TensorFlow Extended（TFX）介绍

宝石与石头

【Vue3之computed属性（四）】

生产力工具|安装更新R软件（R、studio）

Android Wi-Fi 连接失败日志分析

stm32G473的flash模式是单bank还是双bank？

论文解读：交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架（二）

Java 语言特性(面试系列1)

Vue2 第一节_Vue2上手_插值表达式{{}}_访问数据和修改数据_Vue开发者工具

Spring数据访问模块设计

基于IDIG-GAN的小样本电机轴承故障诊断

苹果AI眼镜：从“工具”到“社交姿态”的范式革命——重新定义AI交互入口的未来机会

从“安全密码”到测试体系：Gitee Test 赋能关键领域软件质量保障

【SpringBoot自动化部署】