rosbridge_suite介绍及应用

rosbridge_suite包是一个包集合,用于实现rosbridge协议和提供WebSocket传输层。

包含如下几个包:

  • rosbridge_library - 核心rosbridge包。rosbridge_library负责获取JSON字符串并将命令发送到ROS,反之亦然。
  • rosapi - 通过服务调用使某些ROS actions可访问。 这包括获取和设置参数,获取主题列表等。
  • rosbridge_server - 虽然rosbridge_library提供了JSON ROS转换,但它将传输层留给其他人。
    • Rosbridge_server提供了一个WebSocket连接,所以浏览器可以“与rosbridge交谈”。
    • Roslibjs是一个浏览器的JavaScript库,可以通过rosbridge_server与ROS交谈。

rosbridge安装

sudo apt install ros-melodic-rosbridge-suite

利用Websocket实现ROS与Web的交互

![[Pasted image 20211026161817.png]]

(1)运行rosbridge_websocket.launch

roslaunch rosbridge_server rosbridge_websocket.launch

(2)发布一个talker话题(后面websocket会订阅这个话题)

rosrun roscpp_tutorials talker

(3)订阅(打印输出)一个cmd_vel话题(后面websocket会发布这个话题)

rostopic echo /cmd_vel

(4)创建一个Websocket客户端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>

(5)在浏览器中打开example.html文件,并打开Web控制台(鼠标右键->Inspect->Console),将出现以下界面:
在这里插入图片描述
在控制台中,可以看到“Connected to websocket server”的提示信息,说明Web端与ROS端成功连接了起来。
点击几次网页中的Publish按钮,会在终端中打印输出cmd_vel的数据。 这说明Web端成功地发布了/cmd_vel话题的消息。

在网页中点击Subscribe按钮,将会在网页中看到如下界面:
![[Pasted image 20211026163444.png]]
这说明Web端成功地订阅了talker节点发布的消息,然后点击Unsubscribe按钮,结束对于该话题的订阅操作。

也可以在新终端中运行rqt_graph命令,得到当前ROS系统中的计算图,类似于下图:
![[Pasted image 20211026163619.png]]
从该图中我们可以看出,rosbridge_websocket节点订阅了名为/chatter的topic,发布了名为/cmd_vel的topic。

参考链接:
[1] 利用Websocket实现ROS与Web的交互

  • 5
    点赞
  • 22
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值