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

記事公開日:2015年10月21日

ついにできました!!

まだテスト段階で安定した動作ではありませんが、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 当ブログのおすすめ
Amazon.co.jp
M5Stack Basic
スイッチサイエンス
Amazon.co.jp
ESPr Developer 32
スイッチサイエンス(Switch Science)
Amazon.co.jp
Amazon.co.jp

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください