PLCからゲートウェイでデータを取得しデータベースにJSONで保存 (6)

PHP MySQL IoT JSON

PLCからゲートウェイでデータを取得し、データベースにJSONで保存します。複数回に分けて、サンプルを用いて解説します。
前回は、PLCから取得したデータをデータベースに保存しました。

PLCからゲートウェイでデータを取得しデータベースにJSONで保存 (5)

タイトルに書かれたテーマは前回で完了しています。完了していますが、これでは何か物足りないと感じ、今回はデータベースに次々と書かれるPLCからのデータをブラウザに表示してみます。

WEBアプリケーション

データベースのデータをWEBブラウザに表示するために、WEBアプリケーションをサーバ上に作成します。このサンプルでは、WEBアプリケーションはPHPスクリプトで実装します。

いよいよ図が窮屈になってきました。これ以上に窮屈な図は、もはや理解容易性の面で逆効果です。正確さと理解容易性は、ある時点以後、反比例します。

PHPである必要はありません。では、このサンプルを何故にPHPスクリプトで実装するのか？それは、そこ（私の開発環境）にPHPが稼働していたから。

PHPの準備についてはここでは解説しません。PHPの準備についての解説は、他の記事にお任せします。PHPスクリプトでのMySQLアクセスについても、他の記事にお任せします。

HTMLとPHPスクリプト、そしてJavaScript

結果的には、サーバ・サイドはPHPスクリプトのみではなく、以下の3つのファイルで構成してみました。

HTML
PHPスクリプト
JavaScript

3つめの JavaScript は jQuery です。jQuery は一般に配布されているとても便利なライブラリです。jQuery を利用することにより、とても高機能なWEBアプリケーションを短期間で実装することができます。jQuery の解説も他の記事にお任せします。

以下がサンプルです。

index.htm

<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta http-equiv="Cache-Control" content="no-cache">
  <title>Sample</title>
  <script type="text/javascript" src="js/jquery-3.6.0.min.js"></script>
  <script type="text/javascript">
    function count_update() {
      $.ajax({
        url:"index.php",
        method:"POST",
        success:function(data) {
          $('#count').html(data);
        }
      });
    }
    $(function() {
      setInterval (
        function() {
          count_update();
        },
        1000
      );
    });
  </script>
</head>
<body>
  count: <div id="count" style="display: inline-block;">count</div>
</body>
</html>

index.php

<?php
  try {
    $dbh = new PDO('mysql:dbname=hoge;host=localhost;charset=utf8;'
    , 'hoge'
    , 'hoge001');
  } catch (PDOException $e) {
    echo "Can't connect to database: " . $e->getMessage() . "\n";
    exit();
  }

  $sql = "SELECT JSON_EXTRACT(body, '$.value') AS count FROM from_plc ORDER BY time_insert DESC";
  $res= $dbh->query($sql);
  foreach($res as $value) {
    echo $value['count'];
    break;
  }
?>

jQuery は、HTML中で参照されている、jquery-3.6.0.min.js です。
HTML中には、jQueryを呼び出すオリジナルのJavaScriptスクリプトを書いています。
いずれもコードの解説はいたしません。

WEBブラウザでアクセスしてみる

WEBブラウザで上記の index.htm を参照すると以下ようになります。

数字は、データベース上のテーブルが更新される都度変化してます。（正確には、JSONの要素"value"の値が変化してから1秒以内に、ブラウザの表示も変化します）

ここまでサンプルとして実装したシステムを応用すると、工場の機器により製造される製品の生産数を、ほぼリアルタイムに画面表示する、といったシステムを構築することができます。
勘違いしていただきたくないのは、この記事で示したサンプルはあくまでもサンプルであって、基盤となるミドルウェアやプロトコル、プログラム言語は、この記事のサンプルで使用したものである必要はありません。もし、この記事で取り上げたような、PLCからデータを取得し、これを処理するようなシステムを設計・構築する場合は、この記事の内容にとらわれず、それぞれの環境、条件、実現したい機能などに応じて、最適なハードウェア、ミドルウェア、プロトコル、プログラム言語、そしてアーキテクチャを想像し選択してください。