Scratch 3.0 Scratch Link를 수정해보기

Scratch 3.0은 외부기기와 연동하기 위해서 Scratch Link 앱을 이용해야 한다. (Scratch 내부에 구현할 수도 있을 것 같은데, 이렇게 되면 다른 운영체제에서 호환이 안될테니 아마도 이렇게 만들어 놓은듯 하다) 내부를 들여다보면 Scratch Link에서 WebSocket 서버를 제공하고, BLE, BT로 구분하여 접속할 수 있다. 통신은 JSONRPC를 이용한다. BLE, BT 모두 프로토콜은 동일하다.

따라서 Bluetooth 시리얼, BLE 등을 이용한 기기들은 기존 프로토콜을 이용하여 접속 및 연동이 가능하다. OROCA-Edubot도 이와 같은 과정을 통해 연동에 성공하였다. 이제 좀더 나아가 시리얼포트를 이용할 경우 (예를 들어 Arduino 보드나 사용자가 개발한 보드들)엔 어떻게 해야 할까?

고민해본 결과 가장 클리어한 방법은 Scratch Link를 확장하여 시리얼 통신을 지원하게끔 하면 될 것 같다. 마침 기존까진 실행파일로만 제공되었던 Scratch Link가 이젠 소스까지 제공되고 있다. 개발 지원 운영체제는 macOS와 윈도우이다.

소스는 https://github.com/llk/scratch-link에서 받을 수 있다. 개발PC에 일단 클론해 보고,

$ git clone https://github.com/LLK/scratch-link.git

README.md 파일에 나온 것과 같은 과정을 통해 빌드해보자. 보안 WebSocket를 사용해야 하므로 인증서가 필요하다. 나중에 판매하거나 양상 목적이라면 돈을 주고 구입해야 하지만, 개인이 사용할 경우엔 PC에서 쉽게 생성 가능하다.

$ cd scratch-link
$ cd Certificates
$ openssl req -x509 -out scratch-device-manager.cer -keyout scratch-device-manager.key \
  -newkey rsa:2048 -nodes -sha256 \
  -subj '/CN=scratch-device-manager' -extensions EXT -config <( \
   printf "[dn]\nCN=localhost\n[req]\ndistinguished_name = dn\n[EXT]\nsubjectAltName=DNS:localhost\nkeyUsage=digitalSignature\nextendedKeyUsage=serverAuth")

$ ./convert-certificates.sh

위 과정이 완료되면 out 디렉토리에  scratch-device-manager.pem, scratch-device-manager.pfx 파일이 생성된다.

현재 내가 사용하고 있는 개발환경은 macOS 이므로, macOS 폴더로 이동하여 빌드를 시작한다. Xcode, pngcrush를 미리 설치되어 있어야 한다. Xcode는 앱스토어에서, pngcrush는 homebrew를 이용하면 쉽게 설치할 수 있다.

$ cd ..
$ cd macOS
$ make

빌드에 필요한 패키지들이 자동으로 설치되고, 에러가 없이 완료되면 dist 디렉토리가 생성되고 Scratch Link 앱이 생성되어 있음을 볼 수 있다.

이제 이 앱을 실행해보면, 기존과 같이 메뉴바에 Scratch Link가 위치한다.

Scratch 3.0를 실행하고, BLE와 BT 등 기존과 동일하게 동작하는지 확인한다. 지난번 개발환경 구축 포스팅에서 device-manager.scratch.mit.edu를 hosts 파일을 이용해 127.0.0.1로 강제 변경하였는데, 이제 Scratch Link를 직접 사용할 수 있으므로 localhost로 변경하여 사용해도 무방하다.

따라서, hosts 파일을 변경하는 작업을 하지 않고, scratch-vm 내에서 다음의 파일에 있는 웹소켓 주소를 localhost로 변경한다.

> scratch-vm/src/io/ble.js

const ScratchLinkWebSocket = 'wss://localhost:20110/scratch/ble';
> scratch-vm/src/io/bt.js

const ScratchLinkWebSocket = 'wss://localhost:20110/scratch/bt';

(추가) 최근 변경된 버전에선 ./util/scratch-link-websocket.js 에서 저 링크들을 관리하는 듯 하다. 따라서 해당 파일을 수정해주면 됨.

> scratch-vm/src/util/scratch-link-websocket.js
28: this._ws = new WebSocket('wss://device-manager.scratch.mit.edu:20110/scratch/ble');
31: this._ws = new WebSocket('wss://device-manager.scratch.mit.edu:20110/scratch/bt'); 

