ESP32でJavascriptでWebSocket

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

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

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

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

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

サポートサイト

（参考）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 ユニットを制御します。

サンプルコード

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をブラウザで開きます。

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

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

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

例：ws://192.168.1.229/ws

protocolsの入力は不要です。

Openボタンを押下します。

接続できました。
次に、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
----------

以上