m_shige1979のささやかな抵抗と欲望の日々

プログラムの勉強をしながら学習したことや経験したことをぼそぼそと書いていきます

なんとなく作ったサイト

http://www.it-check-matome.info/


Github(注意すること)

https://github.com/mshige1979

MojoliciousでWebSocketに挑戦

結論

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('');
        }
    });

});
~

なんか動いている感じ

f:id:m_shige1979:20131030235259j:plain

まとめ

なんか外部サーバで実験できないことがわかってきた感じ
今はPerlの実験しているから公開できる分はあとHerokuでできる範囲に制限する
そのうち理解してきたら、環境を変えてみる

補足

Herokuではサポートしているみたい

f:id:m_shige1979:20131030235853j:plain

広告を非表示にする