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의 소스를 분석하고 시리얼 통신이 가능하도록 모듈을 작성해보도록 한다.


참고링크

8 Replies to “Scratch 3.0 Scratch Link를 수정해보기”

  1. 안녕하세요~ 스크래치 공부에 많은 도움이 되고 있습니다~! 혹시 scratch link 소스를 분석하고 시리얼통이 가능한 모듈을 작성하는 편은 언제쯤 올라오나요?ㅠ…ㅠ scratch link와 시리얼통신으로 통신해야하는 프로그램을 만들어보고 싶은데 어려움을 느껴서 코멘트 남겨봅니다..ㅠ.ㅠ

      1. 감사합니다>ㅁ</ 기다리고 있겠습니다♥ 알기 쉽게 잘 정리해주신 글 올려주셔서 감사합니다!

  2. 안녕하세요. 스크래치 3.0을 커스텀하여 오프라인용 스크래치 3.0 + 스크래치 링크를 만들어보려 합니다.
    이때 wss://localhost:20110/scratch/ble 로 수정해서 빌드를 해도 웹소켓이 열리지 않고
    failed: Error in connection establishment: net::ERR_CERT_COMMON_NAME_INVALID
    이 메세지가 계속 출력되는데..혹시 왜 이러는지 아실까요..?

  3. 안녕하세요. 정말 오랜만에 댓글을 달아봅니다..ㅎ
    이번에 다시 스크래치를 진행하고 있는데.. 여전히 어려움을 느끼고 있습니다..ㅠ
    현재 사용하고 있는 Arduino Micro 보드를 USB 케이블을 이용하여 연결하기 위해서 올려주신 글을 천천히 따라하고 있습니다.
    현재, 얼추 진행이 된거 같은데, 하드웨어와 scratch 연동(통신)이 안되고 있어 Link 부분의 문제인것 같아 열심히 블로그를 보고있는데요..
    제가 Window를 사용하고 있어서…. 지금 올려주신 내용을 정확하게 모르겠어서요…
    오랜 시간이 지난 내용이긴 하나… 혹시 Link 관련해서 Window에서는 어떻게 해결하는지 알 수 있을까요…?ㅠㅠ

    1. Windows의 경우, Scratch-link는 C#으로 개발되어 있습니다. 해당 소스를 확인해보시면, BLE, BT의 경우 Session이라는 형태로 분리되어 있는데, 커스텀 통신의 경우, 위 Session을 참조하여 따로 개발이 가능할꺼라고 예상하고 있습니다. 따로 진행해보진 않았네요..ㅠㅠ

  4. 질문있습니다. 127.0.0.1 이 localhost로 설정되어있고… 웹페이지 만들 때 사용하고 있습니다.
    1) 127.0.0.1 device-manager.scratch.mit.edu <– 부분 중 127.0.0.1 을 다른 숫자로 변경가능한가요?
    2) 만약 device-manager.scratch.mit.edu이 필히 127.0.0.1을 사용해야한다면
    localhost에 다른 값을 설정할 수 있나요?

    1. 기억이 가물가물한데, Scratch-Link가 기본 소스에선 device-manager.scratch.mit.edu를 사용합니다. 그래서 hosts 파일을 수정해서 강제로 127.0.0.1로 맵핑한거고요… 소스를 변경해서 빌드한 경우에는 로컬주소를 사용가능하니 hosts 파일을 수정할 필요가 없습니다.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.