前回まででNUCのハードを組み立てて、OSやJavaScript実行環境Node.jsなど、基本的なソフトのインストールを準備しました。

今回はいよいよWebSocketサーバーを立ち上げ、アプリを動かします。

WebSocketサーバーといっても、今回はWebSocketサーバーそのものを作るわけではありません。サーバーにはNode.jsのnpmパッケージからwsというWebSocket用モジュールを利用します。

このモジュールはあの有名なSocket.IOで、WebSocketのコアの部分にも使われている高速なWebSocketサーバーを持っています。アイディア次第で、たとえば、チャットサーバーにでも、ゲームデータサーバーにでも、あるいは、ニュース配信サーバーにでも何にでも使えます。

「WebSocket」自体は双方向通信のプロトコルとAPIというだけですので、その使い方次第で用途は無数に考えられるわけです。

今回作るもの

今回は、NUCを使って、とりあえずWebSocketサーバーを立ち上げてみようという短期連載ですので、その雰囲気がわかる程度の簡単なものでやってみます。

恐縮ですが拙著「Node.jsプログラミングガイド」のサンプルの中から、WebSocketを使ったリアルタイムチャートを作ってみます。ここでのWebSocketサーバーは、チャートへデータを連続的にプッシュし続ける機能を担います。

まず最初に前回もチラ見した、仕上がりをもう一度見てみましょう。

下の赤い「Play」ボタンをクリックすると動きます。

(invalid jsdo.it code)

上記チャートはccchartですが、チャートが変化し続けるためのデータがサーバー側からリアルタイムにプッシュされ続けています。Ajaxなどのように、ブラウザ側からユーザーがリクエストする必要はありません。

このケースでは、すべての接続しているブラウザのチャートへデータが自動的にプッシュされ続けます。

この仕組みを使えば、たとえば、社内の毎時変化するデータなどを関係者全員がリアルタイムに閲覧するといったシステムを作ることも簡単です。

ちなみに参考までですが、ccchartのメリットはCanvasベースなので高速でSVGよりもプラットフォーム依存が少ないことと、インターネットにつながっている必要もないのでイントラネットでも使えることなどでしょうか。

(※今回は解説できませんが、もし、このサンプルが動かない環境なら、ポートを80や443などにする必要があるかもしれません。ただし、Linuxでは80などのwell-known ポートは、今回のようなユーザー権限ではなくroot権限で起動する必要があり、セキュアにすることも考慮すると別途少し手間がかかります)

では、これをNUC内に置いてみます。

ソースを取得する

まず、今回使うソースを手に入れます。「Node.jsプログラミングガイド」のサンプルページ 1-Basic Knowledge 基礎知識 から 02-wsserver2にある2つのファイル chart.htm wsserver.js をコピーします。クライアント側のHTMLとJavaScript、つまりchart.htmのコードは、下記にもありますが jsdo.itのサンプルからもご確認いただけます。

アプリ用のディレクトリを用意する

ファイルを作る場所はお好みですが、今回は、ユーザー名を仮にhogeとして、ホームディレクトリ(/home/hoge) 配下へ前回作っておいた公開用ディレクトリ /home/hoge/public_html を利用して、Apacheで公開してみます。

作成するディレクトリツリーは、次のようになります。

/home/hoge ├──public_html/ │ └─mychart
│ └─chart.htm └──wsserver.js

まず、ホームディレクトリのpublic_html下にchart.htmを置くためのディレクトリmychartを作ります。

cd /home/hoge/public_html
mkdir mychart
cd mychart

mychartディレクトリができたら、そこへ chart.htm をFTPでアップロードしておきましょう。wsserver.jsは、/home/hoge直下へ置きます。

次に、そのひとつ上の非公開ディレクトリ /home/hoge/ 内に node_modules というディレクトリを作ります。

cd /home/hoge
mkdir node_modules

