From a15eace7c86b8054547a8bb4a9f2b5ae16c30351 Mon Sep 17 00:00:00 2001
From: remy <remy@remysharp.com>
Date: Mon, 14 Jun 2010 19:02:08 +0100
Subject: [PATCH] Adding simple web socket demo

---
 demos/web-socket.html | 96 +++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 96 insertions(+)
 create mode 100644 demos/web-socket.html

diff --git a/demos/web-socket.html b/demos/web-socket.html
new file mode 100644
index 0000000..3b15d55
--- /dev/null
+++ b/demos/web-socket.html
@@ -0,0 +1,96 @@
+<title>Web Socket</title>
+<style>
+#chat { width: 97%; }
+.them { font-weight: bold; }
+.them:before { content: 'them '; color: #bbb; font-size: 14px; }
+.you { font-style: italic; }
+.you:before { content: 'you '; color: #bbb; font-size: 14px;}
+#log {
+  overflow: auto;
+  max-height: 300px;
+  list-style: none;
+  padding-left: 10px;
+}
+#log li {
+  border-bottom: 1px solid #ccc;
+  margin-bottom: 0;
+  padding: 10px 0;
+}
+</style>
+<article>
+  <form>
+    <input type="text" id="chat" placeholder="type and press enter to chat" />
+  </form>
+  <p id="status">Not connected</p>
+  <p>Users connected: <span id="connected">0</span></p>
+  <p>To test, open two windows with Web Socket support, type a message above and press return.</p>
+  <ul id="log"></ul>
+</article>
+<script>
+function openConnection() {
+  // uses global 'conn' object
+  if (conn.readyState === undefined || conn.readyState > 1) {
+    conn = new WebSocket('ws://apps.leftlogic.com:8001');    
+    conn.onopen = function () {
+      state.className = 'success';
+      state.innerHTML = 'Socket open';
+    };
+
+    conn.onmessage = function (event) {
+      var message = JSON.parse(event.data);
+      if (typeof message == 'string') {
+        log.innerHTML = '<li class="them">' + message.replace(/[<>&]/g, function (m) { return entities[m]; }) + '</li>' + log.innerHTML;
+      } else {
+        connected.innerHTML = message;
+      }
+    };
+    
+    conn.onclose = function (event) {
+      state.className = 'fail';
+      state.innerHTML = 'Socket closed';
+    };
+  }
+}
+
+var connected = document.getElementById('connected'),
+    log = document.getElementById('log'),
+    chat = document.getElementById('chat'),
+    form = chat.form,
+    conn = {},
+    state = document.getElementById('status'),
+    entities = {
+      '<' : '&lt;',
+      '>' : '&gt;',
+      '&' : '&amp;'
+    };
+
+
+if (window.WebSocket === undefined) {
+  state.innerHTML = 'Sockets not supported';
+  state.className = 'fail';
+} else {
+  state.onclick = function () {
+    if (conn.readyState !== 1) {
+      conn.close();
+      setTimeout(function () {
+        openConnection();
+      }, 250);
+    }
+  };
+  
+  addEvent(form, 'submit', function (event) {
+    event.preventDefault();
+
+    // if we're connected
+    if (conn.readyState === 1) {
+      conn.send(JSON.stringify(chat.value));
+      log.innerHTML = '<li class="you">' + chat.value.replace(/[<>&]/g, function (m) { return entities[m]; }) + '</li>' + log.innerHTML;
+      
+      chat.value = '';
+    }
+  });
+
+  openConnection();  
+}
+
+</script>
\ No newline at end of file