2014-05-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向けに導入してみました。

【初心者向け】node.js(0.10x) + socket.io(0.9x)のサンプルプログラム

雛形を作成します。

# 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の定義方法などが異なるため、参考にしたサイトより、必要な部分だけを抜き出して利用させていただきました。

投稿者 時刻: 15:21
ラベル: , , , , , , , , ,

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)