WebSocketライブラリ紹介 クライアント動作編

免責

本記事を元にした作業において如何なる損害が発生したとしても、一切責任を負うことが出来ません。予めご了承の上でご参照下さい。

準備（管理者権限で作業して下さい）

1. XamppをPCにインストールする（Pleiadesを使用）
2. Arduino IDE 1.6.10以降をPCにインストールする
3. ESPr Developer相当のマイコンボード(URL)※USBケーブルなどは必要に応じて用意して下さい
4. WiFiルーター
5. WebSocketライブラリ(URL)

動作確認 1/2（PC側）

まずPC側のPHPとブラウザでWebSocket動作を確認します。

1. Pleiadesパッケージをダウンロードして下さい。　(URL)

   ※PHPを開発可能なFull Edition パッケージを選択して下さい。

2. Cドライブ直下にフォルダを作成します。

   （例）C:\pleiades_php

3. 次のフォルダにPleiadesパッケージを解凍して下さい。

   （例）「C:\pleiades_php」内に次の3つのフォルダが存在するようにして下さい。

   .metadata.default
   eclipse
   xampp

4. 「C:\pleiades_php\eclipse\eclipse.exe」を実行してください。

   初期化が終わり、Eclipseが起動したらEclipseを終了してください。
   ※2016/08/31追記

5. 「 C:\pleiades_php\xampp\xampp-control.exe 」を実行して下さい。

6. XAMPPがウィンドウが開きます。ApacheのStartボタンを押して下さい。

   

7. 次の状態になるまで待ちます。

   
   PID(s)の値は気にしなくて良いです。
   Windows 10にアップデートすると、別サービスが80番ポートを使用するため、Apacheが起動しない場合があるようです。
   対策は下記URLを参照下さい。
   https://o-sup.jp/blog/pc/299-201507805-win10-80port.html
   ※2016/08/31追記

8. WebSocketライブラリの「 WebSocketPHP 」を「 C:\pleiades_php\xampp\htdocs\ 」にコピーして下さい。

   C:\pleiades_php\xampp\htdocs\WebSocketPHP\
   ※フォルダ内には2つのファイルが入っています。

   server.php
   index.php

9. コマンドプロンプトで「 C:\pleiades_php\xampp\htdocs\WebSocketPHP> 」に移動して「C:\pleiades_php\xampp\php\php -q server.php」を実行して下さい。

   C:\pleiades_php\xampp\htdocs\WebSocketPHP>C:\pleiades_php\xampp\php\php -q server.php

10. ブラウザで「 localhost/WebSocketPHP/ 」にアクセスして下さい。

    参照：PHPのみでHTML5のWebSocketを体験する方法

動作確認 2/2（ESPr Developer側）

1. WebSocketライブラリの「 WebSocketClient_v0.7.0_beta 」から「 WebSocketClient_v0.7.0.ino 」を開いて下さい。

2. WiFiルーターの「 "your_ssid" 」と「 "your_password" 」をお使いの環境に合わせて変更して下さい。

   const char* ssid = "your_ssid";
const char* password = "your_password";
   ※WiFiルーター自体の設定については変更しません。

3. 「 YOUR_PHP_SERVER 」をPHPを動作させているPCのIPアドレスに変更してください。

   g_http.begin("http://YOUR_PHP_SERVER:8080/WebSocketPHP/server.php");

4. Arduino IDEから、ESPr Developerに対してプログラムをダウンロード（書き込み）します。

   参照：ESPr Developer ( ESP-WROOM-02 開発ボード )の使い方をザッと紹介

5. コマンドプロンプトで「 server.php 」を実行して下さい。

   C:\pleiades_php\xampp\htdocs\WebSocketPHP>C:\pleiades_php\xampp\php\php -q server.php

6. Arduino IDEからシリアルモニタを立ち上げ、ESPr Developerをリセットします。

   ツール > シリアルモニタ
   次の表示が出れば成功です。起動時に”Hello WebSocket”を送信しています。
   

7. シリアルモニタから文字列を打ち込み、ブラウザ側に表示させることも出来ます。

   

本記事では、WiFiルータ経由でESPr DeveloperとPCが接続するサンプルを紹介させていただきました。
色々と応用して頂ければ幸いです。

謝辞

mgo-tec(mgo-tec電子工作)様のWebSocket関連記事を公開頂いたからこそ、本記事を作成する事が出来ました。私一人では到底成し得ないものであります。
改めて深い感謝の言葉を述べさせて頂きます。