これは、Nodeのモジュールが格納される場所で、ディレクトリ/home/hoge配下でインストールするローカルなモジュールは、(インストールコマンドnpmの引数-gを指定しなければ) ここに入ります。

また、wsserver.jsはサーバー側ですので一般的には、公開ディレクトリpublic_htmlではなく非公開な場所(今回は/home/hoge直下)へアップロードします。

WebSocket用モジュールをインストール

では次にNodeのWebSocket用モジュールwsを入れてみます。これには高速なWebSocketサーバーとクライアントが同梱されています。

では入れてみましょう。

npm i ws

これだけです。(npm install wsと同じ意味です) では、node_modules下に本当に入ったのかlsコマンドで見てみましょう。

ls -l /home/tato/node_modules

すると、下記のように表示されるのでwsが入っていることがわかります。 total 4 drwxrwxr-x 11 hoge hoge 4096 1月 15 18:36 ws 作成されたディレクトリツリーは、次のようになっているはずです。

/home/hoge ├──public_html/ │ └─mychart
│ └─chart.htm ├──wsserver.js └──node_modules/ ←追加された └─ ws/

これで、設置完了です。簡単でしょう？ でも、ここでhttp://192.168.1.180/~hoge/chart.htmをブラウザで開いても動きません。

サーバーが起動していないからです。

では、動かしましょう。

WebSocketサーバーを起動する

以下のおまじないを打ち込みます。ホームディレクトリ/home/hoge/下のwsserver.jsをNodeで動かすという意味です。

node ~/wsserver.js

node /home/hoge/wsserver.jsでも同じ意味になります。

もし、ここでエラーが出なければ、同一ネットワーク内の他のパソコンのブラウザで http://192.168.1.180/~hoge/chart.htm を開いてみてください。

動いてますね。さらに、別のパソコンで開いても見ることができます。

永続化

「node ~/wsserver.js」でサーバーを起動しましたが、このままでは、sshの接続を切るとサーバーが止まってしまいます。

そこで、永続化やNUCの再起動時も自動で立ち上がるための仕掛けが必要です。

永続化には、foreverというモジュールがよく使われます。再起動時の自動起動は、/etc/init.dへの登録などの方法がありますが、残念ながら紙面の都合で書ききれませんので、不明な方はこれらのキーワードで調べてみてください。

この連載のアクセスが多ければ続きを書けるかもしれません(笑)。 でも、それを待つよりも、もしわからなければ、自分で調べると身につきますよ。

サーバー側のコード

参考までにサーバー側ソースは次のようなものです。

手短に言うと、指定したポートへクライアントから接続があると、0.3秒ごとに生成しているデータをすべてのクライアントへプッシュしています。詳しくはソースとコメントをご覧ください。

//WebSocket Serverモジュールを読み込む
var WsServer = require('ws').Server;
//port: 3001でリッスンするサーバーを作成する
var ws = new WsServer({ port: 3001 });
//タイマーID
var tid;

broadCast();//データ配信開始

function broadCast(){
  //0.3秒ごとにデータを送信する
  tid = setInterval (function(){
    //データを作る
    var dataAry = mkData();
    //すべてのクライアントへ送信する
    ws.clients.forEach(function(client) { 
      client.send(JSON.stringify(dataAry));
    });
  }, 300);
}

// 送信用ランダムデータを作成する(実際には必要なデータを与える)
function mkData(){
  //送信データ形式の雛形
  var data = [
      ["時間"],
      ["s2"],
      ["s3"]
    ];

  //時間の文字列を作成する
  var now = new Date();
  var H = now.getHours();
  var M = now.getMinutes();
  var S = now.getSeconds();
  H = (H < 10)?'0'+H:H;
  M = (M < 10)?'0'+M:M;
  S = (S < 10)?'0'+S:S;
  
  //送信データを作成する
  data[0]=H +':' + M +':' + S;
  data[1]=Math.floor(Math.random(10) * 96 );
  data[2]=32 + Math.floor(Math.random(10) * 18);
  return data;
}

