ros2与web通信实例

这篇具有很好参考价值的文章主要介绍了ros2与web通信实例。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

ros2与web通信实例

最近需要进行ros2与web端进行通信操作,目标是ros2发送的消息web端能够显示在界面,并且前端能够发布数据,最终实例如下:
ros2 web,websocket,c++
然而网上查的的资料如古月居的:

利用Websocket实现ROS与Web的交互
https://www.guyuehome.com/5386

包括ros官网上以及目前网上绝大部分资料都是ros1与web交互的
http://wiki.ros.org/roslibjs/Tutorials/BasicRosFunctionality

使用它们的资料将会出现非常多的麻烦,本人经过艰难的查找和验证终于成功实现ros2与web交互,记录如何在前人ros1的基础上进行修改,实现ros2与web交互

1、下载rosbridge-suite

介绍以下所需要的工具包:rosbridge_suite功能包,roslibjs,ros2djs,ros3djs。
rosbridge_suite:实现Web浏览器与ROS之间的数据交互;

roslibjs:实现了ROS中的部分功能,如Topic,Service,URDF等;

ros2djs:提供了二维可视化的管理工具,可以用来在Web浏览器中显示二维地图;

ros3djs:提供了三维可视化的管理工具,可以在Web端显示三维模型。

在这几个功能包中,rosbridge_suite是最重要的,它是Web和ROS沟通的桥梁,roslibjs也是必须的,它能实现ROS中最基本的功能,下面的例程就是用它来实现的,至于ros2djs和ros3djs是后期开发所需要的,对于新手来说可以暂时不用下载。它们的下载安装方法如下,在终端中分别输入以下指令:

请注意第一句的:

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

kinetic是ros的不同版本,请换成自己的ros版本,本人使用的是humble版本的

sudo apt-get install ros-kinetic-rosbridge-suite
git clone https://github.com/RobotWebTools/roslibjs.git
git clone https://github.com/RobotWebTools/ros2djs
git clone https://github.com/RobotWebTools/ros3djs

2、再运行launch文件

ros1的命令如下
roslaunch rosbridge_server rosbridge_websocket.launch

但是rosbridge是经过更新的,没有rosbridge_websocket.launch
ros2的命令应该改成如下形式:

ros2 launch rosbridge_server rosbridge_websocket_launch.xml

3、打开example.html

运行了这个launch文件后,只需要在浏览器中打开我们设计的html文件就能够实现Web端与ROS的交互了。下面来看一个简单的example.html的例子。

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />

<script type="text/javascript" src="http://static.robotwebtools.org/EventEmitter2/current/eventemitter2.min.js"></script>
<script type="text/javascript" src="http://static.robotwebtools.org/roslibjs/current/roslib.min.js"></script>

<script type="text/javascript" type="text/javascript">
  // Connecting to ROS
  var ros = new ROSLIB.Ros({
    url : 'ws://localhost:9090'
  });

  //判断是否连接成功并输出相应的提示消息到web控制台
  ros.on('connection', function() {
    console.log('Connected to websocket server.');
  });

  ros.on('error', function(error) {
    console.log('Error connecting to websocket server: ', error);
  });

  ros.on('close', function() {
    console.log('Connection to websocket server closed.');
  });

  // Publishing a Topic
  var cmdVel = new ROSLIB.Topic({
    ros : ros,
    name : '/cmd_vel',
    messageType : 'geometry_msgs/Twist'
  });//创建一个topic,它的名字是'/cmd_vel',,消息类型是'geometry_msgs/Twist'

  var twist = new ROSLIB.Message({
    linear : {
      x : 0.1,
      y : 0.2,
      z : 0.3
    },
    angular : {
      x : -0.1,
      y : -0.2,
      z : -0.3
    }
  });//创建一个message

  function func()//在点击”Publish”按钮后发布消息,并对消息进行更改
  {
    cmdVel.publish(twist);//发布twist消息
    twist.linear.x = twist.linear.x + 0.1;
    twist.linear.y = twist.linear.y + 0.1;
    twist.linear.z = twist.linear.z + 0.1;
    twist.angular.x = twist.angular.x + 0.1;
    twist.angular.y = twist.angular.y + 0.1;
    twist.angular.z = twist.angular.z + 0.1;
  }

  // Subscribing to a Topic
  var listener = new ROSLIB.Topic({
    ros : ros,
    name : '/chatter',
    messageType : 'std_msgs/String'
  });//创建一个topic,它的名字是'/chatter',,消息类型是'std_msgs/String'

  function subscribe()//在点击”Subscribe”按钮后订阅'/chatter'的消息,并将其显示到网页中
  {
     listener.subscribe(function(message) {
       document.getElementById("output").innerHTML = ('Received message on ' + listener.name + ': ' + message.data);
     });
  }

  function unsubscribe()//在点击”Unsubscribe”按钮后取消订阅'/chatter'的消息
  {
     listener.unsubscribe();
  }

