ついにできました！！
まだテスト段階で安定した動作ではありませんが、Arduino化したESP-WROOM-02とスマホブラウザで完全双方向リアルタイムストリーミング通信 WebSocket ができました。
Server-Sent Eventsはサーバーからの一方向ストリーム通信ですが、今回は更にスゴいですよ！ なんといっても、双方向ストリーミング通信です！
ネット上にもArduinoでWebSocketに成功した情報はほとんど無かったので、かなり苦労しました。
前回の記事ではWebSocket ハンドシェイク（コネクション確立）まで出来たという報告でしたが、今回はWROOM側とブラウザ側からの双方向ストリームデータ送受信ができたという報告です。
ESP-WROOM-02 ( ESP8266 ) の１３番ピンに接続したＬＥＤをPWMで制御して、ブラウザのスライダーを動かすとリアルタイムにＬＥＤの明るさが変化します。
そして、ブラウザのスライダー値をWROOMで読み取り、再計算してブラウザに返した値を表示させてます。
以下の動画をご覧ください。
Js-innerHTML という項目の数値はブラウザのHTMLファイルで作成したJavaScriptのイベント発生データ表示です。
WROOM(ESP8266) DATA という項目の数値は、ブラウザから送られてきたスライダー値をWROOMで受信し、それがマスク付きデータのためにデコードして、WROOMで再計算したデータをブラウザにストリーム送信した値です。
結構リアルタイムで追従してくれているのが分かると思います。スゴイですねぇ・・・。
ただ、スライダーを操作し過ぎるとオーバーフローを起こすようで、ブラウザ側で勝手にコネクション切断されてしまいます。
これは改善しなければいけないので、プログラムを修正していかねばなりません。
今、オーバーフローの原因を探索中ですので、まだ記事中にソースコードを載せることができません。
でも、ここまでできれば、あとは何とでもなるような気がしてます。
今回苦労した点は、まずはハンドシェイク（コネクション確立）とブラウザから送られてくるマスクされたデータの復号でした。
なんでこんな面倒な仕組みなんだろうと思いましたが、セキュリティ上いろいろと考えられて作られているみたいです。
このWebSocketの詳細は次回以降、段階的に解説していきたいと思いますので、しばらくお待ち下さい。
↓
解説ページをアップしました
以下の記事をご覧下さい
●Arduino化 WROOM で WebSocket ハンドシェイク 確立方法
●Arduino化 WROOM で WebSocket データ送受信方法
●WebSocket でスマホから Arduino化 WROOM のLEDを調光してみる
これができればいろいろとオモシロイことが出来そうですよ・・・。
では、また・・・。
Amazon.co.jp 当ブログのおすすめ
コメント