이제 Scratch 3.0을 실행하고 확장카드를 실행해보면,

사파리의 경우, 위와 같이 Scratch Link와의 연결이 되지 않는다. 새로운 사파리 창을 띄우고 https://localhost:20110 로 접속한다. 다음과 같이 나오는데,

Show Details 버튼을 누르고, 아래쪽에 visit this website 링크를 누르고 다시 한번 접속하겠다고 하면, 어드민 암호를 입력하고 현재의 인증서가 사파리에 저장된다.

이제 Scratch 3.0에서 정상적으로 실행됨을 볼 수 있다.

다음엔 Scratch Link의 소스를 분석하고 시리얼 통신이 가능하도록 모듈을 작성해보도록 한다.


참고링크

Scratch 3.0 스크래치 링크 설치 및 사용

Scratch 3.0에서 외부 기기 및 서비스를 이용하기 위해선 Scratch Link를 사용해야 한다. 물론 확장 프로그램에서 직접 하드웨어에 접속하게 해도 되지만, Scratch 개발자들은 다양한 하드웨어를 같은 프로토콜로 연결하기 위해 Scratch Link를 외부에 실행하고, 이를 통해 하드웨어와 연결한다.

Scratch와 Scratch Link는 websocket을 이용하여 통신한다. 패킷 내용은 까보면 json으로 구성되어 있다. Scratch Link는 시리얼통신 (블루투스 시리얼 포함), Bluetooth LE를 이용해 외부 하드웨어와 연결한다. Linux, macOS의 경우 위 기능을 모두 지원하나, 윈도우의 경우 10버전에서만 Bluetooth LE를 지원한다.

Scratch Link는 아직 소스가 공개되어 있지 않으므로, 설치하기 위해선 다음의 링크를 이용한다.

위 링크에서 파일을 다운로드 한 다음 설치한다.

Scratch Link를 사용하기 위해선 hosts 파일의 수정이 필요하다. 이유는 모르겠지만 Scratch Link의 서버 주소가 Local에서 실행되고 있음에도 불구하고 device-manager.scratch.mit.edu로 되어 있기 때문에 그냥 사용하게 되면 연결이 되지 않는다. 따라서 위 주소를 Local로 접속하도록 만들어야 되는데, 이를 위해 hosts 파일을 수정한다.

macOS

macOS에서 hosts 수정은 아주 간단하다. 터미널을 열고

$ sudo vi /etc/hosts
##
# Host Database
#
# localhost is used to configure the loopback interface
# when the system is booting.  Do not change this entry.
##
127.0.0.1       localhost
127.0.0.1       device-manager.scratch.mit.edu
255.255.255.255 broadcasthost
::1             localhost

시스템 파일이기 때문에, 계정 암호가 필요하다. 위와 같이 수정하고 저장한다. 그 다음

$ ping device-manager.scratch.mit.edu
PING device-manager.scratch.mit.edu (127.0.0.1): 56 data bytes
64 bytes from 127.0.0.1: icmp_seq=0 ttl=64 time=0.045 ms
64 bytes from 127.0.0.1: icmp_seq=1 ttl=64 time=0.053 ms
64 bytes from 127.0.0.1: icmp_seq=2 ttl=64 time=0.107 ms
...

와 같이 나오면 성공.

Windows 10

윈도우의 hosts 파일은 C:\Windows\System32\drivers\etc에 위치한다. 하지만 직접 수정하는 것을 막아놨기 때문에, 탐색기로 위 위치로 이동한 후 hosts 파일을 임의의 위치로 복사한다.

Notepad나 기타 편집기를 이용하여, 다음과 같이 수정한다.

# For example:
#
#      102.54.94.97     rhino.acme.com          # source server
#       38.25.63.10     x.acme.com              # x client host

127.0.0.1	device-manager.scratch.mit.edu

그런 다음 수정된 파일을 C:\Windows\System32\drivers\etc에 복사해 넣는다.

와 같이 나오고, 덮어 씌우겠다고 선택하면,

와 같이 나오는데, Continue를 눌러 진행한다. 그런 다음 코맨드 창을 열고 ping을 테스트해보면,

와 같이 나오면 성공.

설치된 Scratch Link를 실행하면 websocket 서버가 백그라운드에서 실행된다.

이제 사용할 준비 끝.