</script>
</head>

<body>
  <h1>Simple roslib Example</h1>
  <p>Check your Web Console for output.</p>
  <p id = "output"></p>
  <button onclick = "func()">Publish</button>
  <button onclick = "subscribe()">Subscribe</button>
  <button onclick = "unsubscribe()">Unsubscribe</button><br />
</body>
</html>

请注意上面这两个 .js 链接已经失效了,需要自己换成新的连接或下载到本地下面是最新的地址,本人是直接下载到本地的

http://static.robotwebtools.org/EventEmitter2/current/eventemitter2.min.js
http://static.robotwebtools.org/roslibjs/current/roslib.min.js

最新的两个.js下载地址如下:

https://github.com/RobotWebTools/roslibjs
https://github.com/EventEmitter2/EventEmitter2

这是本人下载到本地后调用的修改,注意改成自己的地址

<script type="text/javascript" src="/root/myjs/EventEmitter2-master/lib/eventemitter2.js"></script>
<script type="text/javascript" src="/root/myjs/roslibjs-develop/build/roslib.min.js"></script>

4、启动talker

原文的这一步也有问题,建议修改成自己编写的talker

rosrun  roscpp_tutorials  talker

本人自己写的talker如下:

/*
  send "hello wordl!" with a fixed-frequency and add 1 to the number for each data sent
*/
// 1.include header files
#include "rclcpp/rclcpp.hpp"
#include "std_msgs/msg/string.hpp"

using namespace std::chrono_literals;
// 3.define node class
class MinimalPublisher: public rclcpp:: Node{
  
  public:
    MinimalPublisher(): Node("minimal_publisher"),count(0)
    {
      RCLCPP_INFO(this->get_logger(),"create the publish node!");
      // 3-1 create a publisher
      /*
        template:the type of messages published
        parameter:
          1.topic name
          2.QOS(Quality of Service) message queue length
        return:publish object pointer
      */
      publisher_ = this->create_publisher<std_msgs::msg::String>("/chatter",10);
      // 3-2 create a timer
      /*
        parameter:
          1.time interval
          2.callback function
        return:timer object pointer
      
      */
      
      timer_ = this->create_wall_timer(1s, std::bind(&MinimalPublisher::timer_callback,this));
    }
  private:
    void timer_callback()
    {
      // 3-3 organize messages and publish them
      auto message = std_msgs::msg::String();
      message.data = "Hello world!" + std::to_string(count++);
      RCLCPP_INFO(this->get_logger(), "Published message: '%s'",message.data.c_str());
      publisher_->publish(message);
    }
    rclcpp::TimerBase::SharedPtr timer_;
    rclcpp::Publisher<std_msgs::msg::String>::SharedPtr publisher_;
    size_t count;
};
int main(int argc,char const *argv[]){
    // 2.initialize ROS2 client
    rclcpp::init(argc,argv);
    // 4.call the spin function and pass in the node object pointer
    rclcpp::spin(std::make_shared<MinimalPublisher>());
    // 5.release resources
    rclcpp::shutdown();
    return 0;
}

点击web上的Subscribe后可以看到web的订阅话题,自己对着这个话题编写ros2发布方程序就可以了

ros2 web,websocket,c++

5、启动listener

先运行

ros2 topic list

然后点击web端的Publish就可以从web端发送信息到ros2
ros2 web,websocket,c++
参考链接:

古月居的利用Websocket实现ROS与Web的交互
https://www.guyuehome.com/5386

ros官网
http://wiki.ros.org/roslibjs/Tutorials/BasicRosFunctionality文章来源地址https://www.toymoban.com/news/detail-831329.html