クライアント側のコード

ccchart自体の使い方は今回は紙面の都合で触れませんが、ポイントは、ccchartのwsメソッドの引数でサーバー側のIPアドレスとポートを指定している部分です。そこから流れてきたデータを自動的にconfigで指定した形式にチャート化します。

<script src="http://ccchart.com/js/ccchart.js" charset="utf-8"></script>
<canvas id="hoge"></canvas>
<script>

var chartdata = {
 //チャートの設定
 "config": {
    "title": "WebSocket TEST",
    "subTitle": "列データをリアルタイム受信描画 受信パターンはoneColAtATime",
    "type": "bezi2",//チャートタイプベジェ曲線 他にline, barなど
    "width" : 465,//幅
    "lineWidth": 2,//線の太さ
    "minY": 0,//最小Y値
    "xScaleSkip": 5,//垂直目盛のスキップ
    "colorSet": //カラーセット
          ["#DDA0DD","#3CB000"]
  },
  //データの雛形
  "data": [
    ["時間"],
    ["s2"],
    ["s3"]
  ]
};

ccchart
  .init('hoge', chartdata) //要素hogeへチャートデータchartdataを出力する
  .ws('ws://192.168.1.180:3001') //このURLをサーバー側のIPとポートに合わせる
  .on('message', ccchart.wscase.oneColAtATime);//このパターンで受信する
        // oneColAtATimeは、WebSocketの受信パターン関数
        // 一度に1列ずつ [["2013"],[435],[600]] といった配列で届く場合用
        // 参照: http://ccchart.org/test/someCols/test-2.htm
</script>

最後に

以上、駆け足で手のひらサイズのWebSocketサーバーを組み立ててみました。

ほんの10年ほど前までは、一般的には、手のひらサイズのサーバーなどほとんど考えることもありませんでしたが、今、それはすでに目の前にあります。

一方に社外クラウドサーバーを利用する大きな流れがありますが、同時に、目の前には、わずか数万円でモニタの裏にも貼れるような小さな内製サーバーを作れるという選択肢も生まれたわけです。

エクセルを使って仕事の効率を上げるように、ちょっとした業務には、どこにでも持っていける小さな内製サーバーを使って効率を上げるということも可能な時代になりつつあります。

多くの業務と製品がネットワーク経由のサービスと無縁ではなくなりつつある今、たとえば、機動性の高いサービスをより現場に近い場所で、NUCを使って次々と立ち上げるといった未来が、文字通り、今、私たちの手の上にあります。

NUC 自体の用途は限定されていません。さて、どんな未来を作りましょうか？

＜関連レポート＞
NUCで手のひらサイズの格安WebSocketサーバーを立ててみた(ハード組立編)を読む⇒
NUCで手のひらサイズの格安WebSocketサーバーを立ててみた（OSインストール編）を読む⇒

前回は、NUCのハードを組み立ててましたが、次は、ソフトのインストールです。慣れてる方には無用な講義ですが、一応ざっくりとした手順をメモしてみました。

もちろん、必ずしもこの手順通りである必要はありません。また、目安の時間を入れてありますが、あくまでも目安であって、休憩時間も含みません(笑)。

焦らずに、もしわからないところがあればネットなどで調べながらでも着実にやっていきましょう。

【30分】OSダウンロード

OSは最近人気のLinuxディストリビューションUbuntuサーバーでバージョン13.10を入れました。下記でダウンロードしてDVDに焼いて準備します。

Ubuntu入手先 http://www.ubuntu.com/download/server

【12分】OSインストール

DVDをUSBへ接続してNUCを起動すると、Ubuntuのインストールが始まります。

※インテルによるOSインストールの説明ページもあります。

