websocket-example.html.haml

.radioplayer-body
  .radioplayer-plugin
    #rvis_container
      #rvis_text Insanity Radio 103.2
      #rvis_image
        = image_tag '/system/radiovis/branding-320x240.png', id: 'rvis_image_a'
        = image_tag '/system/radiovis/branding-320x240.png', id: 'rvis_image_b', style: 'display:none;'
      #no_websockets{style: 'display:none;'}
        .well
          .alert.alert-info
            %strong Whoops, your browser doesn't support WebSockets!
          %p
            This means your web browser will not be able to view real-time updates about what you're listening to.
          %p
            For the best listening experience please upgrade to Firefox 11+, Chrome 17+, or Internet Explorer 11+. WebSockets are pretty newfangled things and older browsers don't support them.

:javascript
  $(function() {
    var supported = ("WebSocket" in window);
    if(!supported) {
      $('#no_websockets').show();
    } else {
      // We've got websockets so do our setup for RadioVIS integration
      var url = "ws://192.168.0.124:61623/";
      var text_client = Stomp.client(url);
      var image_client = Stomp.client(url);
      var target_image = 'b';
      text_connect_callback = function() {
        text_client.subscribe("/topic/fm/ce1/c08f/10320/text", function(message){$('#rvis_text').text(message.body.replace("TEXT ",""));});
      };
      image_connect_callback = function() {
        image_client.subscribe("/topic/fm/ce1/c08f/10320/image", function(message) {
          $('#rvis_image_'+target_image).attr('src',message.body.replace("SHOW ","")+"?cachebuster="+(new Date().getTime()));
          $('#rvis_image_'+target_image).fadeIn(500, 'swing');
          if (target_image == 'a') {
            target_image = 'b';
          } else {
            target_image = 'a';
          }
          $('#rvis_image_'+target_image).fadeOut(500, 'swing');

        });
      }
      image_client.connect("guest", "guest", image_connect_callback);
      text_client.connect("guest", "guest", text_connect_callback);
    }
  });