Need to increment IDs when subscribing

* also added the RabbitMQ Web Stomp demos...with an added logger * for the echo demo (with uses reply-to) we end up stealing half the messages...little goofy
bradshjg · Jan 17, 2020 · e4286f9 · e4286f9
1 parent f7f6d8f
commit e4286f9
Show file tree

Hide file tree

Showing 17 changed files with 1,284 additions and 4 deletions.
diff --git a/examples/bunny/Dockerfile b/examples/bunny/Dockerfile
@@ -0,0 +1,13 @@
+FROM python:slim
+
+ENV SHATTERED_APP=logger.py
+
+COPY requirements.txt /src/requirements.txt
+
+RUN pip install -r /src/requirements.txt
+
+COPY . /src
+
+WORKDIR /src
+
+CMD ["shattered", "run"]
diff --git a/examples/bunny/bunny.html b/examples/bunny/bunny.html
@@ -0,0 +1,144 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
+    <script src="stomp.js"></script>
+
+    <style>
+      #cnvs {
+        border: none;
+        -moz-border-radius: 4px;
+        cursor: url(pencil.cur), crosshair;
+        position: absolute;
+        overflow: hidden;
+        width: 100%;
+        height: 100%;
+      }
+      #cnvs:active {
+        cursor: url(pencil.cur), crosshair;
+      }
+      body {
+        overflow: hidden;
+      }
+    </style>
+    <title>RabbitMQ Web STOMP Examples: Bunny Drawing</title>
+    <link href="main.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body lang="en">
+    <h1>
+      <a href="index.html">RabbitMQ Web STOMP Examples</a> > Bunny Drawing
+    </h1>
+    <canvas id="cnvs"></canvas>
+    <script>
+      var send;
+      var draw;
+      send = draw = function() {};
+
+      var lines = [];
+
+      var canvas = document.getElementById("cnvs");
+
+      if (canvas.getContext) {
+        var ctx = canvas.getContext("2d");
+
+        var img = new Image();
+        img.onload = function() {
+          ctx.drawImage(img, 230, 160);
+        };
+        img.src = "bunny.png";
+
+        draw = function(p) {
+          ctx.beginPath();
+          ctx.moveTo(p.x1, p.y1);
+          ctx.lineTo(p.x2, p.y2);
+          ctx.stroke();
+          ctx.drawImage(img, 230, 160);
+        };
+
+        var do_resize = function() {
+          canvas.width = window.innerWidth;
+          canvas.height = window.innerHeight;
+
+          ctx.font = "bold 20px sans-serif";
+          ctx.fillStyle = "#444";
+          ctx.fillText("Draw wings on the bunny!", 260, 100);
+          ctx.font = "normal 16px sans-serif";
+          ctx.fillStyle = "#888";
+          ctx.fillText("(For more fun open a second browser)", 255, 130);
+
+          ctx.drawImage(img, 230, 160);
+
+          ctx.strokeStyle = "#fa0";
+          ctx.lineWidth = "10";
+          ctx.lineCap = "round";
+
+          $.map(lines, function(p) {
+            draw(p);
+          });
+        };
+
+        $(window).resize(do_resize);
+        $(do_resize);
+
+        var pos = $("#cnvs").position();
+        var prev = null;
+        $("#cnvs").mousedown(function(evt) {
+          evt.preventDefault();
+          evt.stopPropagation();
+          $("#cnvs").bind("mousemove", function(e) {
+            var curr = { x: e.pageX - pos.left, y: e.pageY - pos.top };
+            if (!prev) {
+              prev = curr;
+              return;
+            }
+            if (
+              Math.sqrt(
+                Math.pow(prev.x - curr.x, 2) + Math.pow(prev.y - curr.y, 2)
+              ) > 8
+            ) {
+              var p = { x1: prev.x, y1: prev.y, x2: curr.x, y2: curr.y };
+              lines.push(p);
+              draw(p);
+              send(JSON.stringify(p));
+              prev = curr;
+            }
+          });
+        });
+        $("html").mouseup(function() {
+          prev = null;
+          $("#cnvs").unbind("mousemove");
+        });
+      } else {
+        document.write(
+          "Sorry - this demo requires a browser with canvas tag support."
+        );
+      }
+
+      // Stomp.js boilerplate
+      var ws = new WebSocket("ws://" + window.location.hostname + ":15674/ws");
+      var client = Stomp.over(ws);
+
+      client.debug = function() {
+        if (window.console && console.log && console.log.apply) {
+          console.log.apply(console, arguments);
+        }
+      };
+
+      send = function(data) {
+        client.send("/topic/bunny", {}, data);
+      };
+
+      var on_connect = function(x) {
+        id = client.subscribe("/topic/bunny", function(d) {
+          var p = JSON.parse(d.body);
+          lines.push(p);
+          draw(p, true);
+        });
+      };
+      var on_error = function() {
+        console.log("error");
+      };
+      client.connect("guest", "guest", on_connect, on_error, "/");
+    </script>
+  </body>
+</html>
diff --git a/examples/bunny/bunny.png b/examples/bunny/bunny.png
diff --git a/examples/bunny/docker-compose.yml b/examples/bunny/docker-compose.yml
@@ -0,0 +1,30 @@
+version: "2"
+services:
+  logger:
+    build: .
+    depends_on:
+      - rabbitmq
+    volumes:
+      - .:/src
+    command:
+      [
+        "./wait-for-it.sh",
+        "-t",
+        "300",
+        "rabbitmq:61613",
+        "--",
+        "shattered",
+        "run",
+      ]
+  bunny:
+    image: python:slim
+    working_dir: /src
+    volumes:
+      - .:/src
+    ports:
+      - 8000:8000
+    command: ["python", "-m", "http.server"]
+  rabbitmq:
+    build: ../../rabbitmq
+    ports:
+      - 15674:15674
diff --git a/examples/bunny/echo.html b/examples/bunny/echo.html
@@ -0,0 +1,111 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
+    <script src="stomp.js"></script>
+    <style>
+      .box {
+        width: 440px;
+        float: left;
+        margin: 0 20px 0 20px;
+      }
+
+      .box div,
+      .box input {
+        border: 1px solid;
+        -moz-border-radius: 4px;
+        border-radius: 4px;
+        width: 100%;
+        padding: 5px;
+        margin: 3px 0 10px 0;
+      }
+
+      .box div {
+        border-color: grey;
+        height: 300px;
+        overflow: auto;
+      }
+
+      div code {
+        display: block;
+      }
+
+      #first div code {
+        -moz-border-radius: 2px;
+        border-radius: 2px;
+        border: 1px solid #eee;
+        margin-bottom: 5px;
+      }
+
+      #second div {
+        font-size: 0.8em;
+      }
+    </style>
+    <title>RabbitMQ Web STOMP Examples : Echo Server</title>
+    <link href="main.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body lang="en">
+    <h1><a href="index.html">RabbitMQ Web STOMP Examples</a> > Echo Server</h1>
+
+    <div id="first" class="box">
+      <h2>Received</h2>
+      <div></div>
+      <form><input autocomplete="off" value="Type here..." /></form>
+    </div>
+
+    <div id="second" class="box">
+      <h2>Logs</h2>
+      <div></div>
+    </div>
+
+    <script>
+      var has_had_focus = false;
+      var pipe = function(el_name, send) {
+        var div = $(el_name + " div");
+        var inp = $(el_name + " input");
+        var form = $(el_name + " form");
+
+        var print = function(m, p) {
+          p = p === undefined ? "" : JSON.stringify(p);
+          div.append($("<code>").text(m + " " + p));
+          div.scrollTop(div.scrollTop() + 10000);
+        };
+
+        if (send) {
+          form.submit(function() {
+            send(inp.val());
+            inp.val("");
+            return false;
+          });
+        }
+        return print;
+      };
+
+      // Stomp.js boilerplate
+      var client = Stomp.client(
+        "ws://" + window.location.hostname + ":15674/ws"
+      );
+      client.debug = pipe("#second");
+
+      var print_first = pipe("#first", function(data) {
+        client.send("/topic/test", { "content-type": "text/plain" }, data);
+      });
+      var on_connect = function(x) {
+        id = client.subscribe("/topic/test", function(d) {
+          print_first(d.body);
+        });
+      };
+      var on_error = function() {
+        console.log("error");
+      };
+      client.connect("guest", "guest", on_connect, on_error, "/");
+
+      $("#first input").focus(function() {
+        if (!has_had_focus) {
+          has_had_focus = true;
+          $(this).val("");
+        }
+      });
+    </script>
+  </body>
+</html>
diff --git a/examples/bunny/index.html b/examples/bunny/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>RabbitMQ Web STOMP Examples</title>
+    <link href="main.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <h1>RabbitMQ Web STOMP Examples</h1>
+    <ul class="menu">
+      <li><a href="echo.html">Simple Echo Server</a></li>
+      <li><a href="bunny.html">Bunny Drawing</a></li>
+      <li><a href="temp-queue.html">Temporary Queue Example</a></li>
+    </ul>
+  </body>
+</html>
diff --git a/examples/bunny/logger.py b/examples/bunny/logger.py
@@ -0,0 +1,15 @@
+import logging
+
+from shattered import Shattered
+
+logger = logging.getLogger(__name__)
+logging.basicConfig(level=logging.INFO)
+
+shattered_app = Shattered(host="rabbitmq")
+
+
+@shattered_app.subscribe("/queue/test")
+@shattered_app.subscribe("/topic/test")
+@shattered_app.subscribe("/topic/bunny")
+def echo(headers, body, conn):
+    logger.info(body)
diff --git a/examples/bunny/main.css b/examples/bunny/main.css
@@ -0,0 +1,40 @@
+body {
+  font-family: "Arial";
+  color: #444;
+}
+
+h1,
+h2 {
+  color: #f60;
+  font-weight: normal;
+}
+
+h1 {
+  font-size: 1.5em;
+}
+
+h2 {
+  font-size: 1.2em;
+  margin: 0;
+}
+
+a {
+  color: #f60;
+  border: 1px solid #fda;
+  background: #fff0e0;
+  border-radius: 3px;
+  -moz-border-radius: 3px;
+  padding: 2px;
+  text-decoration: none;
+  /* font-weight: bold; */
+}
+
+ul.menu {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+}
+
+ul.menu li {
+  padding: 5px 0;
+}
diff --git a/examples/bunny/pencil.cur b/examples/bunny/pencil.cur
diff --git a/examples/bunny/requirements.txt b/examples/bunny/requirements.txt
@@ -0,0 +1 @@
+shattered