今回は、最初はssh以外は特に何もいれず、必要なものは後から必要な時に追加する方針でタイトなインストールをしました。Ubuntuサーバー自体の詳細なインストール方法はここでは省略しますが、miniSSDのせいか、HDDのPCで20～30分かかるこの作業が、なんと10分程で終わりました。

特別な設定がなければ、・ユーザー名とパスワード・ディスクへの書き込み許可・ソフトウェアの選択で「OpenSSH server」をスペースキーで選ぶ以外は、質問にほぼ改行するだけでもインストールできます。

ネットワーク設定はもしDHCPで割り当てのある環境なら最初はお任せでも構いませんし、もし、IPを決めてあるなら設定しておくとあとの手間が省けます。

ここでは、ユーザー名は仮にhogeとしました。 そして、OSインストール後の作業は次の通り。

【1分】自分のIPアドレスを確認してみる

OSインストール後、再起動してログインしたら、IPアドレスを確認してみましょう。

ifconfig

と打ってみます。するとたとえば次のように表示されます。 hoge@ubuntu:~$ ifconfig
em1 Link encap:Ethernet HWaddr ec:a8:6b:fe:a3:eb
inet addr:192.168.1.180 Bcast:192.168.1.255 Mask:255.255.255.0 　　　： この NUC の場合は「inet addr」のあとの 192.168.1.180 が IP アドレスです。自分でIPアドレスを指定する場合は、/etc/network/interfaces を修正します。もし、ルーターやバーチャルドメインなどを設定すれば、普通のサイトのようにサーバーを外部へ公開することも可能ですが、今回はそこは省略します。

【1分】SSHクライアントからログイン

Ubuntuインストール時に入力したアカウント(今回はhoge)で他のパソコンから上記IPアドレスへログインします。Macならターミナルを使い、たとえば、パスワード認証なら、次のように打てば対話形式で入れます。

ssh hoge@192.168.1.180

Windows なら SSH クライアントがなければ Poderosa などをインストールし、それでログインします。

【30秒】apt-get（パッケージ管理システム ）のアップデート

apt-getは必要なパッケージのダウンロードからインストールを依存関係も含めて自動的に行ってくれる便利な管理システムです。次のコマンドでそのパッケージ・リストをまず更新しておきます。sudoでアカウントのパスワードを要求されるので入力するとアップデートが始まります。

sudo apt-get update

【20秒】FTP（ファイル転送サーバー）のインストール

HTMLやjsファイルをNUCへアップロードするために FTP サーバーも入れておきます。下記apt-getですぐに動作しますが、各種設定をする場合は別途ネットなどでご確認ください。

sudo apt-get install proftpd

対話形式で設問に答えますが、起動方法でinetdかスタンドアロンかを聞かれます。ここでは inetd で設定しました。

【20秒】Apache（Webサーバー）のインストール

WebSocket単体で使う場合や、Nodeなどでhttpサーバーを立てるならまったく不要ですが、やはりApacheはあると便利なので入れておきます。今回は、HTMLはApache で表示し、WebSocketサーバーからのデータをそのHTML内の JavaScript で受け取るという形にしてみます。

sudo apt-get install apache2-mpm-prefork

ちなみにここで他のパソコンから、http://192.168.1.180と打てば下記画像のように「It/ works!」と表示され、もうすでにWebサーバーが動作してることがわかります。このHTMLファイルはデフォルトで /var/www/index.html にありますので、もう、これを書き換えるだけで HTTPサーバーは使えますが、今回のアプリはユーザーディレクトリに作ります。

【30秒】ユーザー用公開ディレクトリを用意する

今回はユーザー(hoge)のディレクトリ配下にアプリを作ってみます。次のようにして公開ディレクトリを用意します。

1. 1行目・ユーザーディレクトリを作成する
2. 2行目・ユーザーディレクトリを有効にする
3. 3行目・Apacheをリスタートする

mkdir ~/public_html
sudo a2enmod userdir
sudo service apache2 restart

