Mojolicious Websocket example

rkrasowski has asked for the wisdom of the Perl Monks concerning the following question:

Hi everybody, I started looking into websocket as a way to push data from server to browser. I found example for Mojolicious written by Joel Berger. I am trying to make it to work, but no luck so far. here is the code:

websocket.pl

use Mojolicious::Lite;
any '/' => 'index';
websocket '/data' => sub {
  my $self = shift;
  my $timer = Mojo::IOLoop->recurring( 1 => sub {
    state $i = 0;
    $self->send({ json => gen_data($i++) }); 
  });

  $self->on( finish => sub {
    Mojo::IOLoop->remove($timer);
  });
};

sub gen_data { 
  my $x = shift; 
  return [ $x, sin( $x + 2*rand() - 2*rand() ) ]
}

app->start;

__DATA__

@@ index.html.ep

% layout 'basic';

%= javascript '/jquery-1.9.1.min.js'
%= javascript '/jquery.flot.js'

<div id="plot" style="width:600px;height:300px">
</div>

%= javascript begin
  var data = [];
  var plot = $.plot($('#plot'), [ data ]);

  var url = '<%= url_for('data')->to_abs %>';
  var ws = new WebSocket( url );
  ws.onmessage = function(e){
    var point = JSON.parse(e.data);
    data.push(point);
    plot.setData([data]);
    plot.setupGrid();
    plot.draw();
  };
% end
[download]

While starting the script with morbo websocket.pl commands everything seems to be fine, but when I connect from the browser to the server I am getting following messages:

debug Your secret passphrase needs to be changed

debug GET "/"

debug Rendering template "index.html.ep" from DATA section

debug Template "layouts/basic.html.ep" not found

debug 200 OK (0.043215s, 23.140/s)

debug GET "/jquery-1.9.1.min.js"

debug Template "not_found.development.html.ep" not found

debug Template "not_found.html.ep" not found

debug Rendering inline template "fd403ab55a4c875e35b42428816134c7"

debug Rendering inline template "dd85456cf9f44e1e43bebae130a7f9df"

debug 404 Not Found (0.201262s, 4.969/s)

debug GET "/jquery.flot.js"

debug Template "not_found.development.html.ep" not found

debug Template "not_found.html.ep" not found

debug Rendering cached inline template "fd403ab55a4c875e35b42428816134c7"

debug Rendering cached inline template "dd85456cf9f44e1e43bebae130a7f9df"

debug 404 Not Found (0.051227s, 19.521/s)

Any idea what's wrong?

Thanks like always

Robert

Comment on Mojolicious Websocket example Download Code

Replies are listed 'Best First'.
Re: Mojolicious Websocket example by trippledubs (Deacon) on Jun 18, 2015 at 03:01 UTC
Do you actually have those javascripts installed? It seems to work with the CDN versions #!/usr/bin/env perl use Mojolicious::Lite; any '/' => 'index'; websocket '/data' => sub { my $self = shift; my $timer = Mojo::IOLoop->recurring( 1 => sub { state $i = 0; $self->send({ json => gen_data($i++) }); }); $self->on( finish => sub { Mojo::IOLoop->remove($timer); }); }; sub gen_data { my $x = shift; return [ $x, sin( $x + 2rand() - 2rand() ) ] } app->start; __DATA__ @@ index.html.ep % layout 'basic'; %= javascript 'https://code.jquery.com/jquery-2.1.4.min.js'; %= javascript 'https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquer +y.flot.js' <div id="plot" style="width:600px;height:300px"> </div> %= javascript begin var data = []; var plot = $.plot($('#plot'), [ data ]); var url = '<%= url_for('data')->to_abs %>'; var ws = new WebSocket( url ); ws.onmessage = function(e){ var point = JSON.parse(e.data); data.push(point); plot.setData([data]); plot.setupGrid(); plot.draw(); }; % end [download] Shell: :~$ morbo t1.pl Server available at http://127.0.0.1:3000 [Wed Jun 17 21:54:11 2015] [debug] Your secret passphrase needs to be +changed [Wed Jun 17 21:54:11 2015] [debug] GET "/" [Wed Jun 17 21:54:11 2015] [debug] Rendering template "index.html.ep" +from DATA section [Wed Jun 17 21:54:11 2015] [debug] Template "layouts/basic.html.ep" no +t found [Wed Jun 17 21:54:11 2015] [debug] 200 OK (0.005384s, 185.736/s) [Wed Jun 17 21:54:11 2015] [debug] GET "/data" [Wed Jun 17 21:54:11 2015] [debug] Routing to a callback [Wed Jun 17 21:54:11 2015] [debug] 101 Switching Protocols (0.000710s, + 1408.451/s) [download] Browser shows oscillating lines and scaling horizontal axis. Where did you get this example from?	[reply] [d/l] [select]
Re: Mojolicious Websocket example by Anonymous Monk on Jun 18, 2015 at 02:38 UTC
The error messages seem self explanatory, you can't just include any path you want and expect mojo to find it (jquery) -- it has to exist see Re^3: real-time output from Mojolicious WebSockets?	[reply]
Re: Mojolicious Websocket example by trippledubs (Deacon) on Jun 18, 2015 at 03:08 UTC
http://jberger.github.io/MojoliciousIntroduction/#/	[reply]
Re^2: Mojolicious Websocket example by rkrasowski (Sexton) on Jun 20, 2015 at 12:40 UTC
Hmmm, I see, so the problem was that java scripts were not "seen". Interesting, both scripts were in the same directories as example script. Now I have the script working with correction that trippledubs did. Thank you very much. Still can not understand why scripts that were in the same directory were not recognized. Thanks like always, well, I am ready to play more with Mojolicious..... Robert	[reply]
Re^3: Mojolicious Websocket example by Anonymous Monk on Jun 20, 2015 at 18:22 UTC
Now I have the script working with correction that trippledubs did. Thank you very much. Still can not understand why scripts that were in the same directory were not recognized. Why do you expect them to be recognized? $ mojo generate app Goner [mkdir] ...goner\script [write] ...goner\script\goner [chmod] ...goner\script\goner 744 [mkdir] ...goner\lib [write] ...goner\lib\Goner.pm [mkdir] ...goner\lib\Goner\Controller [write] ...goner\lib\Goner\Controller\Example.pm [mkdir] ...goner\t [write] ...goner\t\basic.t [mkdir] ...goner\log [mkdir] ...goner\public [write] ...goner\public\index.html [mkdir] ...goner\templates\layouts [write] ...goner\templates\layouts\default.html.ep [mkdir] ...goner\templates\example [write] ...goner\templates\example\welcome.html.ep [download] In this example same directory might be ...goner\ or ...goner\lib\ or ...goner\script\ but neither of those are ...goner\public\	[reply] [d/l]
Re^4: Mojolicious Websocket example by Anonymous Monk on Jun 20, 2015 at 18:27 UTC
Re^4: Mojolicious Websocket example by rkrasowski (Sexton) on Jun 21, 2015 at 01:39 UTC
Re^5: Mojolicious Websocket example by Anonymous Monk on Jun 21, 2015 at 09:16 UTC
Some notes below your chosen depth have not been shown here


Just another Perl shrine
	PerlMonks