MojoliciousでWebSocketに挑戦 - m_shige1979のときどきITブログ

結論

Herokuではなんか動かなかった。まあ、Perlではサポートしていないことが問題かな？
原因はわからんけどとりあえず、そのままにしておく

f:id:m_shige1979:20131030235238j:plain

対応

app.psgi

# chatの画面
get '/chat' => sub {

     # パラメータを取得
    my $self = shift;

    my $jslist = ['chat.js'];

    # URL
    my $url_base = $self->req->url->base;
    $url_base =~ s/http/ws/g;
    $self->stash('url_base', $url_base);

    # 変数をセット
    my $sub_title = 'WebScoketでチャットのテスト';

    # テンプレート変数をセット
    $self->stash('title', $config->{title});
    $self->stash('description', $config->{description});
    $self->stash('github', $config->{github});
    $self->stash('subTitle', $sub_title);

    $self->stash('jsList', $jslist);

    # chatページを割り当て
    $self->render('chat');
};

my $clients = {};

# WebSocketの処理
websocket '/echo' => sub {
    my $self = shift;

    my $id = sprintf "%s", $self->tx;
    $clients->{$id} = $self->tx;

#    $self->receive_message(  # もう使えない
    $self->on(message =>
        sub {
            my ($self, $msg) = @_;

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

            for (keys %$clients) {
#                $clients->{$_}->send_message( # これも？
                $clients->{$_}->send(
                    $json->encode({
                        hms  => $dt->hms,
                        text => $msg,
                    })
                );
            }
        }
    );

#    $self->finished( # 別名
    $self->on(finish =>
        sub {
            delete $clients->{$id};
        }
    );
};

chat.html.ep

% layout 'default';

            <div class="row-fluid">
                <div class="col-12">
                    <div>
                       <div id="url" style="display: none;"><%= $url_base %></div>
                       <p><input type="text" id="msg" /></p>
                       <textarea id="log" readonly style="width: 500px;height: 250px;"></textarea>

                    </div>
                </div>
            </div>

        </div>

~

chat.js

$(function () {

    var _url = $("#url").text();

    var log = function (text) {
        $('#log').val( $('#log').val() + text + "\n");
    };

    var ws = new WebSocket(_url + '/echo');
    ws.onopen = function () {
        log('Connection opened');
    };

    ws.onmessage = function (msg) {
        var res = JSON.parse(msg.data);
        log('[' + res.hms + '] ' + res.text);
    };

    $('#msg').keydown(function (e) {
        if (e.keyCode == 13 && $('#msg').val()) {
            ws.send($('#msg').val());
            $('#msg').val('');
        }
    });

});
~