Merge pull request #5 from kmlx/master

adding express3 to /examples
sockjs · Jun 20, 2013 · 3e8ecdf · 3e8ecdf
2 parents a1cd240 + 3eca6a6
commit 3e8ecdf
Show file tree

Hide file tree

Showing 4 changed files with 179 additions and 0 deletions.
diff --git a/examples/sockjs-express3/README.md b/examples/sockjs-express3/README.md
@@ -0,0 +1,19 @@
+WebSocket-multiplex SockJS example
+==================================
+
+To run this example, first install dependencies:
+
+    npm install
+
+And run a server:
+
+    node server.js
+
+
+That will spawn an http server at http://127.0.0.1:9999/ which will
+serve both html (served from the current directory) and also SockJS
+service (under the [/multiplex](http://127.0.0.1:9999/multiplex)
+path).
+
+With that set up, WebSocket-multiplex is able to push three virtual
+connections over a single SockJS connection. See the code for details.
diff --git a/examples/sockjs-express3/index.html b/examples/sockjs-express3/index.html
@@ -0,0 +1,96 @@
+<!doctype html>
+<html><head>
+    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+    <script src="http://cdn.sockjs.org/sockjs-0.3.min.js"></script>
+    <script src="http://cdn.sockjs.org/websocket-multiplex-0.1.js"></script>
+    <style>
+      .box {
+          width: 300px;
+          float: left;
+          margin: 0 20px 0 20px;
+      }
+      .box div, .box input {
+          border: 1px solid;
+          -moz-border-radius: 4px;
+          border-radius: 4px;
+          width: 100%;
+          padding: 0px;
+          margin: 5px;
+      }
+      .box div {
+          border-color: grey;
+          height: 300px;
+          overflow: auto;
+      }
+      .box input {
+          height: 30px;
+      }
+      h1 {
+          margin-left: 75px;
+      }
+      body {
+          background-color: #F0F0F0;
+          font-family: "Arial";
+      }
+    </style>
+</head><body lang="en">
+    <h1>SockJS Multiplex example</h1>
+
+    <div id="first" class="box">
+      <div></div>
+      <form><input autocomplete="off" value="Type here..."></input></form>
+    </div>
+
+    <div id="second" class="box">
+      <div></div>
+      <form><input autocomplete="off"></input></form>
+    </div>
+
+    <div id="third" class="box">
+      <div></div>
+      <form><input autocomplete="off"></input></form>
+    </div>
+
+    <script>
+        // Pipe - convenience wrapper to present data received from an
+        // object supporting WebSocket API in an html element. And the other
+        // direction: data typed into an input box shall be sent back.
+        var pipe = function(ws, el_name) {
+            var div  = $(el_name + ' div');
+            var inp  = $(el_name + ' input');
+            var form = $(el_name + ' form');
+
+            var print = function(m, p) {
+                p = (p === undefined) ? '' : JSON.stringify(p);
+                div.append($("<code>").text(m + ' ' + p));
+                div.append($("<br>"));
+                div.scrollTop(div.scrollTop() + 10000);
+            };
+
+            ws.onopen    = function()  {print('[*] open', ws.protocol);};
+            ws.onmessage = function(e) {print('[.] message', e.data);};
+            ws.onclose   = function()  {print('[*] close');};
+
+            form.submit(function() {
+                print('[ ] sending', inp.val());
+                ws.send(inp.val());
+                inp.val('');
+                return false;
+            });
+        };
+
+        var sockjs_url = '/multiplex';
+        var sockjs = new SockJS(sockjs_url);
+
+        var multiplexer = new WebSocketMultiplex(sockjs);
+        var ann  = multiplexer.channel('ann');
+        var bob  = multiplexer.channel('bob');
+        var carl = multiplexer.channel('carl');
+
+        pipe(ann,  '#first');
+        pipe(bob,  '#second');
+        pipe(carl, '#third');
+
+        $('#first input').focus();
+    </script>
+</body></html>
diff --git a/examples/sockjs-express3/package.json b/examples/sockjs-express3/package.json
@@ -0,0 +1,9 @@
+{
+    "name"         : "websocket-multiplex-sockjs-express3-example",
+    "version"      : "0.0.0-unreleasable",
+    "dependencies" : {
+        "express"             : "3.0.0",
+        "sockjs"              : "0.3.x",
+        "websocket-multiplex" : "*"
+    }
+}
diff --git a/examples/sockjs-express3/server.js b/examples/sockjs-express3/server.js
@@ -0,0 +1,55 @@
+var http                = require('http');
+var express             = require('express');
+var sockjs              = require('sockjs');
+
+var websocket_multiplex = require('websocket-multiplex');
+
+
+// 1. Setup SockJS server
+var sockjs_opts = {sockjs_url: "http://cdn.sockjs.org/sockjs-0.3.min.js"};
+var service = sockjs.createServer(sockjs_opts);
+
+
+// 2. Setup multiplexing
+var multiplexer = new websocket_multiplex.MultiplexServer(service);
+
+var ann = multiplexer.registerChannel('ann');
+ann.on('connection', function(conn) {
+    conn.write('Ann says hi!');
+    conn.on('data', function(data) {
+        conn.write('Ann nods: ' + data);
+    });
+});
+
+var bob = multiplexer.registerChannel('bob');
+bob.on('connection', function(conn) {
+    conn.write('Bob doesn\'t agree.');
+    conn.on('data', function(data) {
+        conn.write('Bob says no to: ' + data);
+    });
+});
+
+var carl = multiplexer.registerChannel('carl');
+carl.on('connection', function(conn) {
+    conn.write('Carl says goodbye!');
+    // Explicitly cancel connection
+    conn.end();
+});
+
+
+// 3. Express server
+var app    = express();
+var server = http.createServer(app);
+
+service.installHandlers(server, {prefix:'/multiplex'});
+
+console.log(' [*] Listening on 0.0.0.0:9999' );
+app.listen(9999, '0.0.0.0');
+
+app.get('/', function (req, res) {
+    res.sendfile(__dirname + '/index.html');
+});
+
+app.get('/multiplex.js', function (req, res) {
+    res.sendfile(__dirname + '/multiplex.js');
+});