Send the raw and base64 encoded message to the frontend for display

Clicking the list item shows the base64 encoded version, SPIFFY

src/main/groovy/offtopic/KafkaSubscriber.groovy

@@ -45,8 +45,7 @@ class KafkaSubscriber {
         consumerMap.get(this.topic).each { stream ->
             def iterator = stream.iterator()
             while (iterator.hasNext()) {
-                def message = iterator.next().message()
-                this.callback.call(new String(message))
+                this.callback.call(iterator.next().message())
             }
         }
     }

src/ratpack/public/js/ws.js

@@ -12,8 +12,14 @@ function watchTopic(name) {
             };
             window.ws.onmessage = function(event) {
                 console.log(event);
-                var messages = $('#messages')
-                messages.prepend("<div class='list-group-item'>" + event.data + "</div>");
+                var data = $.parseJSON(event.data);
+                var messages = $('#messages');
+                var el_id = Math.floor(Math.random() * 1000000);
+                var el = "<div id='" + el_id + "' class='list-group-item'>" + data.raw + "<br/><div id='" +  el_id + "_b64' style='display:none;'><pre>" + data.b64 + "</pre></div>";
+                messages.prepend(el);
+                $("#" + el_id).click(function(ev) {
+                    $("#"+el_id+'_b64').show();
+                });
 
                 // Let's only keep the last 25
                 if (messages.children().size() > 25) {

src/ratpack/ratpack.groovy

@@ -52,7 +52,8 @@ ratpack {
                 println "Connected ${ws} ${subscriber}"
                 subscriber.callback = { msg ->
                     println "called back with: ${msg}"
-                    ws.send(msg)
+                    ws.send(groovy.json.JsonOutput.toJson(['raw' : new String(msg),
+                            'b64' : msg.encodeBase64().toString()]))
                     println "sent message"
                 }
                 runner.start()