Web+ROS之1--通訊篇
阿新 • • 發佈：2020-12-29
準備工具：
工具包：rosbridge_suite功能包，roslibjs,ros2djs,ros3djs.
rosbridge_suite：實現web瀏覽器與ros之間的資料互動；
roslibjs：實現ros中的部分功能，如Topic，Service，URDF等；
ros2djs：提供了二維視覺化的管理工具，可以用來在web瀏覽器中顯示二維地圖；
ros3djs：提供了三維視覺化的管理工具，可以用來在web端顯示三維模型。
其中rosbridge_suite是最重要的，它是web和ros溝通的橋樑，roslibjs也是必須的，它能實現ros中最基本的功能，下面的例程就是用它來實現的。下載安裝方法如下：
在終端中分別輸入以下指令：
$ sudo apt-get install ros-melodic-rosbridge-suite
$ sudo clone https://github.com/RobotWebTools/roslibjs.git
$ sudo clone https://github.com/RobotWebTools/ros2djs
$ sudo clone https://github.com/RobotWebTools/ros3djs
完成之後回到工作空間catkin_make以及source devel/setup.bash一下，
然後使用touch建立一個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>
說明：
var ros = new ROSLIB.Ros({
url : 'ws://localhost:9090'
});這段程式碼建立了一個ROSLIB.ros物件，用於連線rosbridge伺服器，如果rosbridge伺服器位於本機，url設定中可用localhost代表IP地址，否則需要修改為rosbridge伺服器對於的IP地址。
var cmdVel = new ROSLIB.Topic({
ros : ros,
name : '/cmd_vel',
messageTpye : 'geometry_msgs/Twist'
});建立了一個ROSLIB.Topic物件，用於在這個話題上釋出或訂閱訊息。
之後在新的終端中執行：
$ roslaunch rosbridge_server rosbridge_websocket.launch然後在新的終端中執行：
$ ros run roscpp_tutorials talker然後在瀏覽器中開啟example.html檔案，並開啟web控制檯，進行測試。
可以在新的終端執行rqt_graph得到當前ROS系統中的計算圖，完成通訊測試。