ここで http://192.168.1.180/~hoge/　と打って 下記画像のようなユーザーディレクトリが表示されればOKです。

【2分】nvm（Nodeバージョン管理マネージャー）インストール

nvmは、複数のNode.jsバージョンをインストールし、切り替えて使うことを可能にするマネージャーです。Nodeはバージョンのアップデートが早いのでモジュールの依存対応も含めて簡単に切り替えられるnvmなどのバージョン管理マネージャーを入れておくと便利です。 gitを使ってインストールし、ログイン時の自動起動もセットしておきます。nvmの詳細は別途ご確認ください。

1. 1行目・git-coreをインストールする
2. 2行目・gitから/home/hoge/nvmへダウンロードする
3. 3行目・nvmを起動する
4. 4行目・nvmのヘルプを見てみる
5. 5行目・ログイン時にnvmが自動起動するように/home/hoge/.bashrcへ起動スクリプトをセットする

sudo apt-get install git-core
git clone git://github.com/creationix/nvm.git ~/nvm
. ~/nvm/nvm.sh
nvm help
echo ". ~/nvm/nvm.sh" >> ~/.bashrc

途中で[yes, no]と聞かれたら、特に意図が無ければ普通は、yesと答えます。

【2分】Node.js（JavaScript実行環境 ）インストール

そして、Nodeの最新安定バージョン今回は(v0.10.23)をインストール

1. 1、2行目・ビルド用のパッケージ群などをあらかじめ入れておく
2. 3行目・nvmでNodeのv0.10.23をインストールする
3. 4行目・nvmのヘルプを見てみる
4. 5行目・ログイン時にv0.10.23が使えるようにセットする

sudo apt-get install build-essential
sudo apt-get install libssl-dev
nvm install v0.10.23
echo "nvm use v0.10.23" >> ~/.bashrc

さて、ここまでで今回のWebSocketサーバー用の環境ははぼ完成です。 もうNode.jsは使えるようになっています。

次回はいよいよ、WebSocketサーバーを入れてアプリを立ち上げてみます。

＜関連レポート＞
NUCで手のひらサイズの格安WebSocketサーバーを立ててみた(ハード組立編)を読む⇒
NUCで手のひらサイズの格安WebSocketサーバーを立ててみた(アプリ起動編)を読む⇒

2012年11月からインテルが出荷をはじめたNUC (Next Unit of Computing)という製品群が自作系PCながら意外にひそかな(?)注目を集めています。※1

今回はこのNUCを使って、手のひらサイズの格安 WebSocket サーバーを立ち上げ、それで動くアプリを作ってみました。

NUCって何？

NUCは、本体にメモリやストレージなどを追加して自分で組み立てる、いわゆる自作パソコンの仲間ですが、その特徴は、10com四方の超小型でありながら、最新性能で格安ということです。

それは、こんな外観です。

手のひらサイズで総額3～7万円程度で仕上がるにも関わらず、ストレージはminiSSD、CPUはCore i5も選べて無線 LAN・bluetooth タイプもあり、さらに全機種マルチモニター出力可能というフルスペック以上なマシンです。

性能も十分高いので、小さなパソコンとしてだけではなく、社内のいろいろなサーバー用途や、あるいは、複数ディスプレイをつなげるなどして、これから普及が見込まれるリアルタイムデジタルサイネージ（電子看板）などでも重宝しそうという優れもの。

多くの業務と製品がネットワーク経由のサービスと無縁ではなくなりつつある今、わずか数万円でどこにでも持ち歩ける手のひらサイズのサーバーを作り、たとえば、機動性の高いサービスをより現場に近い場所で、NUCを使って次々と立ち上げるというのも面白いかもしれません。

最近はスマートフォンなどの進撃に押されつつある巨人インテルですが、Next Unit of Computingという名称に込めたインテルの気合いが伝わってきます。

インテルは長友だけではないのです^^;。

今回作るサンプルをチラ見

