Perlゼミリアルタイムチャット (Mojolicious::Lite) / Mojoliciousサンプル
WebSocketを使ったリアルタイムチャットのサンプルです。複数の画面を開いても他の画面に書き込みがすぐに反映されます。
[f:id:perlcodesample:20100418234248p:image]
ソースコード
use strict;
use warnings;
use Mojolicious::Lite;
my $clients = {};
websocket '/' => sub {
my $self = shift;
# Client id
my $cid = "$self";
# Resist controller
$clients->{$cid}{controller} = $self;
# Receive message
$self->on('message' => sub {
my ($self, $message) = @_;
# Send message to all clients
foreach my $cid (keys %$clients) {
$clients->{$cid}{controller}->send($message);
}
});
# Finish
$self->on('finish' => sub {
# Remove client
delete $clients->{$cid};
});
};
get '/' => 'index';
app->start;
__DATA__
@@ index.html.ep
% my $url = $self->req->url->to_abs->scheme($self->req->is_secure ? 'wss' : 'ws')->path( '/' );
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Mojo Websocket Demo</title>
<script type="text/javascript">
// only load the flash fallback when needed
if ( !( 'WebSocket' in window ) ) {
document.write([
'<scr'+'ipt type="text/javascript" src="web-socket-js/swfobject.js"></scr'+'ipt>',
'<scr'+'ipt type="text/javascript" src="web-socket-js/FABridge.js"></scr'+'ipt>',
'<scr'+'ipt type="text/javascript" src="web-socket-js/web_socket.js"></scr'+'ipt>'
].join(''));
}
</script>
<script type="text/javascript">
if ( WebSocket.__initialize ) {
// Set URL of your WebSocketMain.swf here:
WebSocket.__swfLocation = 'web-socket-js/WebSocketMain.swf';
}
// example copied from web-socket-js/sample.html
var ws, input, clock;
function init() {
// Connect to Web Socket.
ws = new WebSocket('<%= $url %>');
// Receive message
ws.onmessage = function(e) {
// Write message
var message = document.createElement('div');
message.appendChild(document.createTextNode(e.data));
var display = document.getElementById( 'display' );
display.appendChild(message);
};
}
function sendChatMessage() {
var input = document.getElementById('message-box');
var message = input.value;
// Send message
ws.send(message);
input.value = "";
}
window.onload = init;
</script>
</head>
<div id="display" style="width:500px; height:200px; border:1px solid black"></div>
<form onsubmit="sendChatMessage(); return false;">
<input size="60" type="text" id="message-box">
<input type="submit" onclick="sendChatMessage(); return false;" value=Send >
</form>
</html>
業務に役立つPerl
Perlテキスト処理のエッセンス
PerlでポータブルなLinuxファイル管理入門
