Beefy Boxes and Bandwidth Generously Provided by pair Networks
good chemistry is complicated,
and a little bit messy -LW
 
PerlMonks  

Mojolicious Websocket example

by rkrasowski (Sexton)
on Jun 18, 2015 at 02:12 UTC ( #1130920=perlquestion: print w/replies, xml ) Need Help??
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

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

Replies are listed 'Best First'.
Re: Mojolicious Websocket example
by trippledubs (Hermit) 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 + 2*rand() - 2*rand() ) ] } 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
    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)
    Browser shows oscillating lines and scaling horizontal axis. Where did you get this example from?
Re: Mojolicious Websocket example
by Anonymous Monk on Jun 18, 2015 at 02:38 UTC
Re: Mojolicious Websocket example
by trippledubs (Hermit) on Jun 18, 2015 at 03:08 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

        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

        In this example same directory might be ...goner\ or ...goner\lib\ or ...goner\script\ but neither of those are ...goner\public\

Log In?
Username:
Password:

What's my password?
Create A New User
Node Status?
node history
Node Type: perlquestion [id://1130920]
Approved by trippledubs
Front-paged by trippledubs
help
Chatterbox?
and all is quiet...

How do I use this? | Other CB clients
Other Users?
Others exploiting the Monastery: (5)
As of 2017-12-12 01:53 GMT
Sections?
Information?
Find Nodes?
Leftovers?
    Voting Booth?
    What programming language do you hate the most?




















    Results (323 votes). Check out past polls.

    Notices?