準備
xampp を使ったロカールサーバーでのテストです。ディレクトリ構造は以下の通りで、『server.php』でサーバーを起動し『EspServer.php』と『EspMonitor.html』との間で通信をさせます
プロジェクトフォルダ
├ composer.json // ライブラリ管理ファイル
├ composer.lock // ライブラリ管理ファイル
└ vendor/ // ライブラリ本体
| └ autoload.php
├ bin/
| └ server.php // サーバープログラム（起動）
└ src/
├ EspServer.php // サーバープログラム（本体）
├ EspMonitor.html // サーバーモニタプログラム『composer.json』にオートロードの設定をして、コマンドプロンプトから『c:\・・・> composer dump-autoload』を入力し autoload を反映させておきます。Composerのオートロードを参照してください
***************** composer.json *****************
{
"autoload": {
"psr-4": {
"EspApp\\": "src"
}
},
"require": {
"cboden/ratchet": "^0.4.4"
}
}『server.php』は以下の通り
プロジェクトフォルダでコマンドプロンプトに『c:\・・・> php bin\server.php』と入力して起動します
<?php
use Ratchet\Server\IoServer;
use Ratchet\Http\HttpServer;
use Ratchet\WebSocket\WsServer;
use EspApp\EspServer;
require dirname ( __DIR__ ) . '/vendor/autoload.php';
$server = IoServer::factory ( new HttpServer( new WsServer( new EspServer() ) ), 8080 );
$server->run ();
『EspServer.php』は以下の通り
『onOpen』『onClose』『onError』『onMessage』のイベントを実装し、『onMessage』のみ『rcvMessage』関数を呼んで、受信データをコンソールに表示し、送信元『EspMonitor.html』へデータを返信する単純なプログラムです
<?php
namespace EspApp;
use Ratchet\MessageComponentInterface;
use Ratchet\ConnectionInterface;
class EspServer implements MessageComponentInterface
{
public function __construct()
{
}
/*************************/
/* WebSocketｵｰﾌﾟﾝ */
/*************************/
// $wsInterface Websocket接続ｵﾌﾞｼﾞｪｸﾄ
public function onOpen( ConnectionInterface $wsInterface )
{
}
/*************************/
/* WebSocketｸﾛｰｽﾞ */
/*************************/
// $wsInterface Websocket接続ｵﾌﾞｼﾞｪｸﾄ
public function onClose( ConnectionInterface $wsInterface )
{
echo "Closed\n";
}
/*************************/
/* WebSocketｴﾗｰ */
/*************************/
// $wsInterface Websocket接続ｵﾌﾞｼﾞｪｸﾄ
// $e ｲﾍﾞﾝﾄ
public function onError( ConnectionInterface $wsInterface, \Exception $e )
{
echo 'An error has occurred: {$e->getMessage()}\n';
$wsInterface->close();
}
/*************************/
/* WebSocket受信 */
/*************************/
// $wsInterface Websocket接続ｵﾌﾞｼﾞｪｸﾄ
// $message 受信ﾒｯｾｰｼﾞ
public function onMessage( ConnectionInterface $wsInterface, $message )
{
rcvMessage( $wsInterface, $message );
}
}
/*************************/
/* ﾒｯｾｰｼﾞ受信 */
/*************************/
// $wsInterface Websocket接続ｵﾌﾞｼﾞｪｸﾄ
// $message 受信ﾒｯｾｰｼﾞ
function rcvMessage( ConnectionInterface $wsInterface, $message )
{
echo $message . "\n"; // 受信データを表示
$wsInterface->send( $message . "_response" ); // 送信元へデータを返す
}
?>『EspMonitor.html』は以下の通り
『onOpen』『onClose』『onError』『onMessage』のイベントを実装し、『onMessage』で受信データをコンソール出力します。『テスト送信』ボタンをクリックすると “Test” の文字列を『EspServer.php』へ送信します
なので、『テスト送信』ボタンで ”Test” が『EspServer.php』に送信され、『EspServer.php』から ”Test_Response” 文字列が返送されることになります
<!DOCTYPE HTML>
<html lang=ja>
<head>
<meta charset=UTF-8 name="viewport" content="width=device-width, initial-scale=1">
<title>Esp32モニタ</title>
<link rel="icon" href="data:,">
<style>
.cmd-menu
{
text-align: center;
background-color: #E1F0B4;
font-weight: bold;
font-size: 15px;
}
.cmd-btn
{
width: 100%;
margin-bottom: 2px;
}
</style>
</head>
<body>
<div class="connect-box">
<header class="cmd-menu"><h3>テスト</h3></header>
<input type="button" class="cmd-btn" id="Id_Test" value="テスト送信" onmouseup="mouseUp(this.id)">
</div>
<script>
var gGateway = '192.168.2.109'; // ｻｰﾊﾞIPｱﾄﾞﾚｽ
var gWebsocket = null; // Wgbsocket本体
window.addEventListener( 'load', onLoad );
/*************************/
/* ﾛｰﾄﾞ完了ｲﾍﾞﾝﾄ */
/*************************/
function onLoad()
{
initWebSocket(); // WebSocket初期化
}
/*************************/
/* WebSocket初期化 */
/*************************/
function initWebSocket()
{
gWebsocket = new WebSocket( 'ws:' + gGateway + ':8080' );
gWebsocket.onopen = onOpen;
gWebsocket.onclose = onClose;
gWebsocket.onerror = onError;
gWebsocket.onmessage = onMessage;
}
/*************************/
/* WebSocketｵｰﾌﾟﾝ */
/*************************/
function onOpen( event )
{
gWebsocket.send( "Opened" ); // ｵｰﾌﾟﾝ通知
}
/*************************/
/* WebSocketｸﾛｰｽﾞ */
/*************************/
function onClose( event )
{
setTimeout( initWebSocket, 2000 ); // 2秒間隔で再接続を試行
}
/*************************/
/* WebSocketｴﾗｰ */
/*************************/
function onError( event )
{
}
/*************************/
/* WebSocket受信 */
/*************************/
function onMessage( event )
{
console.log( event.data );
}
/*************************/
/* ﾏｳｽｱｯﾌﾟ */
/*************************/
function mouseUp( id )
{
if (id === "Id_Test")
{
gWebsocket.send( "Test" ); // ﾃｽﾄ通知
}
}
</script>
</body>
</html>
実行結果
『server.php』を起動すると、私の場合『Xdebug・・・』を表示してますが、VSCODEでPHPのデバッグツールを設定しているために表示されてしまっています（気にしないでください）
『EspMonitor.html』を立ち上げた時に ”Opened” が表示され、『テスト送信』ボタンをクリックした時に ”Test” が表示されます
『EspMonitor.html』を立ち上げて、開発者用のデバッグツールを立ち上げた画面です。『EspServer.php』から返信されたデータをコンソールに出力しています
