1.パッケージをインストールします
sudo apt-get install ros-kinetic-rosbridge-suite
2.使用する
1.新しい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>
2.実行します
ROS Webを使用する場合、Web端末がROSホストに接続して端末で実行できるように、最初に起動ファイルを実行する必要があります。
roslaunch rosbridge_server rosbridge_websocket.launch
ディスプレイ：
新しいターミナルを開きます：
rosrun roscpp_tutorials talker
別のターミナルを開きます。
rostopic echo /cmd_vel
この操作の目的は、トーカーノード‘/chatter’メッセージによって公開されたトピックを対象とし、Web側でこのトピックサブスクリプション操作を容易にすることです。次に、ブラウザ.htmlファイルで開き、Webコンソールを開くと、次のインターフェイスが表示されます。
- F12をコンソールに
あなたはウェブを通してトピックを送受信することができます
現時点でのすべてのトピック
seivl@seivl-Default-string:~$ rostopic list
/chatter
/client_count
/cmd_vel
/connected_clients
/rosout
/rosout_agg
ノードをシャットダウンすると、コンソールは切断を求めるプロンプトも表示します。
3.リファレンス
- リファレンスブログ：rosとwebの相互作用