Pub/Subしよう

では、roslibjsを使って、ブラウザからROSのTopicをSubscribe, Publishしてみましょう。

ブラウザ上で動的に動作するプログラムを書くには、JavaScriptという言語を使用します。roslibjsは、このJavaScriptからROSの機能を利用できるようにするライブラリです。このライブラリのファイルを、roslibjs.min.jsをダウンロードすることで入手しましょう。

以下の3ファイルを、wwwディレクトリに配置します。index.htmlとscript.jsは、講習資料のsample/pubsubにあるものをコピーしましょう。

index.html
script.js
roslib.min.js

HTMLの<head>タグ内に、以下のように記述します。これにより、index.htmlをブラウザで開いたときに、roslib.min.jsとscript.jsが読み込まれるようになります。

<script src="./roslib.min.js" defer></script>
<script src="./script.js" defer></script>

あなたのプログラムは、script.jsに書き込んでいきましょう。

では、公式ドキュメントを参考に、ブラウザから適当なTopicをSubscribe, Publishしてみましょう。ただし、ドキュメントでは変数宣言にvarを用いていますが、今日日使わない古い記法なので、constまたはletを使うようにしましょう。基本的にはなんでもかんでもconstで大丈夫です。この文書はJavaScriptの詳細には立ち入らないので、詳しい解説は省略します。

トピックの記述

rosmasterとの接続などは、前述の公式ドキュメントを参照してください。ここでは、トピック周りの記述についてのみ説明します。 roscppとの相違点として特筆すべきこととして、roslibjsでは、publisherとsubscriberを同じTopic構造体で扱うことです。ですから、以下のようなコードで、/cmd_velというTopicに対して、PublishとSubscribeを同時に行うことができます。

const cmd_vel = new ROSLIB.Topic({
ros : ros,
name : '/cmd_vel',
messageType : 'std_msgs/Int32'
});

Publish

const vel = new ROSLIB.Message({
    data: 50
})
cmd_vel.publish(angle);

メッセージは、ROSの.msgファイルに書いてある定義の中身の通りに書きましょう。今回はstd_msgs/Int32を使っているので、dataという変数に値を入れています。標準型の.msgファイルは、こちらから確認できます。

cmd_vel.subscribe(function (message) {
    // ここに、Subscribeしたときの処理を書く
    console.log('Received message on ' + cmd_vel.name + '. It says : ' + message.data);
});

参考サイト

roslibjsのリファレンス

前（パッケージへの導入）