2012-09-09.nagoyapm07

Perl + Socket.IO
2012-09-09 Nagoya.pm #7
岩田享 / issm

大盛況おめでとうございます！

2012-09-09 Nagoya.pm
#7

あと

#7

なごやか Scala #4
休んでスミマセン＞＜

#7

アジェンダ
自己紹介

Socket.IO

Perl で Socket.IO

応用 1

応用 2

まとめと課題
#7

おまえだれよ？

岩田享 / issm（いわた）

http://blog.iss.ms/

@issm, qr/issmx{,2}/

個人事業

とある「商品」を販売 → 発注 → 発送管理
などするためのシステムを開発していたり

Perl / JavaScript CoffeeScript
#7

引っ越し！

#7

入院！

#7

夏のイベント参加不可！orz

#7

そんな 8月

#7

x10くらい

x２
#7

本題

#7

Socket.IO
WebSocket 通信なライブラリ

http://socket.io/

サーバサイド：socket.io

node 向けモジュール

クライアントサイド：socket.io.js

クロスブラウザ（Websocket API, XHR, Flash)

#7

Socket.IO
[server]
var app = ...
, io = require(‘socket.io’).listen(app)
;

#7

Socket.IO
[server]
io.sockets.on(
‘connection’, function(socket){...}
);

#7

Socket.IO
[server]
// in ‘connection’ hander
socket.emit(‘hello’, {foo: ‘bar’});
socket.on(
‘event’, function(msg){
console.log(msg);
}
);

#7

Socket.IO
[client]
var socket = io.connect();

#7

Socket.IO
[client]
socket.on(
‘hello’, function(msg){
alert(‘hello’);
}
);

socket.emit(
‘event’,
{ a: ‘hoge: b: [‘fuga’, ‘piyo’] }
);

#7

Perl で Socket.IO
PocketIO
元 Plack::Middleware::SocketIO (DEPRECATED!)

node の socket.io モジュール非依存
% cpanm PocketIO

Webサーバには Twiggy を使う！
% plackup -s Twiggy -a app.psgi

#7

Perl で Socket.IO
SYNOPSIS
# app.psgi
use Plack::Builder;
use PocketIO;

builder {
mount ‘/socket.io/’ => PocketIO->new(
handler => sub {
my ($socket) = @_,
...
},
);

mount ‘/’ => sub {
my $app = ...
};
}; 2012-09-09 Nagoya.pm
#7

Perl で Socket.IO
SYNOPSIS
# in handler
my ($socket) = @_;

$socket->on(
event => sub {
my ($self, $msg) = @_;
use Data::Dumper;
warn Dumper $msg;
}
);

$socket->emit( ‘hello’, { foo => ‘bar’ } );

#7

Perl で Socket.IO
クライアント JavaScript 側

socket.io.js をそのまま使える！

#7

応用 1
SiTeWiki
自作の Textile 記法による Wiki っぽい何か

https://github.com/issm/SiTeWiki

#7

応用 1

#7

応用 1
リアルタイムプレビュー（Markdown記法）

http://d.hatena.ne.jp/sugyan/
20110722/1311302687

http://www.songmu.jp/riji/archives/2012/09/
pocketio.html

#7

Textile記法でも！

#7

#7

デモ

#7

応用 2
SiTeWiki
自作の Textile 記法による Wiki っぽい何か

https://github.com/issm/SiTeWiki

データ格納ディレクトリを設定可能

Dropbox共有下においてリモートで編集

#7

応用 2
データディレクトリを監視して変更があれば
対応するページを開いているクライアントに
通知して表示を更新したい！

Client

Client

監視
Client
Editor Data
変更
#7

応用 2
監視ツールの概要

Filesys::Notify::Simple で監視

イベントを emit するスクリプトを呼ぶ

Protocol::WebSocket とか使えば
Perlでも書けるんだろうけど（ｒｙ

#7

応用 2
イベント emit スクリプト

PhantomJS で WebSocket通信

「データが更新された」イベントを emit

#7

応用 2
はじめての PhantomJS
#!/usr/bin/env phantomjs
var args = [];
phantom.args.forEach( function (n) { args.push(n) } );

var target, paths;
target = args.shift();
paths = args || [];

var page = require('webpage').create();
page.open(target, function (status) {
page.evaluate(function (paths) {
var socket = io.connect();
socket.emit('data_updated', { paths: paths });
}, paths);

#7

まとめと課題
PocketIO で Perl でも WebSocket できるよ！

リアルタイムプレビュー的な機能を実装してみた

実際に動くのを見るとやっぱりオモシロイ！

#7

まとめと課題
WebSocket 通信を
nginx 経由でリバースプロキシできない＞＜

HTTP 1.1 における “Upgrade” がどうのこうの

nginx_tcp_proxy_module で解決できるらしい

https://github.com/yaoweibin/nginx_tcp_proxy_module

#7

ご静聴ありがとうございました！

#7

Q?

#7

2012-09-09.nagoyapm07

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (6)

Similar to 2012-09-09.nagoyapm07

Similar to 2012-09-09.nagoyapm07 (20)

2012-09-09.nagoyapm07

Editor's Notes