到了这里,关于ros2与web通信实例的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • ESP32中micro-ROS与ROS2通信(点亮esp32指示灯)

    micro-ROS,是基于ROS2进行优化的一套轻量级ROS系统,它提供了完全部署的ROS 2生态系统的大多数吸引人的工具和功能,并具有入式和低资源设备的卓越能力,可以运行在MCU硬件平台。 传统上,即使机器人包含许多ROS,ROS仍停留在微控制器边界。它们通常通过串行协议与旧版RO

    2024年02月01日
    浏览(44)
  • 使用在 Web 浏览器中运行的 VSCode 实现 ROS2 测程法

                    Hadabot是软件工程师学习ROS2和机器人技术的机器人套件。我们距离Hadabot套件的测试版还有一周左右的时间。我们将在本文末尾披露有关如何注册的更多信息。         新的Hadabot套件完全支持ROS2。除了硬件套件外,Hadabot软件环境将主要基于Web浏览器,以

    2024年02月12日
    浏览(48)
  • Web端即时通信技术-WebSocket

    最近在做项目的时候,遇到了一个前端页面需要实时刷新的功能,一种方法是我们通过短轮询的方式,但这种方式虽然简单,但是无用的请求过多,占用资源,并且如果是对数据要求高较高的场景,就不适用了。   这个时候就要考虑应用长连接了,最开始想到的是,Http1.1以

    2024年02月06日
    浏览(56)
  • 【ROS2】为什么要使用ROS2?《ROS2系统特性介绍》

    2010年,ROS1首次发布正式版本,其研发的初衷是为设计PR2(个人服务型机器人)共用的软件架构。但随着ROS1技术的普及,ROS1开始广泛融入各领域无人系统的研发,陆续暴露了系统的诸多问题。为了适应新时代机器人研发的需要,2022年5月,ROS开发者团队推出新版本ROS2。 2007年

    2024年02月09日
    浏览(41)
  • 通过ros系统中websocket中发送sensor_msgs::Image数据给web端显示

     图片数据转成base64编码方式

    2024年01月21日
    浏览(48)
  • 【ROS2指南-4】理解ROS2话题

    目标: 使用 rqt_graph 和命令行工具来反思 ROS 2 主题。 教程级别: 初学者 时间: 20分钟 内容 背景 先决条件 任务 1 设置 2 rqt_graph 3 ros2主题列表 4 ros2主题回显 5 ros2 主题信息 6 ros2界面展示 7 ros2主题发布 8 ros2 主题赫兹 9 清理 概括 下一步 ROS 2 将复杂的系统分解为许多模块化节

    2023年04月19日
    浏览(48)
  • 【ROS2指南-11】创建ROS2功能包

    目标: 使用 CMake 或 Python 创建一个新包,并运行其可执行文件。 教程级别: 初学者 时间: 15分钟 内容 背景 1 什么是 ROS 2 包? 2 什么构成了 ROS 2 包? 3 工作区中的包 先决条件 任务 1 创建一个包 2 构建一个包 3 获取安装文件 4 使用包 5 检查包装内容 6 自定义 package.xml 概括

    2024年02月04日
    浏览(42)
  • 【ros2】ros2环境安装与基础入门

    😏 ★,° :.☆( ̄▽ ̄)/$: .°★ 😏 这篇文章主要介绍ros2环境安装与基础入门。 学其所用,用其所学。——梁启超 欢迎来到我的博客,一起学习,共同进步。 喜欢的朋友可以关注一下,下次更新不迷路🥞 ROS 2 (Robot Operating System 2)是一个开源的机器人操作系统,它是ROS(Robot

    2024年02月09日
    浏览(45)
  • 【ROS2指南-7】理解ROS2的Action

    目标: 理解并学习ROS 2 中的Action通信方式。 教程级别: 初学者 时间: 15分钟 内容 背景 先决条件 任务 1 设置 2 使用动作 3 ros2节点信息 4 ros2 动作列表 5 ros2 动作信息 6 ros2界面展示 7 ros2 动作 send_goal 概括 下一步 相关内容 动作是 ROS 2 中的一种通信类型,用于长时间运行的任

    2023年04月16日
    浏览(50)
  • 【ROS2机器人入门到实战】2.ROS与ROS2对比

    当前平台文章汇总地址:ROS2机器人从入门到实战 获取完整教程及配套资料代码,请关注公众号鱼香ROS获取 教程配套机器人开发平台:两驱版| 四驱版 为方便交流,搭建了机器人技术问答社区:地址 fishros.org.cn 经过上一节的学习,相信你已经对ROS和ROS2的发展有了一定的了解

    2024年02月04日
    浏览(48)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包