majek · April 20, 2012 11:25
diff --git a/.gitignore b/.gitignore
 node_modules

diff --git a/index.html b/index.html
 <!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/package.json b/package.json
 {
        "name": "sockjs-multiplex",
        "version": "0.0.0-unreleasable",
        "dependencies": {
                "express": "2.5.8",
                "sockjs": "*",
                "websocket-multiplex" : "0.1.x"
        }
 }
diff --git a/Procfile b/Procfile
 web:     node server.js

diff --git a/server.js b/server.js
 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",
                   websocket: false};
 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.createServer();
 service.installHandlers(app, {prefix:'/multiplex'});

 var port =  process.env.PORT || 9999;
 console.log(' [*] Listening on 0.0.0.0:' + port);
 app.listen(port, '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');
 });


 // Heroku hack
 service.on('connection', function(conn){
    console.log(" [.] open event received");
    var t = setInterval(function(){
        try{
            conn._session.recv.didClose();
        } catch (x) {}
    }, 15000);
    conn.on('close', function() {
        console.log(" [.] close event received");
        clearInterval(t);
        t = null;
    });
 });
	<!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>
	{
	"name": "sockjs-multiplex",
	"version": "0.0.0-unreleasable",
	"dependencies": {
	"express": "2.5.8",
	"sockjs": "*",
	"websocket-multiplex" : "0.1.x"
	}
	}
	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",
	websocket: false};
	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.createServer();
	service.installHandlers(app, {prefix:'/multiplex'});

	var port = process.env.PORT \|\| 9999;
	console.log(' [*] Listening on 0.0.0.0:' + port);
	app.listen(port, '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');
	});


	// Heroku hack
	service.on('connection', function(conn){
	console.log(" [.] open event received");
	var t = setInterval(function(){
	try{
	conn._session.recv.didClose();
	} catch (x) {}
	}, 15000);
	conn.on('close', function() {
	console.log(" [.] close event received");
	clearInterval(t);
	t = null;
	});
	});