/blog/nodejsでローカルにoscを送るwebアプリケーションを作る (SocketIO, Express)
Tech Blog2019 - 10 - 8

nodejsでローカルにoscを送るwebアプリケーションを作る (SocketIO, Express)

Open Sound Controlnodejsexpress

誰でもoscを通して作品に参加できるようなwebアプリケーションをプロトタイピングしました。

誰でも osc を通して作品に参加できるような web アプリケーションをプロトタイピングしました。リポジトリ。

OSC (Open Sound Control)

OSC とは: opensoundcontrol.org やwikipediaを参照。

yoppa.org のopenFramewoks – OSC (Open Sound Control) を利用したネットワーク連携が非常にためになる。

UDP 上で MIDI みたいなものを Max/MSP に送ったりできるので非常に便利。今回はこいつを LAN 上だけならずインターネット上のスマートフォンからローカルに受け付ける，展示をよりインタラクティブにするためのツールのプロトタイピングを行う。

(以下リポジトリを参照していただければローカルでアプリケーション動かせます）

atsukoba/osc-webapp

Serve OSC from www. Contribute to atsukoba/osc-webapp development by creating an account on GitHub.

概観

nodejs/express でサーバを立てて，軽くて双方向に使える websocket でユーザのアプリケーション上での動きを捉える。localhost に立てたサーバを ngrok で公開し，その URL(とローカルの IP アドレス)を QR コードに出力するところまでを実装する。

軽くフロントを書いてデモをつくり，簡単なボタンとそのボタンに対応したメッセージをローカルの osc に送れるかを確認する。

alt

express

npm install express-generator -g
express --view=ejs osc-webapp
cd osc-webapp
npm install

socket.ioを使用する。

const app = express()
const http = require('http').Server(app)
const io = require('socket.io')(http)

osc

node-osc(npm: node-osc)を利用する。利用例としては以下のような感じ

const osc_portnum = 5050
const client = new osc.Client('127.0.0.1', osc_portnum)

io.of('osc').on('connection', (socket) => {
  socket.on('message', (obj) => {
    console.log('osc: ' + obj)
    obj = JSON.parse(obj)
    let sendObj = new osc.Message(obj.address)
    sendObj.append(obj.args)
    client.send(sendObj)
    let dt = new Date()
    io.of('osc').send(
      `${dt.toFormat('HH24:MI:SS')} : osc message received: ${obj.args}`,
    )
  })
})

qrcode

os, qrcode(npm: qrcode) を用いて，ローカル IP アドレスとngrok(npm: ngrok)で生成した URL を QR にする。

const ngrok = require('ngrok')
const qrcode = require('qrcode')

// get local ip addresses
let interfaces = os.networkInterfaces()
let addresses = []
for (let k in interfaces) {
  for (let k2 in interfaces[k]) {
    let address = interfaces[k][k2]
    if (address.family === 'IPv4' && !address.internal) {
      addresses.push(address.address)
    }
  }
}
console.log(`local ip addresses: ${addresses}`)
console.log(`FOR LOCAL NEWORK PARTICIPANTS`)
qrcode.toString(
  `http://${addresses[0]}:${portnum}`,
  { type: 'terminal' },
  (err, str) => {
    console.log(str)
  },
)

// make ngrok tunnel
console.log(`FOR WWW PARTICIPANTS`)
;(async () => {
  let url = await ngrok.connect(portnum)
  console.log('ngrok URL: ' + url)
  qrcode.toString(url, { type: 'terminal' }, (err, str) => {
    console.log(str)
  })
})()

つかう

npm start

これで QR コードが生成されるので，それをシェアすれば osc を送れる。同一 LAN にいるなら，上部の QR コードでおｋ。config ファイルでポート番号を指定し，デモはクライアント側の main.js で(今は)送る osc メッセージをハードコードしているので，適宜それを編集して使っていただければと思う。

gif

reference