ついに WebSocket 通信が Arduino 化した WROOM で出来た

WebSocket

ついにできました!!

まだテスト段階で安定した動作ではありませんが、Arduino化したESP-WROOM-02とスマホブラウザで完全双方向リアルタイムストリーミング通信 WebSocket ができました。

Server-Sent Eventsはサーバーからの一方向ストリーム通信ですが、今回は更にスゴいですよ! なんといっても、双方向ストリーミング通信です!

ネット上にもArduinoでWebSocketに成功した情報はほとんど無かったので、かなり苦労しました。

スポンサーリンク


前回の記事ではWebSocket ハンドシェイク(コネクション確立)まで出来たという報告でしたが、今回はWROOM側とブラウザ側からの双方向ストリームデータ送受信ができたという報告です。

ESP-WROOM-02 ( ESP8266 ) の13番ピンに接続したLEDをPWMで制御して、ブラウザのスライダーを動かすとリアルタイムにLEDの明るさが変化します。
そして、ブラウザのスライダー値をWROOMで読み取り、再計算してブラウザに返した値を表示させてます。

以下の動画をご覧ください。

Js-innerHTML という項目の数値はブラウザのHTMLファイルで作成したJavaScriptのイベント発生データ表示です。

WROOM(ESP8266) DATA という項目の数値は、ブラウザから送られてきたスライダー値をWROOMで受信し、それがマスク付きデータのためにデコードして、WROOMで再計算したデータをブラウザにストリーム送信した値です。
結構リアルタイムで追従してくれているのが分かると思います。スゴイですねぇ・・・。

ただ、スライダーを操作し過ぎるとオーバーフローを起こすようで、ブラウザ側で勝手にコネクション切断されてしまいます。
これは改善しなければいけないので、プログラムを修正していかねばなりません。
今、オーバーフローの原因を探索中ですので、まだ記事中にソースコードを載せることができません。
でも、ここまでできれば、あとは何とでもなるような気がしてます。

今回苦労した点は、まずはハンドシェイク(コネクション確立)とブラウザから送られてくるマスクされたデータの復号でした。
なんでこんな面倒な仕組みなんだろうと思いましたが、セキュリティ上いろいろと考えられて作られているみたいです。

このWebSocketの詳細は次回以降、段階的に解説していきたいと思いますので、しばらくお待ち下さい。

解説ページをアップしました
以下の記事をご覧下さい

Arduino化 WROOM で WebSocket ハンドシェイク 確立方法
Arduino化 WROOM で WebSocket データ送受信方法
WebSocket でスマホから Arduino化 WROOM のLEDを調光してみる

これができればいろいろとオモシロイことが出来そうですよ・・・。
では、また・・・。

Amazon.co.jp 当ブログのおすすめ

スイッチサイエンス ESPr Developer 32 Type-C SSCI-063647
スイッチサイエンス
¥2,420(2024/12/12 02:40時点)
ZEROPLUS ロジックアナライザ LAP-C(16032)
ZEROPLUS
¥28,006(2024/12/12 08:09時点)
Excelでわかるディープラーニング超入門
技術評論社
¥1,970(2024/12/12 00:08時点)

コメント

タイトルとURLをコピーしました