Sometimes I want to display the same HTML page on multiple devices. Think photo album or something else.

Sometimes I want to "push" an URL, and then pick it up from a single device.

This server does both:

The /set URL is where you can enter the URL, and where you also can find a bookmarklet to send whatever current page to the server.

The /iframe URL will be used by any client for the digital signage.

The / URL will directly redirect to the target URL. I use that when I'm watching a stream on one device but want to continue to watch it on another device.

The repository is at https://github.com/Corion/App-linkshare

use Mojolicious::Lite '-signatures'; use Mojo::JSON 'encode_json'; our $VERSION = '0.01'; our $url; get '/' => sub($c) { return $c->redirect_to($url); }; get '/set' => sub( $c ) { if( my $url = $c->param('url')) { $url = $c->param('url'); warn "Set URL to <$url>"; notify_clients({ src => $url }); }; $c->stash( url => $url ); $c->render( template => 'set'); }; post '/set' => sub($c) { $url = $c->param('url'); $c->stash( url => $url ); warn "Set URL to <$url>"; notify_clients({ src => $url }); }; get '/iframe' => sub( $c ) { $c->stash( url => $url ); $c->render( template => 'iframe'); }; my %clients; my $id = 0; websocket '/cnc' => sub( $c ) { $clients{ $id++ } = $c; $c->on( message => sub( $c, $msg ) { # we don't handle clients talking to us }); }; sub notify_clients( $msg ) { my $str = encode_json( $msg ); for my $id (keys %clients) { eval { $clients{ $id }->send($str); }; if( $@ ) { delete $clients{ $id }; }; }; } app->start; __DATA__ @@ set.html.ep <html> <body> <form method="POST" url="/set"> <label for="url">Enter URL to share:</label> <input id="url" type="text" name="url" placeholder="http://example.com +" value="<%= $url %>" /> <input type="submit"/> </form> <a href="javascript:void(new Image().src='<%= $c->url_for('/set')->to_ +abs %>?url='+encodeURIComponent(document.location))">Bookmarklet for +setting a link to the current page</a> </body> </html> @@ iframe.html.ep <!DOCTYPE html> <html> <head> <!-- just in case the ws breaks down --> <meta http-equiv="refresh" content="300; URL=<%= $c->url_for('/iframe' +) %>"> <title>URL receiver</title> <script> let ws_uri = "<%= $c->url_for('/cnc')->to_abs() =~ s!^http!ws!r %>"; window.uplink = new WebSocket(ws_uri); window.uplink.onmessage = (event) => { let target = document.getElementById('iframe'); console.log(event.data); let msg = JSON.parse(event.data); try { target.src = msg.src; } catch(e) { console.log(e); }; }; </script> </head> <body style="margin:0px; padding:0px;"> <iframe id="iframe" style="width: 100%; height: 100%; position: absolu +te; border: none;" frameborder="0" allowfullscreen allow='autoplay' s +rc="<%= $url %>"/> </body> </html>

In reply to Link push/digital signage server+client by Corion

Title:
Use:  <p> text here (a paragraph) </p>
and:  <code> code here </code>
to format your post; it's "PerlMonks-approved HTML":



  • Posts are HTML formatted. Put <p> </p> tags around your paragraphs. Put <code> </code> tags around your code and data!
  • Titles consisting of a single word are discouraged, and in most cases are disallowed outright.
  • Read Where should I post X? if you're not absolutely sure you're posting in the right place.
  • Please read these before you post! —
  • Posts may use any of the Perl Monks Approved HTML tags:
    a, abbr, b, big, blockquote, br, caption, center, col, colgroup, dd, del, div, dl, dt, em, font, h1, h2, h3, h4, h5, h6, hr, i, ins, li, ol, p, pre, readmore, small, span, spoiler, strike, strong, sub, sup, table, tbody, td, tfoot, th, thead, tr, tt, u, ul, wbr
  • You may need to use entities for some characters, as follows. (Exception: Within code tags, you can put the characters literally.)
            For:     Use:
    & &amp;
    < &lt;
    > &gt;
    [ &#91;
    ] &#93;
  • Link using PerlMonks shortcuts! What shortcuts can I use for linking?
  • See Writeup Formatting Tips and other pages linked from there for more info.