【perlメモ】Mojolicious::Lite+WebSocketでのチャットプログラム

Posted by kumacchi on 2011年9月27日 , No comment

20111469

アニメの『デュラララ!!』を見たことがある人なら分かると思うんですが、主人公が開設しているサイトにチャットがあるんですが、誰かが発言するとリアルタイムに更新されるんですね。普通cgiのチャットだとこうはいかないわけでタイマーで一定時間ごとにリロードするようにしてたりしてたわけですが、それだと発言から画面に反映されるまでにタイムラグがあるんですね。デュラララ!!を見ていた技術者の人なら「高校生の個人運営のサイトなのになにこの高機能なチャット」と気になったはずです。リアルタイム更新のチャットは昔だと普通のアプリケーションとしてTCP/IPとかでソケットを制御して実現してたわけです。IRCプロトコルを使うチャットソフトなどが代表的です。あと大手各社のIM（インスタントメッセンジャー）がそうですね。

今だと比較的簡単にリアルタイム通信なウェブチャットを作れたりします。ここではWebSocketという技術を使います。ただまだ仕様策定中のためブラウザの対応はまちまちで規格統一されていないようです。とりあえずここでの動作条件は以下の通り。

Google Chrome 14.0.835.186 m
Mojolicious 1.97
perl 5.14
CentOS 5.6

WebSocketサーバーをMojolicious::Liteの機能で実現しています。常駐プログラムなので共用サーバには設置できませんけどね。そういうわけで私はVMware Player上にCentOS 5.6で構築しているサーバー環境で試しました。

基本的に下記の参考サイトのプログラムのコピペです。

Mojolicious::Lite で WebSocket を使ったチャットを作る – naoyaのはてなダイアリー

詳細は上記のサイト様をご覧下さい。大変参考になります。

ただコピペしてもつまらないのでチャット参加者の名前も指定できるように拡張してみました。誰が発言したのかわからないと悲しいですしｗ。また元のプログラムだと日本語が文字化けするのでその対策もしてあります。

$json->encodeするとutf8flagが落ちるようで文字化けするので前にdecode_utf8をつけてutf8フラグをonしてあげています。これで文字化けしなくなりました。

名前部分の拡張は名前とメッセージ部分をTABコードで区切って送ったものをサーバー側のプログラムでsplitしているだけです。はっきり行って手抜きです。ちゃんと作るならJavaScript側でもJSON化にして送るといいと思います。

あとMojoliciousのバージョンが上がってメソッドの名前が変わっていて元のサンプルは動かなくなっていたので新しいメソッド名に変更しています。具体的には以下の通り変更しました。

receive_messageをon_message
finishedをon_finish

Mojoliciousの変更点は下記のサイトで確認できます。

最近の主な変更点 – GitHub

あと勉強がてらにテンプレートを最近のMojoliciousが吐き出すテンプレートの形式にあわせて弄ってます。

#!/usr/bin/env perl
use utf8;
use Mojolicious::Lite;
use DateTime;
use Mojo::JSON;
use Encode qw/from_to decode_utf8 encode_utf8/;

get ‘/’ => sub {
my $self = shift;
# return $self->render(j => $j, f => $f);
} => ‘index’;

my $clients = {};

websocket ‘/echo’ => sub {
my $self = shift;

    app->log->debug(sprintf ‘Client connected: %s’, $self->tx);
    my $id = sprintf "%s", $self->tx;
    app->log->debug("id:".$id);
    $clients->{$id} = $self->tx;

#    $self->receive_message(
    $self->on_message(
        sub {
            my ($self, $msg) = @_;

            my ($name,$message) = split(/\t/,$msg);
            unless($name){
                $name = ‘名無し’;
            }

my $json = Mojo::JSON->new;
my $dt = DateTime->now( time_zone => ‘Asia/Tokyo’);

            for (keys %$clients) {
                $clients->{$_}->send_message(
                    decode_utf8($json->encode({
                        hms => $dt->hms,
                        name => $name,
                        text => $message,
                    }))
                );
            }
        }
    );

#   $self->finished(
    $self->on_finish(
        sub {
            app->log->debug(‘Client disconnected’);
            delete $clients->{$id};
        }
    );
};

app->start;

__DATA__
@@ index.html.ep
% layout ‘main’;
%= javascript begin
jQuery(function($) {
$(‘#msg’).focus();

$(‘#msg’).keydown(function (e) {
    if (e.keyCode == 13 && $(‘#msg’).val()) {
        ws.send($(‘#name’).val() + "\t" + $(‘#msg’).val());
        $(‘#msg’).val(”);
    }
});
    });
% end
<h1>Mojolicious + WebSocket</h1>

@@ layouts/main.html.ep
<html>
<head>
    <meta charset="<%= app->renderer->encoding %>">
    <title>WebSocket Client</title>
    %= javascript ‘https://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js’
    <style type="text/css">
      textarea {
          width: 40em;
          height:10em;
      }
    </style>
</head>
<body><%= content %></body>
</html>