[rosbridge]ros与web连接------windows情况下和ubuntu情况下

最新推荐文章于 2024-03-18 09:44:24 发布

xuan196

最新推荐文章于 2024-03-18 09:44:24 发布

阅读量2.9k

点赞数

分类专栏：璇の学习记录文章标签： python

本文链接：https://blog.csdn.net/xuan196/article/details/108365865

版权

璇の学习记录专栏收录该内容

23 篇文章 4 订阅

订阅专栏

主要参考文章：
https://mp.weixin.qq.com/s/dWzBzn5UJN3KGgrhq1nvtA

ros和web连接

一、下载相关功能包

ubuntu端

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
//ros2djs 和ros3djs 暂时未用到

尝试在windows系统下，使用web和ros连接
下载地址：
https://github.com/RobotWebTools/roslibjs

二、在ubuntu下使用web和ros连接

（1）使用第一步下载的roslibjs中的列子
/roslibjs/examples/simple.html
双击运行它
出现界面：
在这里插入图片描述

执行以下命令，开启rosbridge服务器，即可连接web

roslaunch rosbridge_server rosbridge_websocket.launch

执行以下命令

rosrun rospy_tutorials add_two_ints_server
rostopic echo /cmd_vel

刷新web端，出现
在这里插入图片描述

三、在windows端使用web和ros连接

要点：确保ubuntu端和windows端在一个局域网下，连接同一个wifi。
我使用的是虚拟机和主机连接，虚拟机选用桥接模式。
虚拟机ip地址：192.168.0.105
主机ip地址：192.168.0.100

ubuntu终端命令，开启rosbridge服务器，协议方式websocket：

roslaunch rosbridge_server rosbridge_websocket.launch

windows端，修改simple.html代码。
原来的代码

 // Create a connection to the rosbridge WebSocket server.
  ros.connect('ws://localhost:9090');

将localhost替换为虚拟机的ip地址即可。
修改为：

 // Create a connection to the rosbridge WebSocket server.
  ros.connect('ws://192.168.0.105:9090');

运行simple.html，发现已经连接了。

四、simple.html源码

!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="https://static.robotwebtools.org/EventEmitter2/current/eventemitter2.min.js"></script>
<script src="../build/roslib.js"></script>

