Added twitter client demo

DamonOehlman · May 21, 2012 · 3d56ded · 3d56ded
1 parent cbf6840
commit 3d56ded
Show file tree

Hide file tree

Showing 14 changed files with 291 additions and 71 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,2 +1,3 @@
 .DS_Store
-node_modules
+node_modules
+config/development.json
diff --git a/dist/demos.css → dist/demoshell.css b/dist/demos.css → dist/demoshell.css
@@ -4155,3 +4155,32 @@ body {
 div[role="actions"] {
     margin-top: 20px;
 }
+
+.CodeMirror {
+    font-size: 1.5em;
+}
+
+.CodeMirror-scroll {
+    height: -webkit-calc(100% - 180px);
+}
+
+#log {
+    list-style: none;
+    margin: 10px 0 0 0;
+}
+
+#log li {
+    margin-top: 4px;
+    padding-bottom: 4px;
+    border-bottom: 1px solid #e8e8e8;
+    clear: left;
+    overflow: auto;
+}
+
+#log li > * {
+    float: left;
+}
+
+#log li > .log-content {
+    margin-left: 10px;
+}
diff --git a/dist/demos.js → dist/demoshell.js b/dist/demos.js → dist/demoshell.js
@@ -13357,12 +13357,16 @@ if ( typeof define === "function" && define.amd && define.amd.jQuery ) {
 
 ;(function (glob) {
 
-  var editor,
+  var editorContainer,
+      editor,
       socket,
-      demos = {};
+      demoshell = {
+          info: info,
+          log: log
+      };
 
   function init() {
-      socket = demos.socket = new WebSocket('ws://localhost:8000');
+      socket = demoshell.socket = new WebSocket('ws://localhost:8000');
       socket.onopen = ready;
 
       socket.onmessage = function(evt) {
@@ -13375,10 +13379,11 @@ if ( typeof define === "function" && define.amd && define.amd.jQuery ) {
           eve.apply(eve, [data.msg, socket].concat(data.args));
       };
 
-      editor = demos.editor = CodeMirror(document.getElementById('editor'), {
-        value: "function myScript(){return 100;}\n",
-        mode:  "javascript",
-        lineNumbers: true
+      editor = demoshell.editor = CodeMirror(editorContainer = document.getElementById('editor'), {
+          value: '',
+          mode:  'javascript',
+          readOnly: true,
+          lineNumbers: true
       });
 
       $(document.body).click(function(evt) {
@@ -13392,8 +13397,41 @@ if ( typeof define === "function" && define.amd && define.amd.jQuery ) {
       });
   }
 
+  function bsAlert(html, opts) {
+      var classes = ['label'];
+
+      // ensure we have opts
+      opts = opts || {};
+      opts.type = opts.type || 'info';
+      classes[classes.length] = 'label-' + opts.type;
+
+      $('#log').prepend('<li><span class="' + classes.join(' ') + '">' + new Date().getTime() + '</span><div class="log-content">' + html + '</div></li>');
+  }
+
+  function info(html) {
+      bsAlert(html, { type: 'info' });
+  }
+
+  function log(text) {
+      console.log(text);
+  }
+
   eve.on('demo', function() {
-      socket.send('use:' + eve.nt().split('.').slice(1).join('/'));
+      var demoName = eve.nt().split('.').slice(1).join('/');
+
+      $('a.brand').html('HTML5 Messaging Demos: ' + demoName);
+      socket.send('use:' + demoName);
+  });
+
+  eve.on('edit', function() {
+      var navitem = $('a[data-action="edit"]').parent();
+
+      navitem.toggleClass('active');
+      editor.setOption('readOnly', !navitem.hasClass('active'));
+  });
+
+  eve.on('clear.log', function() {
+      $('#log').html('');
   });
 
   eve.on('run', function() {
@@ -13415,6 +13453,10 @@ if ( typeof define === "function" && define.amd && define.amd.jQuery ) {
       $('#demos').html(demos.reduce(function(previous, current, index) {
           return previous + '<li><a href="#" data-action="demo.' + current + '">' + current + '</a></li>';
       }, ''));
+
+      if (demos.length > 0) {
+          eve('demo.' + demos[0]);
+      }
   });
 
   eve.on('*', function() {
@@ -13428,5 +13470,5 @@ if ( typeof define === "function" && define.amd && define.amd.jQuery ) {
   $(init);
 
 
-   if (typeof demos != 'undefined') glob.demos = demos;
+   if (typeof demoshell != 'undefined') glob.demoshell = demoshell;
 })(this);
diff --git a/index.html b/index.html
@@ -3,13 +3,12 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
-    <title>Bootstrap, from Twitter</title>
+    <title>HTML5 Messaging Demos</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="description" content="">
     <meta name="author" content="">
 
-    <link href="dist/demos.css" rel="stylesheet">
-    <link href="dist/viewer.css" rel="stylesheet">
+    <link href="dist/demoshell.css" rel="stylesheet">
     <!-- Le fav and touch icons -->
     <link rel="shortcut icon" href="../assets/ico/favicon.ico">
     <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
@@ -28,12 +27,20 @@
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
           </a>
-          <a class="brand" href="#">Project name</a>
+          <a class="brand" href="#">HTML5 Messaging Demos</a>
           <div class="nav-collapse">
             <ul class="nav">
-              <li class="active"><a href="#">Home</a></li>
-              <li><a href="#about">About</a></li>
-              <li><a href="#contact">Contact</a></li>
+              <li><a href="#" data-action="edit" data-toggle="button">Edit</a></li>
+              <li><a href="#" data-action="run">Run</a></li>
+              <li class="dropdown" id="demolist">
+                  <a class="dropdown-toggle" data-toggle="dropdown" href="#demolist">
+                    Demos
+                    <b class="caret"></b>
+                  </a>
+                  <ul class="dropdown-menu" id="demos">
+                  </ul>
+            </li>
+            <li><a href="#" data-action="clear.log">Clear Log</a></li>
             </ul>
           </div><!--/.nav-collapse -->
         </div>
@@ -42,38 +49,21 @@
 
     <div class="container-fluid">
       <div class="row-fluid">
-        <div class="span7">
+        <div class="span12">
           <div class="row-fluid" id="editor" style="border: 1px solid #ccc;"></div>
-        </div><!--/span-->
-
-        <div class="span5">
-            <div class="btn-toolbar">
-                <div class="btn-group">
-                    <a class="btn">Back</a>
-                    <a href="#" data-action="run" class="btn">Run</a>
-                    <a class="btn">Next</a>
-                </div>
-
-                <div class="btn-group">
-                  <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">Select Demo
-                    <span class="caret"></span>
-                  </a>
-
-                  <ul id="demos" class="dropdown-menu">
-                  </ul>
-                </div>
-            </div>
+        </div>
+      </div><!--/row-->
 
-            <iframe id="demoframe" src="about:blank" scrolling="no" frameborder="no" width="100%"></iframe>
-        </div><!--/span-->
-
+      <div class="row-fluid">
+        <ul id="log" class="span12">
+        </ul>
       </div><!--/row-->
 
       <footer>
       </footer>
 
     </div><!--/.fluid-container-->
 
-    <script src="dist/demos.js"></script>
+    <script src="dist/demoshell.js"></script>
   </body>
 </html>
diff --git a/lib/client.js b/lib/client.js
@@ -1,10 +1,18 @@
 var fs = require('fs'),
     path = require('path'),
-    debug = require('debug')('demo-client');
+    debug = require('debug')('demo-client'),
+    formatter = require('formatter');
 
-function Client(socket) {
+function Client(socket, opts) {
     this.demo = null;
     this.socket = socket;
+
+    // ensure we have opts
+    opts = opts || {};
+
+    // initialise the demo port and url
+    this.port = opts.port || 8001;
+    this.wsurl = 'ws://localhost:' + this.port;
 }
 
 Client.prototype = {
@@ -28,19 +36,31 @@ Client.prototype = {
             var clientFile = path.resolve(__dirname, 'demos', 'client', name + '-client.js'),
                 demoMod = require('./demos/' + name);
 
-            this.demo = demoMod.run({ port: 8001 });
+            this.demo = demoMod.run(this);
             debug('activated demo: ' + name);
 
             // attempt to load the client code
             debug('attempting to load: ' + clientFile);
             fs.readFile(clientFile, 'utf8', function(err, data) {
                 if (! err) {
-                    client.sendMessage('code', data);
+                    var code = formatter(data);
+
+                    client.sendMessage('code', code(client));
                 }
             });
         }
     },
 
+    close: function() {
+        if (this.demo && this.demo._server) {
+            this.demo._server.once('close', function() {
+                debug('demo client closed');
+            });
+
+            this.demo.close();
+        }
+    },
+
     send: function(data) {
         if (typeof data == 'string' || data instanceof String) {
             this.socket.send(data);

diff --git a/lib/demos/client/echo-client.js b/lib/demos/client/echo-client.js
@@ -1,5 +1,13 @@
-var socket = new WebSocket('ws://localhost:8001');
+var socket = new WebSocket('{{ wsurl }}');
 
 socket.onopen = function() {
-    console.log('ready');
+    socket.send('hi');
+};
+
+socket.onmessage = function(evt) {
+    // log what we received from the server
+    demoshell.info(evt.data);
+
+    // close the socket
+    socket.close();
 };
diff --git a/lib/demos/client/tweets-client.js b/lib/demos/client/tweets-client.js
@@ -0,0 +1,14 @@
+var socket = new WebSocket('{{ wsurl }}');
+
+socket.onopen = function() {
+    socket.send('twitter');
+};
+
+socket.onmessage = function(evt) {
+    var tweet = JSON.parse(evt.data);
+
+    console.log(tweet);
+
+    // log what we received from the server
+    demoshell.info(tweet.text);
+};
diff --git a/lib/demos/echo.js b/lib/demos/echo.js
@@ -1,14 +1,10 @@
-var debug = require('debug')('echo-demo'),
-    WebSocketServer = require('ws').Server;
+var WebSocketServer = require('ws').Server;
 
 exports.run = function(opts) {
     // create the demo server
     var wss = new WebSocketServer(opts);
 
-    debug('initialized echo server on port 8001');
     wss.on('connection', function(ws) {
-        debug('received connection');
-
         ws.on('message', function(message) {
             ws.send(message);
         });

diff --git a/lib/demos/tweets.js b/lib/demos/tweets.js
@@ -0,0 +1,42 @@
+var debug = require('debug')('tweets-demo'),
+    config = require('config'),
+    WebSocketServer = require('ws').Server,
+    Twitter = require('ntwitter'),
+    util = require('util'),
+    reInvalidChars = /[\\\"\x00-\x1f\ud800-\udfff\ufffe\uffff\u2000-\u20ff]/g;
+
+exports.run = function(opts) {
+    // create the demo server
+    var client = new Twitter(config),
+        wss = new WebSocketServer(opts),
+        clients = [];
+
+    wss.on('connection', function(ws) {
+        ws.on('message', function(topic) {
+            debug('tracking topic: ' + topic);
+            client.stream('statuses/filter', { track: topic }, function(stream) {
+                stream.on('data', function(data) {
+                    var tweet = {
+                            user: data.user.screen_name,
+                            text:  (data.text || '').replace(reInvalidChars, '')
+                        };
+
+                    debug('captured tweet: ' + tweet.user + ': ' + tweet.text);
+
+                    try {
+                        ws.send(JSON.stringify(tweet));
+                    }
+                    catch (e) {
+                        debug('error sending tweet across the wire');
+                    }
+                });
+
+                ws.on('close', function() {
+                    stream.destroy();
+                });
+            });
+        });
+    });
+
+    return wss;
+};
diff --git a/package.json b/package.json
@@ -12,6 +12,8 @@
   "dependencies": {
     "config": "0.4.x",
     "debug": "*",
+    "formatter": "0.1.x",
+    "ntwitter": "0.3.x",
     "ws": "0.4.x",
     "underscore": "1.3.x"
   },