2014年5月14日水曜日

[.tested] express + socket.ioによるWebSocket実装方法について [debian Wheezy][AX3][A7][A6]

前回インストールした、node.js上でexpressおよびsocket.ioを使用した、Websocket通信のテストを行ってみました。
Aシリーズでのnode.jsのビルド方法については、前回の記事を参考にしてください。

[.tested] node.js [debian Wheezy][AX3][A7][A6]

<検証環境>
Debian 7.1 Wheezy
OpenBlocks AX3/4 kernel: 3.2.40
OpenBlocks A7 Ketnel 3.2.40

<使用機器>
OpenBlocks AX3 DPパッケージ (もしくは、SSD搭載モデル)
OpenBlocks A7 DPパッケージ (もしくは、SSD搭載モデル)

1. 導入前の準備


express 4.0以降、雛形を作成するexpressコマンドは分離されているため、express-generatorをインストールします。

# sudo npm install -g express-generator

2. socket.ioのサンプルプログラムの作成


下記の記事を参考に、chatのサンプルプログラムをexpress 4.0向けに導入してみました。


雛形を作成します。

# express -e sample

以下、sampleというディレクトリに雛形が作成されます。

package.jsonを以下の内容に修正します。
  socket.ioを追加することにより、npm installによりsocket.ioも組み込まれます。

{
  "name": "application-name",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "dependencies": {
    "express": "~4.0.0",
    "static-favicon": "~1.0.0",
    "morgan": "~1.0.0",
    "cookie-parser": "~1.0.1",
    "body-parser": "~1.0.0",
    "debug": "~0.7.4",
    "ejs": "~0.8.5",
    "socket.io": "~*"
  }
}

bin/wwwにchatプログラム本体を記述します。
// add以下が追加される部分です。

#!/usr/bin/env node
var debug = require('debug')('my-application');
var app = require('../app');

app.set('port', process.env.PORT || 3000);

var server = app.listen(app.get('port'), function() {
  debug('Express server listening on port ' + server.address().port);
}); 

// add start
var socketIO = require('socket.io');
// クライアントの接続を待つ(IPアドレスとポート番号を結びつけます)
var io = socketIO.listen(server);

// クライアントが接続してきたときの処理
io.sockets.on('connection', function(socket) {
  console.log("connection");
  // メッセージを受けたときの処理
  socket.on('message', function(data) {
    // つながっているクライアント全員に送信
    console.log("message");
    io.sockets.emit('message', { value: data.value });
  });
  
  // クライアントが切断したときの処理
  socket.on('disconnect', function(){
    console.log("disconnect");
  });
});

クライアントサイドとして、views/index.ejsを作成します。

<script src="/socket.io/socket.io.js"></script>
<script type="text/javascript">
var socket = io.connect('http://接続するサーバのURLまたはIPアドレス:3000');
socket.on('connect', function(msg) {
  console.log("connet");
  document.getElementById("connectId").innerHTML = 
    "あなたの接続ID::" + socket.socket.transport.sessid;
  document.getElementById("type").innerHTML = 
    "接続方式::" + socket.socket.transport.name;
});

// メッセージを受けたとき
socket.on('message', function(msg) {
  // メッセージを画面に表示する
  document.getElementById("receiveMsg").innerHTML = msg.value;
});

// メッセージを送る
function SendMsg() {
  var msg = document.getElementById("message").value;
  // メッセージを発射する
  socket.emit('message', { value: msg });
}
// 切断する
function DisConnect() {
  var msg = socket.socket.transport.sessid + "は切断しました。";
  // メッセージを発射する
  socket.emit('message', { value: msg });
  // socketを切断する
  socket.disconnect();
}
</script>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>

  <h1>socket.ioのサンプルプログラム</h1>
  <div id="connectId"></div>
  <div id="type"></div>
  <br>
  <input type="text" id="message" value="">
  <input type="button" value="メッセージを送る" onclick="SendMsg()">
  <input type="button" value="切断する" onclick="DisConnect()">
  <div id="receiveMsg"></div>

  </body>
