Socket.IOでセンサー＆MongoDB〜AngularJSアプリ間の通信を行う：Arduinoで始めるWeb技術者のためのIoT入門（6）（1/3 ページ）

連載目次

　前回の「MEANスタックで家電制御アプリを作るための設計・準備と温度湿度センサーからのデータ読み取り」に引き続き、スマートフォンから家電を操作するためのWebシステムを作っていきます。前回は設計指針を解説し、anugular-fullstackジェネレーターでアプリケーションのひな型を作成しました。

　今回は、Arduinoとの通信部分、Model定義、UIについて解説しながら完成を目指します。今回のコードはGitHubに公開していますので、下記のコマンドでダウンロードしてください。

git clone https://github.com/iwanaga/hemsjs.git

前回記事で用意したUI

angular-fullstackで生成されたコードの解説

　まずは、ジェネレーターで生成したコード構成を把握して、全体像をつかみます。

サーバー側

◇app.js

　サーバーを起動する際、まずこのファイルを実行します。Socket.IOサービスとの連携処理は、このファイルでrequireしています。今回組み込むArduinoとの通信サービスも、このファイルでrequireしてコードの統一感を維持します。

◇api

　このディレクトリにはAPIエンドポイントに関するファイルを配置します。下記コマンドを実行すると、ここにファイルが生成されます。このひな型を基にして、コードを書いていきます。

yo angular-fullstack:endpoint ｛リソース名｝

◇index.js

　リソース固有のルーティングを定義します。

• *.model.js

　mongooseのmodelメソッドを使って、スキーマ定義を記述します。詳細は後ほど解説します。

• *.socket.js

　angular-fullstackの工夫が見られるファイルです。リソース固有のSocket.IOイベント処理を記述します。今回は、MongoDBへの保存が完了したときに、クライアントへemitする処理を定義します。

◇config

　listen portやexpressミドルウェアを指定するファイルがあります。注目すべきファイルは下記のsocketio.jsです。

• socketio.js

　Socket.IOの「接続時」と「切断時」の挙動を定義します。ファイルが肥大化しないように工夫してあり、onConnect関数が重要な役割を持っています。

クライアント側

◇app

　UIコンポーネントのファイルを配置します。下記のコマンドを実行すると、ここにファイルが生成されます。

yo angular-fullstack:route ｛コンポーネント名｝

◇components

　複数のコントローラーで利用するサービスが格納されています。Socket.IOをラップしたsocketサービスの実体もここにあります。

◇e2e

　end to endテストのファイルを配置します。

• *.po.js

　「po」とは「Page Object」の略です。テストで利用するDOMを取得してエクスポートするだけの内容になっています。他のテストでも再利用可能にするために、テスト本体のファイルから分離しています。テスト実行時はAngularJSのend to endテストフレームワークである「Protractor」のAPIを利用して「バインドしているデータの変数名でエレメントを取得する」といったことも可能です。

• *.spec.js

　テストの本体です。beforeEachでPage Objectをインポートし、結合テストを行います。