REALTIME WEB TECHNOLOGIES IN THE NETWORKED PERFORMANCE ENVIRONMENT

- http://rob.kiben.net rob@kiben.net -

NODESCORE

NodeScore is a web based framework to facilitate networked ensemble performance.

  • Scores assembled in HTML5
  • Musicians displays controled remotely
  • Not all-in-one solution - Modular Approach
  • Runs alongside other streams: media, OSC automation etc.

NODESCORE

BreakDOM game screenshot BreakDOM game screenshot

Standards Complient

BreakDOM game screenshot
  • HTML5
  • CSS3
  • (JAVASCRIPT)
  • WEBSOCKETS


Open Source - No Plugins
(Flash, Flex, Shockwave, Java)

WEBSOCKETS

Server Push Technology

BreakDOM game screenshot
  • More efficient than AJAX/Comet Programming
  • Persistant bidirectional TCP socket
  • REQUEST/RESPONSE handshakes elimintated

HTTP://SOCKET.IO

Socket.IO simplifies the WebSocket API and unifies the APIs of its fallback transports.

BreakDOM game screenshot

Serverside Javascript

NodeJS Server

var sio = require('socket.io')
, http = require('http'), fs = require('fs'), static = require('node-static');

var clientFiles = new static.Server('./www');
var httpServer = http.createServer(
    function(request, response) {
	request.addListener('end', function () {
	    clientFiles.serve(request, response);
	    process.setMaxListeners(0);
	});    
    }); httpServer.listen(8889);

var io = sio.listen(httpServer);
io.set('log level', 1); // reduce logging                                                                
io.sockets.on('connection', function (socket) {

Client Plumbing

// load the sockets lib
<script src="/socket.io/socket.io.js"> </script>
		
// connect to socket

var socket = io.connect();
//send something down the pipe

function startChr() { socket.emit("startChr") }                                                          

CLIENT->SERVER->CLIENT

Chronometer on server pushes -> client
// instruction from "director" client executed on server
socket.on('startChr', function () { startChr();}); 
function startChr() { if (chronstate !== 1) { 
   chronstate = 1; chronometer();} }
	    ---snip--- 
	    setTimeout(function(){chronometer()}, 100);
	    socket.broadcast.emit('chronFromServer', chron)
	    socket.emit('chronFromServer', chron) 
	    ---snip---
// update chron value on the clients in line with server
socket.on("chronFromServer", function(chron) {
    $("div#client_chronometer").text(chron);
}); 

NODESCORE: INFO PANEL

screenshot

NODESCORE: CHAT PANEL

screenshot

NODESCORE: NEXUS7 CSS

screenshot

Future Work

the TODO list...

  1. trials room->field->world
  2. Animated SVG, WebGL, <audio>,<video>
  3. stop coding start composing

links

This Presentation: http://nodescore.kiben.net/p/

http://nodescore.kiben.net

ICMC2012 Paper

Source Code on Gitorious

rc-web@kiben.net

View Rob Canning's profile on LinkedIn