Aシリーズでのnode.jsのビルド方法については、前回の記事を参考にしてください。
<検証環境>
Debian 7.1 Wheezy
OpenBlocks AX3/4 kernel: 3.2.40
OpenBlocks A7 Ketnel 3.2.40
OpenBlocks AX3/4 kernel: 3.2.40
OpenBlocks A7 Ketnel 3.2.40
<使用機器>
OpenBlocks AX3 DPパッケージ (もしくは、SSD搭載モデル)
OpenBlocks A7 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": "~*"
}
}
"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の定義方法などが異なるため、参考にしたサイトより、必要な部分だけを抜き出して利用させていただきました。