</html>

必要なパッケージをインストールします。

# npm install

3. 動作確認


サーバを起動します。

# ./bin/www

Webブラウザを立ち上げ、以下のURLまたはIPアドレスを指定してアクセスしてください。

http://サーバのURLまたはIPアドレス:3000

複数のブラウザ画面を立ち上げ、相互に入力した文字が表示されることを確認してください。


4. さいごに


上記の手順により、Aシリーズ上でビルドしたnode.jsのsocket.ioモジュールによるWebSocket通信の確認を行いました。

今回は、express 4の場合、functionの定義方法などが異なるため、参考にしたサイトより、必要な部分だけを抜き出して利用させていただきました。

2014年5月9日金曜日

[.tested] node.js [debian Wheezy][AX3][A7][A6]

node.jsはサーバサイドのJavaScriptインタプリタです。
今回は、node.jsのOpenBlocks Aシリーズへの導入を行いました。

<検証環境>
Debian 7.1 Wheezy
OpenBlocks AX3/4 kernel: 3.2.40
OpenBlocks A7 Ketnel 3.2.40

<使用機器>
OpenBlocks AX3 DPパッケージ (もしくは、SSD搭載モデル)
OpenBlocks A7 DPパッケージ (もしくは、SSD搭載モデル)

1. 導入前の準備


node.jsは、公式サイトからソースコードをダウンロードしてビルドを行います。
そのため、開発環境のインストールを行っておく必要があります。

OpenBlocks における開発環境構築手順について [debian Wheezy][AX3][A7][A6]

検索などをすると、npmのインストールのためにcurlを入れる事例などありますが、現状では、node.jsのインストールによりnpmもインストールされますので必要ありません。

2. node.jsのビルド


node.jsの公式サイトより最新のソースパッケージを入手してください。


以下の例は、2014/05/09時点での最新のバージョンです。

# wget http://nodejs.org/dist/v0.10.28/node-v0.10.28.tar.gz

展開します。

# tar xvzf node-v0.10.28.tar.gz
# cd node-v0.10.28

一般的には、ここでconfigureしてmakeするだけなのですが、Aシリーズの場合は、以下のパラメータを指定する必要があります。

AX3の場合

# ./configure --without-snapshot --with-arm-float-abi=hard

A7/6の場合

# ./configure --without-snapshot

また、A7/6の場合、一部のソースコードを修正する必要があります。

# vi deps/v8/src/arm/macro-assembler-arm.cc

以下のイタリック表記の3行を追加してください。

// We always generate arm code, never thumb code, even if V8 is compiled to
// thumb, so we require inter-working support
#if defined(__thumb__) && !defined(USE_THUMB_INTERWORK)
#error "flag -mthumb-interwork missing"
#endif

// ADD THESE THREE LINES TO macro-assembler-arm.cc

#if !defined(CAN_USE_THUMB_INSTRUCTIONS)
# define CAN_USE_THUMB_INSTRUCTIONS 1
#endif


// We do not support thumb inter-working with an arm architecture not supporting
// the blx instruction (below v5t).  If you know what CPU you are compiling for
// you can use -march=armv7 or similar.
#if defined(USE_THUMB_INTERWORK) && !defined(CAN_USE_THUMB_INSTRUCTIONS)
# error "For thumb inter-working we require an architecture which supports blx"
#endif

上記の修正および、configureの実行を行った後、makeを実行し、インストールします。

# make
# make install


3. 動作確認その他


インストール後、nodeコマンドを実行し動作を確認してください。

# node -v
v0.10.28

前述しましたが、npmは同時にインストールされます。


プロジェクト毎に必要なモジュールはインストールされますので、特にグローバルにインストールする必要はないようです。

*) 2014/05/12 expressに関しての記述は削除しました。