MojoliciousでWebSocketに挑戦
対応
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(''); } }); }); ~
なんか動いている感じ
まとめ
なんか外部サーバで実験できないことがわかってきた感じ
今はPerlの実験しているから公開できる分はあとHerokuでできる範囲に制限する
そのうち理解してきたら、環境を変えてみる
補足
Herokuではサポートしているみたい