Lepsi prace se sockety

lib/PiTube/Controller/Stream.pm

 package PiTube::Controller::Stream;
 
 use feature 'signatures';
+no warnings qw{ experimental::signatures };
 use Mojo::Base 'Mojolicious::Controller';
 use Mojo::UserAgent;
 use Mojo::Pg::PubSub;
+use Data::Random qw(rand_chars);
 
 use constant CONTENT_TYPE => {
     m3u8 => 'application/vnd.apple.mpegurl',
@@ -64,6 +66,8 @@ sub player {
         $c->session->{user}
     );
 
+    $c->session->{user}{wid} ||= rand_chars( set => 'alphanumeric', size => 16 );
+
     # stream
     my $stream = $c->schema->resultset('Stream_view')->find({
         key => $c->stash->{key}
@@ -178,22 +182,6 @@ sub recording {
     $c->render( json => { recording => $stream->recording  } );
 }
 
-sub ws {
-    my $c = shift;
-
-    $c->inactivity_timeout(300);
-
-    my $pubsub = Mojo::Pg::PubSub->new(pg => $c->pg);
-
-    $pubsub->listen(streams => sub($pubsub, $payload) {
-        $c->send($payload);
-    });
-
-    $c->on(finish => sub ($c, $code, $reason = undef) {
-        $pubsub->unlisten('streams');
-        $c->app->log->debug("WebSocket closed with status $code");
-    });
-}
 
 1;
 

lib/PiTube/Controller/Websockets.pm

+package PiTube::Controller::Websockets;
+
+use experimental 'signatures';
+
+use Mojo::Base 'Mojolicious::Controller';
+use Mojo::Pg::PubSub;
+
+use constant SOCKET_INACTIVITY_TIMEOUT => 300;
+
+sub main {
+    my $c = shift;
+
+    $c->inactivity_timeout(SOCKET_INACTIVITY_TIMEOUT);
+
+    if ($c->req->headers->header('Sec-WebSocket-Extensions') =~ /permessage-deflate/) {
+        $c->tx->compressed(1);
+        $c->res->headers->add('Sec-WebSocket-Extensions' => 'permessage-deflate');
+    }
+
+    my $pubsub = Mojo::Pg::PubSub->new(pg => $c->pg);
+
+    $pubsub->listen(streams => sub($pubsub, $payload) {
+        $c->send($payload);
+    });
+
+    $c->on(json => sub( $c, $message ) {
+        if ( $message->{event} eq 'KEEPALIVE' ) {
+        }
+    });
+
+    $c->on(finish => sub ($c, $code, $reason = undef) {
+        $pubsub->unlisten('streams');
+        $c->app->log->debug("WebSocket closed with status $code");
+    });
+}
+
+1;

templates/live.html.ep

 % layout 'default';
 % title 'Živé vysílání';
 
-<div class="container pt-2 lg:pb-2 ">
 <table id="Streams"
     class="table table--bordered"
     data-row-style="rowStyle"
@@ -16,7 +15,6 @@
     </tr>
   </thead>
 </table>
-</div>
 
 <script>
 $('#Streams').bootstrapTable({
@@ -62,11 +60,36 @@ function rowStyle(row, index) {
     }
 }
 
-var ws = new WebSocket('<%= $c->config->{ws_url} %>/streams');
+function connect() {
+  var ws = new WebSocket('<%= $c->config->{ws_url} %>');
 
-ws.onmessage = function (event) {
-  console.log(event.data);
-  $('#Streams').bootstrapTable('refresh', {silent: true})
-};
+/*
+  ws.onopen = function() {
+    // subscribe to some channels
+    ws.send(JSON.stringify({
+        //.... some message the I must send when I connect ....
+    }));
+  };
+*/
+
+  ws.onmessage = function (event) {
+    console.log(event.data);
+    $('#Streams').bootstrapTable('refresh', {silent: true})
+  };
+
+  ws.onclose = function(e) {
+    console.log('Socket is closed. Reconnect will be attempted in 1 second.', e.reason);
+    setTimeout(function() {
+      connect();
+    }, 1000);
+  };
+
+  ws.onerror = function(err) {
+    console.error('Socket encountered error: ', err.message, 'Closing socket');
+    ws.close();
+  };
+}
+
+connect();
 
 </script>