はじめに
ESP32のようなマイコンを使ってシンセサイザーを作りたいのですが、シンセサイザーにはツマミやスイッチがたくさんあります。ですが、プロトタイピングの段階でツマミやスイッチの回路を組むのは、ちょっと時間・リソースがもったいないように思います。そこで、websocketを使ってPC上にツマミやスイッチを実装できないか、と考えました。調べたところ、ESP-IDFですごく簡単に使えるライブラリMolorius/esp32-websocket（GPLv3）を見つけましたので、今回はその紹介をします。
準備するもの
- PC(筆者はMac)
- ESP32開発ボード(NodeMCU, ESP-WROOM-32等)
環境構築
ESP-IDFのセットアップ
今回はv3.3.1を使います。ESP-IDF Programming Guide v3.3.1の通りに進めます。
Githubからプログラムを入手
# ESP-IDFが標準的なパス（~/esp）に導入されているものとします。
cd ~/esp
git clone https://github.com/Molorius/ESP32-Examples
cd ESP32-Examples/websocket_server
git clone https://github.com/Molorius/esp32-websocket components/websocket
esp32-websocketがESP32-Examplesのsubmoduleになっているのですが、gitコマンドで最新のものを引っ張ってくる方法がわからなかったので、2回git cloneしています。gitに疎く、すみません。どなたか情報いただけると嬉しいです。
動かす
ESP-IDF(v3)ではおなじみですが、以下の流れになります。
-
make menuconfigでserial portを設定する - ESP32ボードを接続し、
make flashで書き込む -
make monitorでコンソール出力（デバッグメッセージ等）を見る
cd ~/esp
cd ESP32-Examples/websocket_server
make menuconfig
make flash
make monitor
make menuconfigでは、Serial flasher config->Default serial portと選び、ポート名を入力します。ポート名の調べ方は、macの場合、ls /dev/tty.*で調べられます。私の環境では/dev/tty.SLAB_USBtoUARTになっています。
また、トップメニューのExample OptionsからWIFIのSSIDとパスワードを変更することもできます。デフォルトはSSIDがESP32 testでパスワードがhello worldです。
書き込みが完了すると、ESP32がWIFIアクセスポイントになります。make monitorを実行して、PCやスマホでWIFI接続すると、ターミナルに以下のようなログが流れます。
I (1340) wifi_setup: WiFi set up
I (1350) event_handler: Access Point Started
I (1350) led_setup: led is off and ready, 10 bits
I (1360) server_task: server listening
I (1360) server_handle_task: task starting
I (1360) count_task: starting task
I (24050) wifi: new:<1,0>, old:<1,0>, ap:<1,1>, sta:<255,255>, prof:1
I (24050) wifi: station: xx:xx:xx:xx:xx:xx join, AID=1, bgn, 20
I (24080) event_handler: STA Connected, MAC=a4:5e:60:bd:e3:81 AID=1
I (25360) tcpip_adapter: softAP assign IP to station,IP is: 192.168.4.2
I (25360) event_handler: Unregistered event=18
I (28130) tcpip_adapter: softAP assign IP to station,IP is: 192.168.4.2
I (28130) event_handler: Unregistered event=18
その後、ブラウザでhttp://192.168.4.1/へアクセスすると、スライダーとテキスト入力エリアのあるWebページが開きます。スライダーを動かしたりテキスト入力・送信をすると、コンソールに値が表示されます。
なお、monitorを終了する際はCtrl + ]を押すと終了できます。
おわりに
ESP-IDFでwebsocketを使う例としてはESP-IDFv4に公式サンプルがあるのですが、今回のサンプルのほうがよっぽど簡単で実用的だと思います。websocketについて調べると、javascriptやpython等でサーバーとクライアントを準備して素のsocket通信と同様の実装をしている例が多く見つかりますが、このライブラリを使う場合は、サーバーはESP32側のプログラム、クライアントはESP32に埋め込むHTML（つまりjs）になり、あまり多くを考えずに済む…ような気がします（やっていることは同じなので、これは気のせいです）。
今回はサンプルを動かしただけですが、プロトタイピングに使いやすいものができたら、また改めて投稿したいと思います。