osc.js でブラウザから OSC Data Monitor に OSC over WebSocket でデータを送る（とりあえず片方向） #JavaScript

過去に OSC を使った記事をいくつか書いていたのですが、今回の記事はその中の以下に近いものです。

●osc.js で OSC Data Monitor に OSC over UDP でデータを送る（Node.js の keypress との組み合わせ） - Qiita
　https://qiita.com/youtoy/items/740686a8d2ffb0c6b8ba

上記は、Node.js のプログラムのみを使って OSC over UDP を使うものでしたが、今回はブラウザ上の JavaScript のプログラムから OSC over WebSocket でデータを送ります。
※ ブラウザ上では UDP を直接扱えないため、WebSocket の上にのる形になります

正確には、Node.js で作った仲介役を介して OSC Data Monitor にデータを送るような構成です。
そして、自分がこの後にやりたい事は、ブラウザから送信する側だけあれば良いので、その部分は片方向の通信を実装する形です（ちょっと処理を足せば、双方向もできてしまいますが）。

osc.js と OSC Data Monitor の間の通信

OSC Data Monitor について

OSC Data Monitor は、OSC で送られたデータの情報を、GUI上に表示してくれるアプリです（※ Windows、Mac、Linux　のそれぞれで利用可能）。
関連リンク等については、以下の記事の中の「OSC Data Monitor」という部分の説明などをご参照ください。

●ZIG SIM と Node.js のプログラム（osc.js を利用）との間で UDP による OSC通信を軽く試す（OSC Data Monitor の話も） - Qiita
　https://qiita.com/youtoy/items/fddc750759f4ecef7ca7

osc.js の OSC over WebSocket

まずは、osc.js を使って OSC over WebSocket の通信を実現する方法を確認します。

ちなみに、以下の赤線をひいた部分が WebSocket の話で、それ以外でシリアル通信などにも対応しているようです。

ページの中を見ていくと、ブラウザ側の実装と Node.js側の実装のそれぞれの概要や、他のサンプルが置いてあるページへのリンクなどが書いてあります。

https://github.com/colinbdclark/osc.js-examples/tree/master/udp-browser という URL にアクセスすると見られるサンプルを参考に、実装を進めていきます。

やりたいこと的には、こちらかも。https://t.co/YXQWaaZ1kI pic.twitter.com/dvwYluJS7U
— you (@youtoy) November 21, 2021

Node.js側の実装

元のサンプルの実装は、このリンク先の内容のとおりなのですが、もっと簡略化できそうに見えるので、必要最低限となりそうな部分以外削ったり書きかえます。

なお、以下を実行する場合には、 npm i osc で osc.js を呼び出せるようにしておいてください。
ちなみに ws は、上記のインストール時に一緒に準備されるので、特に上記の npmコマンドでの指定は不要です。

const osc = require("osc"),
    WebSocket = require("ws");

const udp = new osc.UDPPort({
    localAddress: "0.0.0.0",
    localPort: 7400, // 自分が UDP で待ち受ける時のポート番号
    remoteAddress: "127.0.0.1",
    remotePort: 8000 // OSC Data Monitor の待ち受けポート番号
});

udp.on("ready", function () {
    console.log("Listening for OSC over UDP.");
});
udp.open();

const wss = new WebSocket.Server({
    port: 8081 // WebSocket で接続する場合の接続先ポート番号
});

wss.on("connection", function (socket) {
    console.log("A Web Socket connection has been established!");
    const socketPort = new osc.WebSocketPort({
        socket: socket
    });

    const relay = new osc.Relay(udp, socketPort, {
        raw: true
    });
});

上記で 3つのポート番号が出てきますが、それぞれコメントに書いた通りです。

localPort: 7400： Node.js のプログラム自身が UDP で待ち受けるポート（今回は不使用）
remotePort: 8000： OSC Data Monitor に接続するためのポート番号（OSC Data Monitor のデフォルトの待ち受けポート番号）
port: 8081：ブラウザ側から WebSocket で接続する場合のサーバーのポート番号

ブラウザ側の実装

次に、サンプルのブラウザ側の実装を見てみます。

以下のように、osc.js での OSC over WebSocket にはライブラリが必要なようです。
※ 念のため、素の WebSocket での通信を試したのですが、Node.js側のプログラムでデータが届いた後の部分でエラーが出ました...

最低限、osc-browser.min.js があれば良さそうです。
検索してみると CDN からの読み込みができそうでした。

以下は、 https://www.jsdelivr.com/package/npm/osc というアドレスから、その中の disｔフォルダ内へと移動していった時のページのキャプチャです。

執筆時点では、以下のようにスクリプトタグで読み込めばよさそうでした。

<script src="https://cdn.jsdelivr.net/npm/osc@2.4.2/dist/osc-browser.min.js"></script>

とりあえず、最低限、Node.js側に接続して何らかデータを送る、というプログラムを書いてみます。
元のサンプルから、必要最低限の部分のみが残るような感じで書きかえました（冒頭にも書いたとおり、ブラウザから送信するだけの、片方向通信用の処理になっています）。

<!DOCTYPE html>
<html>
    <head>
        <title>osc.js Web Socket Demo</title>
        <meta charset="UTF-8" />
        <script src="https://cdn.jsdelivr.net/npm/osc@2.4.2/dist/osc-browser.min.js"></script>
        <script type="text/javascript">

            const port = new osc.WebSocketPort({
                url: "ws://localhost:8081"
            });
            port.open();

            const sayHello = function () {
                port.send({
                    address: "/hello",
                    args: ["world"]
                });
            };

        </script>
    </head>

    <body>
        <h1>osc.js Web Socket Demo</h1>
        <button onclick="sayHello()">Send OSC message</button>
    </body>
</html>

動作させてみた結果

以下のツイートの添付画像にあるように、OSC Data Monitor側で、ブラウザから送られたデータを受信・表示できたのが確認できました。

osc.js を使ったブラウザでの OSC利用の件、
Node.js と HTML+JavaScript のプログラムをそれぞれ書いて動かした。

そして、ブラウザのページ上から OSC over WebSocket を使って、Node.js のプログラムを介し、OSC Data Monitor にデータが送られたのを確認できた！ pic.twitter.com/fJNzbCSWXz
— you (@youtoy) November 21, 2021

添付画像の右端のほうの部分を、以下に掲載しておきます。

HTML上のボタンを複数回押したので、メッセージ受信が複数受信されている、という状態です。

おわりに

osc.js を使った Node.js のプログラムで WebSocket関連の処理を書くことで、UDP・WebSocket の両方で待ち受けができる仲介役ができあがりました。
そして、その仲介役にブラウザからアクセスして WebSocket でデータを送ることで、OSC Data Monitor へデータを送ることができました（仲介役が、WebSocket の通信を UDP の通信に変換していたりします）。

UDP・WebSocket の両方が使えると、いろいろ活用できる内容が拡がりそうです！

【追記】その後

p5.js　から使う、というのもやってみました。

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

osc.js でブラウザから OSC Data Monitor に OSC over WebSocket でデータを送る（とりあえず片方向）