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

f:id:tomo_watanabe:20130103160439p:plain

普通のPCと同じ手順でできちゃいますね...

次はGPIOとかをコントロールしてWebと繋ぎたいですね。