Raspberry Pi + Socket.IOでチャットアプリ
このエントリは前回の続きです。
Socket.IOを使ったチャットアプリの作成
Socket.IOをインストールとして簡易チャットアプリを作成します。といっても、このサイトのサンプルを移植しただけです、はい…
Socket.IOのインストール
まずは作業フォルダを用意します。前回同様、express + EJSでひな形を作成します。
$ express -e socketio create : socketio create : socketio/package.json create : socketio/app.js create : socketio/public create : socketio/public/javascripts create : socketio/public/images create : socketio/public/stylesheets create : socketio/public/stylesheets/style.css create : socketio/routes create : socketio/routes/index.js create : socketio/routes/user.js create : socketio/views create : socketio/views/index.ejs install dependencies: $ cd socketio && npm install run the app: $ node app $ cd socketio && npm install
Socket.IOをインストールします。
$ npm install socket.io
現時点ではSocket.IO ver0.9.13がインストールされました。
アプリの作成
アプリの作成のため、下記のファイルを作成・修正します。
- app.js
- views/index.ejs
- public/javascripts/jquery-1.8.3.min.js (追加)
- public/javascripts/chat.js (追加)
- routes/index.js
サーバサイド(app.js)
/** * Module dependencies. */ var express = require('express') , routes = require('./routes') , http = require('http') , path = require('path'); var app = express() , http = require('http') , server = http.createServer(app) , io = require('socket.io').listen(server); app.configure(function(){ app.set('port', process.env.PORT || 3000); app.set('views', __dirname + '/views'); app.set('view engine', 'ejs'); app.use(express.favicon()); app.use(express.logger('dev')); app.use(express.bodyParser()); app.use(express.methodOverride()); app.use(app.router); app.use(express.static(path.join(__dirname, 'public'))); }); app.configure('development', function(){ app.use(express.errorHandler()); }); app.get('/', routes.index); // ソケットを作る var socketIO = require('socket.io'); // クライアントの接続を待つ server.listen(3000); // クライアントが接続してきたときの処理 io.sockets.on('connection', function(socket) { console.log("connection"); // メッセージを受けた時の処理 socket.on('message', function(data) { // 接続していクライアントに全てに送信 console.log("message"); socket.broadcast.emit('message', { value: data.value }); }); // クライアントが切断した時に処理 socket.on('disconnection', function() { console.log("disconnection"); }); });
クライアントサイド(index.ejs)
クライアントサイドでは、jQueryを使うのでダウンロードしてローカルに配置します。public/javascriptsディレクトリで
$ wget http://code.jquery.com/jquery-1.8.3.min.js
そしてメインのchat.jsをpublic/javascriptsディレクトリに作成します。
var socket = io.connect(); // WebSocketでの接続 socket.on('connect', function(msg) { console.log("connet"); $('#connectId').html('あなたの接続ID::' + socket.socket.transport.sessid); $('#type').html('接続方式::' + socket.socket.transport.name); }); // メッセージを受信 socket.on('message', function(msg) { // メッセージを画面に表示する $('#receiveMsg').prepend(msg.value + '<br>'); }); // メッセージを送信する function SendMsg() { var msg = $('#message').val(); // メッセージを送信 socket.emit('message', { value: msg }); $('#message').val(''); } // 切断する function DisConnect() { var msg = socket.socket.transport.sessid + "は切断しました"; // メッセージを送信する socket.emit('message', { value: msg }); // socketを切断する socket.disconnect(); }
views/index.ejsを修正してjQueryやchat.jsを読み込むように設定し、簡単なUIを作成します。
<!DOCTYPE html> <html> <head> <title><%= title %></title> <script src="/javascripts/jquery-1.8.3.min.js"></script> <script src="/socket.io/socket.io.js"></script> <script src="/javascripts/chat.js"></script> <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>
最後にタイトルを修正しておきます。routes/index.jsを修正します。
/* * GET home page. */ exports.index = function(req, res){ res.render('index', { title: 'Socket.IOサンプル' }); };
これでnodeを実行してブラウザを複数起動してチャットできればOKです。
$ node app.js
普通のPCと同じ手順でできちゃいますね...
次はGPIOとかをコントロールしてWebと繋ぎたいですね。