さて、ここから、NUCの組み立てからOSやFTP、Apache、Nodeなどのインストールをこつこつやっていきますが、多少地味な作業なので、モチベーションを維持するべく、今回のお題の最終到達地点をチラ見しておきましょう。

WebSocketによるプッシュデータを受け取って表示するリアルタイムチャートです。 下の赤い「Play」ボタンをクリックすると動きます。(※もし、このサンプルが動かない環境ならポートを80や443などにする必要があるかもしれません)

(invalid jsdo.it code)

この仕組みを使えば、たとえば、社内の毎時変化する様々なデータの推移状況(たとえば、刻々と変わる販売チャートや様々なセンサー監視チャート、サーバーログチャート)などを関係者全員がリアルタイムにリロードなしで閲覧するといったシステムを作ることもできます。しかも、わずか数万円で。

では、材料から集め始めましょう。

今回使った材料

今回の素材は昨年2月に発売された格安版「NUC、DCCP847DYE」。

CPUはCeleronですが、miniSSDを付けて駆動すれば充分使えます。そして何より安い！今回は1万7千円弱程度で買えました。（※2014年1月現在。価格は変動します）

レシピ

このNUCを普通のデスクトップとしてではなく、今回はLinuxのUbuntuを入れ、Node.js+WebSocket サーバーとして、HTML5 Experts.jpらしく料理してみます。

• 名前：手のひらサイズの格安 WebSocket サーバー
• 所要時間：2時間弱(うまくいけば小1時間)
• 難易度： Linuxを少し使える(または、使いたいという意思を持っている)方
• 素材 ハード：(総額約3万円程度 *価格は変動します)
  　　　
  1. NUC DCCP847DYE　16,600円
  2. ストレージ　 8,889円 PLEXTOR PX-64M5M SATA 6Gb/s対応の高速 mSATA SSD64GB
  3. メモリ　5,615円 G.Skill F3-1600C9D-8GRSL (1.35 V対応) 4G
  4. 電源ケーブル　490円 BUFFALO 3P型ミッキープラグ BSACC0802BK 0.2m
  5. (上記の他にキーボード、マウス、HDMI ケーブルとOSインストール用 USBタイプのDVDディスクドライブも用意しますが、サーバーなので Win や Mac から SSH でリモート接続して使うと稼働後はほぼ不要なので他のパソコン用のものを流用しました。)
• 素材 ソフト：（0円）
  　　　
  1. OS　Ubuntu Server 13.10
  2. JavaScript実行環境 Node.js v0.10.23
  3. WebSocketサーバー ws
  4. その他 パッケージ管理 npm, バージョン管理nvm, Webサーバー Apache

一応、作業時間もメモしておきますが、これらはあくまで目安ですのでご了承ください。

【20分】組み立てます

では組み立ててみます。 (時間を節約するためにできれば、下のOSダウンロードも平行して進めておきましょう)

パッケージを開けると、おなじみインテルCMのあのジングルが鳴る♪

mSATA SSDはこんなに小さい(別売)

裏ぶたを外して、メモリとmSATA SSDを取り付け。説明図見ながら付ける。

ふたを閉める。もう完成！

モニタの裏に取り付けるVESA規格のパーツもついてる

あっという間に完成です。

次回は、このNUCにソフトをインストールします。

予習：OSはUbuntuサーバーを使いますが、次回のためにあらかじめ下記のOSをダウンロードして、DVDに焼いておきましょう。Ubuntu入手先(Ubuntuサーバー　バージョン 13.10) http://www.ubuntu.com/download/server　*もし、DVDの焼き方がわからなくても自力で調べてやってみましょう。

＜関連レポート＞
NUCで手のひらサイズの格安WebSocketサーバーを立ててみた（OSインストール編）を読む⇒
NUCで手のひらサイズの格安WebSocketサーバーを立ててみた(アプリ起動編)を読む⇒