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

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

##準備（管理者権限で作業して下さい）
0. XamppをPCにインストールする（Pleiadesを使用）
0. Arduino IDE 1.6.10以降をPCにインストールする
0. ESPr Developer相当のマイコンボード(URL)※USBケーブルなどは必要に応じて用意して下さい

1. WiFiルーター
2. WebSocketライブラリ(URL)

##動作確認 1/2（PC側）
まずPC側のPHPとブラウザでWebSocket動作を確認します。

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

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

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

（例）C:\pleiades_php

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

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

.metadata.default
eclipse
xampp

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

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

1. 「 C:\pleiades_php\xampp\xampp-control.exe 」を実行して下さい。
2. XAMPPがウィンドウが開きます。ApacheのStartボタンを押して下さい。

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

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

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

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

server.php
index.php

1. コマンドプロンプトで「 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

1. ブラウザで「 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ルーター自体の設定については変更しません。

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

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

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

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

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

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

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

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

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

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

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