now supporting websockets

http.go

@@ -6,7 +6,6 @@ import (
 	"fmt"
 	"github.com/jordanorelli/skeam/am"
 	"html/template"
-	"io"
 	"net/http"
 	"path/filepath"
 )
@@ -55,7 +54,11 @@ func (t templateHandler) ServeHTTP(w http.ResponseWriter, r *http.Request) {
 }
 
 func wsHandler(ws *websocket.Conn) {
-	io.Copy(ws, ws)
+	manager.Add(ws)
+	defer manager.Remove(ws)
+
+	i := newInterpreter(ws, ws, ws)
+	i.run(universe)
 }
 
 func runHTTPServer() {

static/css/home.css

@@ -1,15 +1,33 @@
-html, body {
-  height: 100%;
+body {
+  background: #fff;
+  color:#000;
+  font-size:.9em;
+  padding: 0;
+  margin: 0;
 }
 
-#bodywrap {
-  min-height: 100%;
+#responses {
+  margin: 0;
+  padding: 0 0 6em 0;
+  overflow: hidden;
 }
 
 #txt-repl {
-  position: relative;
-  margin: -120px 0 0 0;
-  height: 110px;
-  width: 100%;
-  clear: both;
+    position: fixed;
+    bottom: 0;
+    margin: 0;
+    padding: 0 0 0 0.2em;
+    border: none;
+    border-top: 2px solid gray;
+    background: white;
+    z-index: 1;
+    min-height: 4.8em;
+    width: 100%;
+    resize: none;
+    outline: none;
+    font-family: monospace;
+}
+
+.message {
+
 }

static/js/skeam.js

@@ -1 +1,106 @@
-console.log("oh hai");
+// -----------------------------------------------------------------------------
+// input handling
+// -----------------------------------------------------------------------------
+
+var isSendMessage = function(event) {
+  return event.keyCode == 13 && event.shiftKey;
+}
+
+var InputHandler = function(selector) {
+  this.elem = $(selector);
+  this.elem.keydown(_.bind(this.keydown, this));
+};
+
+InputHandler.prototype.keydown = function(event) {
+  if (isSendMessage(event)) {
+    return this.handleSend(event);
+  }
+};
+
+InputHandler.prototype.handleSend = function(event) {
+  event.preventDefault();
+  event.stopPropagation();
+  this.sendMessage(event.target.value);
+  this.clear();
+};
+
+InputHandler.prototype.sendMessage = function(message) {
+  var event = document.createEvent("Event");
+  event.initEvent("sendMsg", true, true);
+  event.message = message;
+  document.dispatchEvent(event);
+};
+
+InputHandler.prototype.clear = function() {
+  this.elem.val('');
+}
+
+// -----------------------------------------------------------------------------
+// connection handling
+// -----------------------------------------------------------------------------
+
+var ConnectionHandler = function(wsPath) {
+  this.path = wsPath;
+  this.c = new WebSocket(wsPath);
+  this.c.onopen = _.bind(this.onopen, this);
+  this.c.onclose = _.bind(this.onclose, this);
+  this.c.onerror = _.bind(this.onerror, this);
+  this.c.onmessage = _.bind(this.onmessage, this);
+};
+
+ConnectionHandler.prototype.onopen = function(event) {
+  console.log({open: event});
+};
+
+ConnectionHandler.prototype.onclose = function(event) {
+  console.log({close: event});
+};
+
+ConnectionHandler.prototype.onmessage = function(event) {
+  this.broadcastMessageReceived(event.data);
+};
+
+ConnectionHandler.prototype.broadcastMessageReceived = function(message) {
+  var event = document.createEvent("Event");
+  event.initEvent("receiveResponse", true, true);
+  event.message = message;
+  document.dispatchEvent(event);
+}
+
+ConnectionHandler.prototype.onerror = function(event) {
+  console.log({error: event});
+};
+
+ConnectionHandler.prototype.sendMsg = function(message) {
+  this.c.send(message);
+};
+
+// -----------------------------------------------------------------------------
+// response rendering
+// -----------------------------------------------------------------------------
+
+var MessageDisplay = function(selector, templateSelector) {
+  this.elem = $(selector);
+  this.renderMessage = _.template($(templateSelector).html());
+}
+
+MessageDisplay.prototype.addMessage = function(message) {
+  var rendered = this.renderMessage({message: message});
+  this.elem.append(rendered);
+};
+
+var Skeam = function(config) {
+  this.inputHandler = new InputHandler(config.inputSelector);
+  this.messageDisplay = new MessageDisplay(config.outputSelector, config.messageTemplateSelector);
+  this.conn = new ConnectionHandler(config.wsPath);
+  document.addEventListener("sendMsg", _.bind(this.sendMsg, this), false);
+  document.addEventListener("receiveResponse", _.bind(this.receiveResponse, this), false);
+};
+
+Skeam.prototype.sendMsg = function(event) {
+  this.conn.sendMsg(event.message + "\n");
+}
+
+Skeam.prototype.receiveResponse = function(event) {
+  this.messageDisplay.addMessage(event.message);
+}

templates/home.html

@@ -1,13 +1,27 @@
 <html>
     <head>
       {{css "home.css"}}
+      {{js "jquery-1.9.1.min.js"}}
+      {{js "underscore-min.js"}}
+      {{js "skeam.js"}}
+      <script type="application/template" id="message-template">
+        <div class="message">
+          <pre><%= message %></pre>
+        </div>
+      </script>
+      <script>
+        $(document).ready(function() {
+          var skeam = new Skeam({
+            inputSelector: "#txt-repl",
+            outputSelector: "#responses",
+            messageTemplateSelector: "#message-template",
+            wsPath: "ws://localhost:8000/ws"
+          });
+        });
+      </script>
     </head>
     <body>
-      <div id="bodywrap">
-      </div>
-      <div id="footer">
-        <textarea id="txt-repl"></textarea>
-      </div>
-      {{js "skeam.js"}}
+      <div id="responses"></div>
+      <textarea id="txt-repl"></textarea>
     </body>
 </html>