From 1f61e7eb7f010f2474b78a552c5b2c9483442002 Mon Sep 17 00:00:00 2001 From: Jay McCarthy Date: Thu, 19 Aug 2010 16:32:33 -0600 Subject: [PATCH] Adding WebSocket example --- collects/tests/net/websocket/example.rkt | 36 ++++++++++++ collects/tests/net/websocket/index.html | 25 ++++++++ collects/tests/net/websocket/script.js | 72 ++++++++++++++++++++++++ collects/tests/net/websocket/style.css | 48 ++++++++++++++++ 4 files changed, 181 insertions(+) create mode 100644 collects/tests/net/websocket/example.rkt create mode 100644 collects/tests/net/websocket/index.html create mode 100644 collects/tests/net/websocket/script.js create mode 100644 collects/tests/net/websocket/style.css diff --git a/collects/tests/net/websocket/example.rkt b/collects/tests/net/websocket/example.rkt new file mode 100644 index 0000000000..b8f3e4ce95 --- /dev/null +++ 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)) diff --git a/collects/tests/net/websocket/index.html b/collects/tests/net/websocket/index.html new file mode 100644 index 0000000000..11da6ed2b8 --- /dev/null +++ b/collects/tests/net/websocket/index.html @@ -0,0 +1,25 @@ + + + + + Websocket Test + + + + + +
+
+
+
+
+
+ Command + + +
+
+
+
+ + diff --git a/collects/tests/net/websocket/script.js b/collects/tests/net/websocket/script.js new file mode 100644 index 0000000000..245509c0ea --- /dev/null +++ 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 = $("

" + message + "

"); + 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; +}; diff --git a/collects/tests/net/websocket/style.css b/collects/tests/net/websocket/style.css new file mode 100644 index 0000000000..1c40ba43b0 --- /dev/null +++ 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; +}