ros2与web通信实例

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

利用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 ROSvar 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 Topicvar 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}});//创建一个messagefunction 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 Topicvar 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 publishedparameter:1.topic name2.QOS(Quality of Service) message queue lengthreturn:publish object pointer*/publisher_ = this->create_publisher<std_msgs::msg::String>("/chatter",10);// 3-2 create a timer/*parameter:1.time interval2.callback functionreturn: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 themauto 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 clientrclcpp::init(argc,argv);// 4.call the spin function and pass in the node object pointerrclcpp::spin(std::make_shared<MinimalPublisher>());// 5.release resourcesrclcpp::shutdown();return 0;
}