<script>
  // Connecting to ROS  与ros连接
  // -----------------
  var ros = new ROSLIB.Ros();

  // If there is an error on the backend, an 'error' emit will be emitted.  出现错误，发出错误提醒
  ros.on('error', function(error) {
    document.getElementById('connecting').style.display = 'none';
    document.getElementById('connected').style.display = 'none';
    document.getElementById('closed').style.display = 'none';
    document.getElementById('error').style.display = 'inline';
    console.log(error);
  });

  // Find out exactly when we made a connection.
  ros.on('connection', function() {
    console.log('Connection made!');
    document.getElementById('connecting').style.display = 'none';
    document.getElementById('error').style.display = 'none';
    document.getElementById('closed').style.display = 'none';
    document.getElementById('connected').style.display = 'inline';
  });

  ros.on('close', function() {
    console.log('Connection closed.');
    document.getElementById('connecting').style.display = 'none';
    document.getElementById('connected').style.display = 'none';
    document.getElementById('closed').style.display = 'inline';
  });

  // Create a connection to the rosbridge WebSocket server.与rosbridge websocket 服务器连接，服务器位于ubuntu系统上
  ros.connect('ws://localhost:9090');

  // Publishing a Topic  发布话题
  // ------------------

  // First, we create a Topic object with details of the topic's name and message type.   创造一个话题对象，包含话题的名字和消息类型
  var cmdVel = new ROSLIB.Topic({
    ros : ros,
    name : '/cmd_vel',
    messageType : 'geometry_msgs/Twist'
  });

  // Then we create the payload to be published. The object we pass in to ros.Message matches the
  // fields defined in the geometry_msgs/Twist.msg definition.    message与"geometry_msgs定义中的字段匹配。 根据你要发布的话题类型来设置。
  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
    }
  });

  // And finally, publish.
  cmdVel.publish(twist);

  //Subscribing to a Topic   订阅一个话题
  //----------------------

  // Like when publishing a topic, we first create a Topic object with details of the topic's name
  // and message type. Note that we can call publish or subscribe on the same topic object.
  var listener = new ROSLIB.Topic({
    ros : ros,
    name : '/listener',
    messageType : 'std_msgs/String'
  });

  // Then we add a callback to be called every time a message is published on this topic.
  listener.subscribe(function(message) {
    console.log('Received message on ' + listener.name + ': ' + message.data);

    // If desired, we can unsubscribe from the topic as well.
    listener.unsubscribe();
  });

  // Calling a service  调用服务
  // -----------------

  // First, we create a Service client with details of the service's name and service type.
  var addTwoIntsClient = new ROSLIB.Service({
    ros : ros,
    name : '/add_two_ints',
    serviceType : 'rospy_tutorials/AddTwoInts'
  });

  // Then we create a Service Request. The object we pass in to ROSLIB.ServiceRequest matches the
  // fields defined in the rospy_tutorials AddTwoInts.srv file.
  var request = new ROSLIB.ServiceRequest({
    a : 1,
    b : 2
  });

  // Finally, we call the /add_two_ints service and get back the results in the callback. The result
  // is a ROSLIB.ServiceResponse object.
  addTwoIntsClient.callService(request, function(result) {
    console.log('Result for service call on ' + addTwoIntsClient.name + ': ' + result.sum);
  });

  // Advertising a Service
  // ---------------------

  // The Service object does double duty for both calling and advertising services
  var setBoolServer = new ROSLIB.Service({
    ros : ros,
    name : '/set_bool',
    serviceType : 'std_srvs/SetBool'
  });

  // Use the advertise() method to indicate that we want to provide this service
  setBoolServer.advertise(function(request, response) {
    console.log('Received service request on ' + setBoolServer.name + ': ' + request.data);
    response['success'] = true;
    response['message'] = 'Set successfully';
    return true;
  });

  // Setting a param value
  // ---------------------

  ros.getParams(function(params) {
    console.log(params);
  });

  // First, we create a Param object with the name of the param.
  var maxVelX = new ROSLIB.Param({
    ros : ros,
    name : 'max_vel_y'
  });

  //Then we set the value of the param, which is sent to the ROS Parameter Server.
  maxVelX.set(0.8);
  maxVelX.get(function(value) {
    console.log('MAX VAL: ' + value);
  });

  // Getting a param value
  // ---------------------

  var favoriteColor = new ROSLIB.Param({
    ros : ros,
    name : 'favorite_color'
  });

  favoriteColor.set('red');
  favoriteColor.get(function(value) {
    console.log('My robot\'s favorite color is ' + value);
  });
</script>
</head>

<body>
  <h1>Simple roslib Example</h1>
  <p>Run the following commands in the terminal then refresh this page. Check the JavaScript
    console for the output.</p>
  <ol>
    <li><tt>roscore</tt></li>
    <li><tt>rostopic pub /listener std_msgs/String "Hello, World"</tt></li>
    <li><tt>rostopic echo /cmd_vel</tt></li>
    <li><tt>rosrun rospy_tutorials add_two_ints_server</tt></li>
    <li><tt>roslaunch rosbridge_server rosbridge_websocket.launch</tt></li>
  </ol>
  <div id="statusIndicator">
    <p id="connecting">
      Connecting to rosbridge...
    </p>
    <p id="connected" style="color:#00D600; display:none">
      Connected
    </p>
    <p id="error" style="color:#FF0000; display:none">
      Error in the backend!
    </p>
    <p id="closed" style="display:none">
      Connection closed.
    </p>
  </div>
</body>
</html>

xuan196

关注

0
点赞
踩
22

收藏

觉得还不错? 一键收藏
6
评论
[rosbridge]ros与web连接------windows情况下和ubuntu情况下

主要参考文章：https://mp.weixin.qq.com/s/dWzBzn5UJN3KGgrhq1nvtAros和web连接一、下载相关功能包二、在ubuntu下使用web和ros连接三、在windows端使用web和ros连接四、simple.html源码一、下载相关功能包ubuntu端sudo apt-get install ros-kinetic-rosbridge-suitegit clone https://github.com/RobotWebTools/roslibjs.gi
复制链接

扫一扫