ESP32でJavascriptでWebSocket

ESP32上で動作するJavascriptのライブラリですが、非常に種類が増えてきました。
今回は、WebSocketを追加します。

すでに以下のWebサーバのためのライブラリを使っていますが、WebSocketもサポートしているためのそれを使います。

https://github.com/me-no-dev/ESPAsyncWebServer

 (参考) ESP32で動作するJavascript実行環境

ESP32で動作するJavascript実行環境を公開しています。

「電子書籍：M5StackとJavascriptではじめるIoTデバイス制御」

https://poruruba.booth.pm/items/3735175

サポートサイト

https://github.com/poruruba/QuickJS_ESP32_IoT_Device_M5Unified

（参考）ESP32で動作するJavascriptライブラリ
 
|ライブラリ名|概要|
|---|---|
|Esp32|ESP32 に関連する基本的な機能を提供します。|
|Console|UART にデバッグ文を出力します。|
|Audio|I2S に接続されたスピーカから MP3 音声を再生します。 |
|Camera|ESP32 に接続されたカメラの画像撮影機能を提供します。|
|Crypto|暗号機能を提供します。|
|Env|I2C に接続された温湿度センサ（SHT30、DH12）を操作します。|
|EspNow|EspNow の機能を提供します。|
|Gpio|ESP32 の GPIO を制御します。|
|Http|HttpGateway を介して、HTTPS 通信します。|
|Imu|ESP32 に接続された 6 軸姿勢センサを制御します。|
|Ir|ESP32 に接続した赤外線送受信機を制御します。|
|Input|ボタンの押下を検出します。|
|Lcd|ESP32 に接続した LCD の表示を制御します。|
|Ledc|ESP32 の GPIO ピンに対して PWM 出力します。|
|Pixels|ESP32 に接続した RGB LED を制御します。|
|Prefs|ESP32 の不揮発メモリの読み書きをします。|
|Rtc|ESP32 に接続した RTC から時刻を設定・取得します。|
|Sd|ESP32 に接続された microSD カードのストレージに対するファイルの読み書きをします。|
|Udp|UDP パケットを送受信します。|
|Uart|UART 通信のための機能を提供します。|
|Utils|base64、url エンコード、HTTP 通信などのユーティリティです。|
|Websocket|Websocket による通信機能を提供します。|
|Wire|周辺デバイスとの I2C 通信のための機能を提供します。|
|UnitColor|カラーセンサユニットを制御します。|
|UnitGas|ガスセンサーユニットを制御します。|
|UnitGesture|ジェスチャーユニットを制御します。|
|UnitPbhub|I/O ハブユニットを制御します。|
|UnitSonicIo|超音波測距ユニット I/O を制御します。|
|UnitAngle8|8 ポテンショメータユニットを制御します。|
|UnitEnvPro|環境センサ Pro ユニットを制御します。|
|UnitImuPro|IMU Pro ユニットを制御します。|

# サンプルコード

```js:main.js
import * as input from "Input";
import * as websocket from "Websocket";

var client_id;

websocket.setCallback((obj) =>{
	console.log(JSON.stringify(obj));
	if(obj.type == "connected")
		client_id = obj.client_id;
	else if( obj.type == "disconnected")
		client_id = undefined;
	else if( obj.type == "received" )
		console.log("received=" + obj.payload);
});

input.onButtonWasPressed(input.BUTTON_A, () =>{
	console.log("onButtonWasPressed(A) called");

	if( client_id)
		websocket.send(client_id, "Hello");
});

function loop(){
	esp32.update();
}
```

# 動作確認

ブラウザのJavascriptからWebSocket接続できることを確認します。

以下のURLをブラウザで開きます。

https://poruruba.github.io/utilities/

ESP32とはHTTPSではなくHTTPSで接続するため、Mixed Contentエラーとなります。
そこで、このサイトの設定において、「安全でないコンテンツ」をブロック（デフォルト）から許可するに変更しておきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/f815ea0c-5e48-0f08-b4c2-af16d48e5e9d.png)

ユーティリティタブからWebSocketを選択します。

urlに、ESP32のIPアドレスを含めたURLを入力します。

例：ws://192.168.1.229/ws

protocolsの入力は不要です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/410d15e2-2f4e-bb76-b2b3-a974bc3c0e90.png)

Openボタンを押下します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/3108c303-53ea-f297-f225-c3cae9454900.png)

接続できました。
次に、messageに適当な文字列を入れて、「送信」ボタンを押下します。

ESP32のUARTに以下のようにメッセージが受信されて表示されます。

```
{"type":"received","client_id":9,"payload":"test"}
received=test
```

ESP32の第一ボタンを押すと、ESP32側からメッセージが送信され、ブラウザの方に受信した旨表示されます。

```
----------
[RECV] message text 2025/01/18 17:35:58
Hello
----------
[SEND] message text 2025/01/18 17:35:54
test
----------
[STATE] open 2025/01/18 17:31:18
----------
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/54e34eaa-d19d-fd02-0ef3-525ad09eb352.png)

以上