SpinnySocket: websocket + json

by alessandro_pezzato

HTML

<div id="channel1">
    <div class="spinny"></div>
    <div class="pitch"></div>
</div>

CSS

.spinny {
    width: 100px;
    height: 100px;
    background: blue;
}

JavaScript

var Channel = function (id) {
          this.id = id;
          var $element = $('#channel' + id);
          var Socket = function (id, on) {
              var port = 5000 + id;
              var ws = new WebSocket("ws://10.1.2.72:" + port);
              var ready = false;
              ws.onmessage = function (event) {
                  consol.log(event.data);
              }
              ws.onopen = function (event) {
                  ready = true;
              }
              var send = function (data) {
                  ws.send(data.join(':'));
              };
              this.send = send;
              this.ready = ready;
          }

          var socket = new Socket(id);
          var Spinny = function ($el, id) {
              $el.mousemove(function (e) {
                  var offset = $(this).offset();
                  var relX = ((e.pageX - offset.left) / $el.width() - 0.5) * 2;
                  var relY = ((e.pageY - offset.top) / $el.height() - 0.5) * 2;
                  socket.send(["move", relX, relY]);
              });

              $el.mousedown(function (e) {
                  var offset = $(this).offset();
                  var relX = ((e.pageX - offset.left) / $el.width() - 0.5) * 2;
                  var relY = ((e.pageY - offset.top) / $el.height() - 0.5) * 2;
                  socket.send(["press", relX, relY]);
              });

              $el.mouseup(function (e) {
                  socket.send(["release"]);
              });

              this.dropTrack = function (url) {
                  socket.send(["track", url]);
              }
          } // /Spinny
          var Pitch = function (id) {
              this.setValue = function (value) {
                  socket.send(["pitch", value]);
              }
          }
          this.spinny = new Spinny($element, id);
          this.pitch = new Pitch();
      }

      /* tieni questo scope per debug da console */
      var channel1 = null;
      var channel2 = null;

     ...