toio란?

toio(토이오) 는 소니에서 발매된 손바닥 사이즈의 로봇입니다.

심플한 외형이면서 궁리 나름으로 여러가지 놀이 방법이 생기는 것이 특징으로, 우리 집에서는 4살이 되는 아들이 게즌 로이드에 빠져 있습니다.

toio.js

그런데 그런 toio를 프로그래밍할 수 있는 Node.js용의 라이브러리 toio.js 가 공개되었습니다.

샘플을 만져 보면 동작도 안정되어 있어 API도 간편하고 좋은 느낌입니다.

무엇을 만들까 생각하고 있을 때, 문득 웹 블루투스 을 생각해 냈으므로, 브라우저상에서 toio.js 를 움직여 보기로 했습니다.

브라우저에서 toio를 조작하는 모습

우선은 실제 동작의 모습으로부터. 이 동영상을 확인하세요.

Node.js는 사용하지 않으며 브라우저에서만 toio를 제어합니다.

toio가 있으면 Chrome에서 다음 URL에 액세스하여 동일한 앱을 사용해 볼 수 있습니다.

웹 블루투스를 사용하기 위해 Chrome에서만 작동합니다.

toio.js를 브라우저에서 사용하는 방법

이러한 앱을 만들기 위해 toio.js를 브라우저에서 이용하기 위한 포인트를 설명합니다.

1. webpack 설정에서 noble 웹 블루투스 바인딩 사용

브라우저에서 JS라고 하면 webpack이군요.
toio.js는 의존 모듈이 적기 때문에 비교적 솔직하게 webpack이 통과하지만, 1점만 특별한 설정을 해줄 필요가 있습니다. 그것이 여기.

webpack.config.js

module.exports = {
  ...
  resolve: {
    alias: {
      // noble-macをnobleにバイパス
      'noble-mac': 'noble'
    }
  },
  plugins: [
    // ついでにwsも不要なので無効化
    new webpack.IgnorePlugin(/^ws$/)
  ],
  ...
};

toio.js가 BLE 스택으로 사용하는 1은 원래 웹 Bluetooth 바인딩을 가지고 있습니다.

브라우저에서는 noble-mac 모듈이 필요하지 않으므로 webpack에서 원래 noble로 우회하도록 설정합니다.

또한 noble이 Web Bluetooth의 폴백을 위해 ws 모듈을 말려들려고 합니다만, Chrome으로 사용하면 나누면 불필요하므로 그쪽도 무효화해 둡니다.

2. 사용자 작업에서 cube 초기화

웹 블루투스 API는 noble 합니다.

toio.js의 경우는 아래와 같이 cube의 초기화 부분을 click 리스너 등에서 두드리게 해주면 OK입니다.

main.js

import { NearestScanner } from '@toio/scanner';

document.getElementById('connect').addEventListener('click', async () => {
  const cube = await new NearestScanner().start();
  await cube.connect();
}

초기화 부분마저 패스해 버리면, 그 후에는 유저 조작이 없어도 API를 두드릴 수 있게 됩니다.

3. 웹 블루투스의 일부 API를 배타적으로 제어

여기까지의 순서로 PC Chrome상에서는 toio.js가 동작하게 됩니다만, Android Chrome에서는 초기화시( cube.connect()의 실행시)에 에러가 나옵니다.

안드로이드의 BLE에는 2 라는 제약이 있어, 아무래도 이것에 걸려 버리는 것 같습니다.

이 제약은 Web Bluetooth API에 다음과 같은 원숭이 패치를 적용하여 회피할 수 있습니다. 자신의 앱에 그대로 copipe 등을 시도하십시오.

main.js

if (/android/i.test(navigator.userAgent)) {
  const mutexify = (promiseFn, mutex = Promise.resolve()) => {
    return function(...args) {
      const job = () => promiseFn.apply(this, args);
      return (mutex = mutex.then(job, job));
    };
  };

  // readValue と startNotification を排他制御
  const proto = BluetoothRemoteGATTCharacteristic.prototype;
  const mutex = Promise.resolve();
  proto.startNotifications = mutexify(proto.startNotifications, mutex);
  proto.readValue = mutexify(proto.readValue, mutex);
}

사이고에게

이상의 3점으로, PC/Android의 Chrome에서 toio.js를 이용할 수 있게 된다고 생각합니다. 샘플의 소스도 두어 두므로 불명한 점이 있으면 참고로 해 주세요.

이 기사가 뭔가 toio 앱 개발의 계기가 되면 기쁩니다.

그럼 모두 좋은 toio.js 생활을 보내십시오!



사용자 액션(클릭, 키보드 조작 등)을 트리거로 실행을 보면 Opera에서도 작동 할지도 모르지만 미확인 readValue와 startNotification을 여러 번 동시에 실행할 수 없음

어쨌든 noble 사이트를 보더라도 거의 언급하지 않고 소스를보고 처음으로 알 수있는 수준입니다 이 근처