osc.js で OSC Data Monitor に OSC over UDP でデータを送る（Node.js の keypress との組み合わせ）

この記事は、最近書いていた記事の中で、以下の 2つに書かれている内容の続きです。

- [ブラウザで OSC を扱う初めの一歩（osc.js、osc-js、p5.js用ライブラリを見てみたりなど）【2021年9月】 - Qiita](https://qiita.com/youtoy/items/efe9b07be57454dec5d5)
- [ZIG SIM と Node.js のプログラム（osc.js を利用）との間で UDP による OSC通信を軽く試す（OSC Data Monitor の話も） - Qiita](https://qiita.com/youtoy/items/fddc750759f4ecef7ca7)

## 今回やること
今回は、[osc.js](https://github.com/colinbdclark/osc.js/) を使った Node.js　のプログラムから OSC Data Monitor に OSC over UDP でデータを送ってみます。

osc.js や OSC Data Monitor の情報は、[冒頭に書いた記事の 2つ目](https://qiita.com/youtoy/items/fddc750759f4ecef7ca7)をご参照ください。

## 通信を試す
### OSC Data Monitor の準備
OSC Data Monitor の準備は、[冒頭に書いた記事の 2つ目](https://qiita.com/youtoy/items/fddc750759f4ecef7ca7)と全く同じです。

8000番ポートで OSC のデータを待ち受けます。

### Node.js のプログラムの準備
受信側の用意はできたので、データの送信側を準備します。

動きとしては「特定のキーを押下したらデータを送信」という流れにしたかったので、osc.js と合わせて [keypress](https://www.npmjs.com/package/keypress) を使います。

npmコマンドで osc.js と keypress をインストールしておいてください。

```bash
$ npm install osc keypress
```

それぞれの公式ページのサンプルや説明を見て、以下のプログラムを作っていきました。
ちなみに、OSC Data Monitor も以下のプログラムも同じノートPC内で動かしています。

```javascript
const osc = require("osc");
const keypress = require("keypress");

var udpPort = new osc.UDPPort({
  localAddress: "0.0.0.0",
  localPort: 8001,
  remoteAddress: "0.0.0.0",
  remotePort: 8000,
  metadata: true,
});

udpPort.on("message", function (oscMsg, timeTag, info) {
  console.log("An OSC message just arrived!", oscMsg);
  console.log("Remote info is: ", info);
});

udpPort.on("ready", function () {
  console.log("ready");

  keypress(process.stdin);
  process.stdin.on("keypress", (ch, key) => {
    if ((key && key.ctrl && key.name === "c") || (key && key.name === "q")) {
      process.exit();
    }
    switch (key.name) {
      case "left":
        console.log("left");
        udpPort.send({
          address: "/carrier/frequency",
          args: [
            {
              type: "f",
              value: 420,
            },
          ],
        });
        break;
      case "right":
        console.log("right");
        udpPort.send({
          address: "/carrier/frequency",
          args: [
            {
              type: "f",
              value: 440,
            },
            {
              type: "f",
              value: 400,
            },
          ],
        });
        break;
    }
  });

  process.stdin.setRawMode(true);
  process.stdin.resume();
});

udpPort.on("error", function (err) {
  console.log(err);
});

udpPort.open();
```

内容としては、「ローカルの 8000番ポートに対してデータ送信をする設定をしていて、キーボードの右矢印キー・左矢印キーのどちらかを押すとメッセージを送信する」というものです。
今回は使わないですが、8001番ポートでの待ち受けの処理も含まれています。

### 動作確認
あとは、動作確認を行うだけです。

OSC Data Monitor を起動し、Node.js で作ったプログラムを実行します。
その後、キーボードの右矢印キー・左矢印キーを押して、OSC Data Monitor の表示を確認しましょう。

試してみると、以下のように受信側でメッセージを受けとることができていました。
![OSC_Data_Monitorの出力.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/0b5217d7-f3a7-3b76-07b4-6ee2d67af6ba.jpeg)

## おわりに
前に書いた記事と今回の記事とで、osc.js を用いた OSC over UDP によるメッセージの送受信を試すことができました。

今後は、Node.js で作ったプログラムと何か別のプログラムを連動させてみたり、osc.js による  OSC over WebSocket あたりの内容を試せればと思います。

## 【追記　】 OSC over WebSocket も試しました
その後、osc.js を用いた OSC over WebSocket も試して記事にしました。

●osc.js でブラウザから OSC Data Monitor に OSC over WebSocket でデータを送る（とりあえず片方向） - Qiita
　https://qiita.com/youtoy/items/0f170f4f86f6d7bf52ad

●p5.js Web Editor のプログラムから osc.js を使った OSC通信（OSC over WebSocket を利用） - Qiita
　https://qiita.com/youtoy/items/45bebdfb948b3f918c05