Tech Sketch Bucket of Technical Chips by TIS Inc.

Kinect + OpenNIを使用して取得した「空間の使用頻度」をsocket.ioを利用してリアルタイムに確認する - ②(Node.js編)

Pocket

前回は環境構築を実施しました。今回はサーバ側の実装を進めていきます。
サーバ側の実装は「Node.js」を使用するため、Kinectを持っていなくても動作確認をすることが可能です。
Node.jsやExpress, express-resource, ejs-locals, socket.io等を使用するため、もし興味があれば今回分だけでも実装を試してみてください。


構成

フォルダ構成

フォルダ構成は以下のようになります。

この中でサーバ側で主に編集するのは、以下の4つになります。

  • app.js
  • connection.js
  • page.js
  • socketIoSample.js

また、Heatmap表示部分を作成する際には以下ファイルを編集します。

  • public配下
  • view配下

プロジェクトの作成

まずは、expressコマンドにてプロジェクトの雛形を作成します。
プロジェクト名称は、「kinect_rest_sample」にしました。

次に、必要なモジュールをインストールします。

「package.json」を以下のように編集します。
検証時のバージョンと合わせるために追加したモジュールはバージョンを細かく指定してあります。
もし最新版を使用する場合は、"*"にしておいてもよいと思います。

package.json

「package.json」の編集が終わったら以下のコマンドを実行しモジュールをインストールします。
インストールされたモジュールのバージョンは「npm list」確認することができます。

実装

ここから実装を開始するのですが、まずはアプリケーションが起動することを確認しておきましょう。

動作確認

express_template.png

無事動いていますね!

コードの追加/修正

それではソースをみていきましょう。
まずはサーバ側から。というわけで「app.js」。

app.js

connection.js

次はRestAPIリクエストを受け付ける「connection.js」です。

connection.jsは、REST APIを使った場合に呼ばれます。

詳細は公式のページに記載がありますが、例えば以下のようなリクエストで
newやcreate, show等が呼ぶことができます。

  • curl http://example.com:8888/connections/new/
  • → new

  • curl http://example.com:8888/connections/ -X POST --data @test.json
  • → create

  • curl http://example.com:8888/connections/1
  • → show

今回は、jsonデータをPostで受け取り、クライアントに送信するcreateのみ実装しました。

socketIoSample.js

ここではsocket.ioを使った通信に関する記載をしています。

受信したデータは接続されているクライアントすべてに emitしています。今回は「socket.io」の部分だけ別ファイルに切り出しています。

page.js

page.jsは、ブラウザでの表示部分です。

app.jsで定義したルーティングを元にページを表示します。
今回は一画面なので、top.ejsへのルーティングを定義しています。

ヒートマップ表示部分(View)の実装

次はヒートマップを表示部分のソースをみてみましょう。

top.ejs

まずは「top.ejs」

JavaScript, Stylesheet, Image等

次はpubilic配下です。
public配下には、以下の3つのフォルダが存在します。

  • images
  • javascripts
  • stylesheets

上記3つのフォルダは、/javascrpts/XXX や/stylesheets/XXX等のようなパス指定をすることで使用できます。

script.js

socket.ioのクライアント部分です。

script.jsでは画面の読み込みとHeatmapの作成を実施しています。
Heatmap作成部分については、「http://www.patrick-wied.at/static/heatmapjs/」をご参照ください。

imagesとstylesheetについては今回は割愛します。

動作確認

それでは、動作確認を実施してみましょう。まずはアプリケーションを起動します。

次に、今回作成したヒートマップ表示用のURLにアクセスします。
http://example.com:8888/

curl_before.png

次に、サーバ側にcurlでデータを送信してみます。以下のコマンドを実行します。

test.jsonは/testdata/配下に格納してあるので使ってみてください。
また、dataの部分を変更して実行するとHeatmapの出力結果も変わるハズです。

curl_after.png

まとめ

無事にnode.js側の実装をすることができました。
このcurlコマンドで送信したリクエストをKinect側で生成することで、
KinectとNode.js間のデータ連携を実現します。
という訳で、次回はKinect側の実装をみていくことにします。

エンジニア採用中!私たちと一緒に働いてみませんか?