Adding WebSocket example

2010-08-19 16:32:33 -06:00 · 2010-08-19 16:32:33 -06:00 · 1f61e7eb7f
commit 1f61e7eb7f
parent 347e946548
4 changed files with 181 additions and 0 deletions
--- a/collects/tests/net/websocket/example.rkt
+++ b/collects/tests/net/websocket/example.rkt
@ -0,0 +1,36 @@
+#lang racket
+(require net/websocket
+         web-server/http
+         racket/runtime-path
+         web-server/templates
+         web-server/servlet-env)
+
+(framing-mode 'old)
+
+(define stop-ws!
+  (ws-serve (λ (wsc _)
+              (let loop ()
+                (define m (ws-recv wsc))
+                (printf "~a\n" m)
+                (unless (eof-object? m)
+                  (ws-send! wsc m)
+                  (loop))))
+            #:conn-headers 
+            (λ (_ hs)
+              (define origin (header-value (headers-assq* #"Origin" hs)))
+              (values (list (make-header #"Sec-WebSocket-Origin" origin)
+                            (make-header #"Sec-WebSocket-Location" #"ws://localhost:8080/"))
+                      #f))
+            #:port 8080))
+
+(define-runtime-path example-pth ".")
+
+(serve/servlet (λ (req)
+                 (make-response/full
+                  200 #"Okay"
+                  (current-seconds) TEXT/HTML-MIME-TYPE
+                  empty
+                  (list (string->bytes/utf-8 (include-template "index.html")))))
+               #:servlet-path "/"
+               #:port 8081
+               #:extra-files-paths (list example-pth))
--- a/collects/tests/net/websocket/index.html
+++ b/collects/tests/net/websocket/index.html
@ -0,0 +1,25 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
+    <title>Websocket Test</title>
+    <link rel="stylesheet" href="style.css" type="text/css"/>
+    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
+    <script src="script.js"></script>
+  </head>
+  <body>
+    <div id="body">
+      <div id="inbox">
+      </div>
+      <div id="input">
+        <form action="#" method="post" id="commandForm" onSubmit="return newCommand()">
+          <fieldset>
+            <legend>Command</legend>
+            <input id="commandInput" type="text" style="width:500px" />
+            <input id="submit" type="submit" value="Send" />
+          </fieldset>
+        </form>
+      </div>
+    </div>
+  </body>
+</html>
--- a/collects/tests/net/websocket/script.js
+++ b/collects/tests/net/websocket/script.js
@ -0,0 +1,72 @@
+var ws;
+
+$(document).ready(function() {
+    if (!window.console) window.console = {};
+    if (!window.console.log) window.console.log = function() {};
+
+    ws = new WebSocket("ws://localhost:8080/");
+
+    ws.onopen = function() {
+        console.log("websocket connected");
+        ws.onmessage = function(event) {
+            showCommand(eval("\"" + event.data + "\""));
+        };
+
+        $(window).bind('beforeunload', function() {
+            ws.close();
+        });
+    };
+
+    ws.onclose = function() {
+        console.log("websocket disconnected");
+    };
+
+    $("#commandForm").bind("submit", function(e) {
+        e.preventDefault();
+        e.stopPropagation();
+
+        newCommand($(this));
+        return false;
+    });
+
+    $("#commandForm").bind("keypress", function(e) {
+        if (e.keyCode == 13) {
+            e.preventDefault();
+            e.stopPropagation();
+
+            newCommand($(this));
+        }
+    });
+
+    $("#commandInput").select();
+});
+
+function newCommand(form) {
+    var submit = form.find("#commandSubmit");
+    var text = form.find("#commandInput");
+    submit.disable();
+    ws.send(text.val());
+    text.val("").select();
+    submit.enable();
+}
+
+function showCommand(message) {
+    var node = $("<p>" + message + "</p>");
+    node.hide();
+    $("#inbox").append(node);
+    node.show();
+}
+
+jQuery.fn.enable = function(opt_enable) {
+    if (arguments.length && !opt_enable) {
+        this.attr("disabled", "disabled");
+    } else {
+        this.removeAttr("disabled");
+    }
+    return this;
+};
+
+jQuery.fn.disable = function() {
+    this.enable(false);
+    return this;
+};
--- a/collects/tests/net/websocket/style.css
+++ b/collects/tests/net/websocket/style.css
@ -0,0 +1,48 @@
+body {
+  background: white;
+  margin: 10px;
+}
+
+body,
+input {
+  font-family: sans-serif;
+  font-size: 10pt;
+  color: black;
+}
+
+table {
+  border-collapse: collapse;
+  border: 0;
+}
+
+td {
+  border: 0;
+  padding: 0;
+}
+
+#body {
+  position: absolute;
+  bottom: 10px;
+  left: 10px;
+}
+
+#input {
+  margin-top: 0.5em;
+}
+
+#inbox div {
+  padding-top: 0.25em;
+}
+
+#nav {
+  float: right;
+  z-index: 99;
+}
+
+legend {
+    display: none;
+}
+
+fieldset {
+    border: none;
+}