ProMicroはもう古い!! ESP32-S3でキーボード&マウス作成 #3WEB Socketで効率的に通信する

前回はマクロ機能を充実と予告していましたが、予定変更でWEB Socketをやっていきます。これを使用することでパフォーマンス向上が見込めます。

WEB Socketって?

最近って程でもないですが、GoogleスプレッドシートやSharePointのエクセルなんかをブラウザ上で複数人で編集できるサービスがありますよね。
さて、ここでWEBサーバーの仕組みを知っている人なら何か疑問に思うはずです。
「なんでリアルタイムに相手の変更がこっちに適用されるの?」
よくよく考えてみれば、Webサーバーはクライアントからサーバーにリクエストを出して、それに対してサーバーが応答するというのが基本的な構造です。
つまり何が言いたいかというと、相手は変更をサーバーに送信することはできますが、サーバーは他の共同編集者に対してその変更を渡す術がないはずなのです。
というわけで調べてみたところ、WEB Socketというものがあることが分かりました。
これは最初に通信を確立し、クライアントもサーバーも双方向で自由に通信ができるようになるものです。
なるほど。これでサーバーは変更があったことを通知したり、変更内容をダイレクトに送信したりすることができるようになるわけですね。
しかもこの規格、最初に通信を確実にしてしまうので、それ以降は余計なヘッダーなどのデータが非常に少ないらしいです。
つまり、現在のキーボードの使用はGETを使ってURLにアクセスすることで指示を出していますが、これだと毎回リクエストヘッダーやサーバーも応答を必ず返さなければいけないので、そういった処理が出てきてしまうので多少時間がかかります。
しかし、その部分をこのWEB Scoketに変えてしまえば、ほんの少しのデータを送受信するだけで済むようになります。サーバーは応答を返す必要もありませんので、非常に処理が軽くなることが見込めます。
というわけで、これからの工作システムに組み込むため、まずは本キーボードでWebソケット技術を確立にしてしまいましょう。

Arduino側

今回は"arduinoWebSockets"ライブラリを使います。
以下からダウンロードし、ZIP形式のライブラリインストールを行ってください。

基本形式
本ライブラリを使用したWEB Socketサーバーの基本形式は以下のようになります。
詳しい解説は動画の方をご視聴ください

JavaScript側

基本形式
JavaScript側は、以下のような形式でWEB Socketを使用することができます。
以下では次のイベントを処理しています。
接続時/切断時/エラー時/データ受信時
また、一番下の関数はデータを送信する関数です

現在のキーボードプログラムをFetchからWEB Socketに置き換えたのが以下

パフォーマンス比較

Fetchの時とWEBScoket化後で時間を比較してみました
Fetchはマクロコード送信時のログで確認。
まぁ大体50msくらいでしょうか。
対してWEB Socketは7msです。しかし、これは送信時間と応答時間の差分なので、実際届かせるだけならもっと早いことが予想されます。
これは今後の工作の基本になって来そうですね

まとめ

今回は予定を変更してWEB Socketソケット化を行いました。
実際に試したように、かなり軽快な動作になることが分かりましたので、今後の工作との通信はウェブソケットを基本としていくこととします。
では、次こそマクロを作成したいと思います。