Quartz Composer WebSocket Plug-In
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
Compositions rfc6455 Feb 8, 2013
CoreJSON @ aeca8fd Fix for CoreJSON YAJL/yajl incorrect ref May 10, 2011
CoreWebSocket @ 0af22fb
WebPages rfc6455 Feb 8, 2013
quartzcomposer-websocket.xcodeproj rfc6455 Feb 8, 2013
quartzcomposer-websocket rfc6455 Feb 8, 2013
Readme.mkdn Readme update May 17, 2011


Quartz Composer WebSocket Plug-In

WebSocket Patch enables low-latency, bi-directional, full-duplex communication with web browsers - Firefox 4, Google Chrome 4, Opera 11 and Apple Safari 5 (including iOS Safari) as well as Adobe Flash/Flex/AIR applications.

The patch acts as a server listening on specified TCP port (default 60001).

To make connection to the patch you could use the following JavaScript code:

<!DOCTYPE html>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <script type="text/javascript" charset="utf-8">
      // WebSocket
      var ws = null;
      // When the page is loaded...
      window.addEventListener('load', function(e) {
        // Check if the browser supports WebSockets...
        if ("WebSocket" in window) {
          // ...it does, let's connect to localhost default port.
          // Make sure Quartz Composer composition is running with
          // the WebSocket Patch set to port 60001. 
          ws = new WebSocket('ws://localhost:60001');
          // Invoked when there was an error with the connection. 
          ws.onerror = function(e) {
            console.log('error', e);
          // Invoked when the socket has been opened successfully.
          ws.onopen = function(e) {
            console.log('open', e);
          // Callback invoked when incoming messages arrive. Event `data` attribute
          // holds the string passed. WebSocket in current spec supports utf8 text-based
          // communication only. Binary data  is base64 encoded.
          ws.onmessage = function(e) {
            var json = JSON.parse(e.data);
            console.log('message', json);
          // Invoked when the socket has been closed
          ws.onclose = function(e) {
            console.log('close', e);
        } else {
          // ...seems like the web browser doesn't support WebSockets.
          alert('WebSocket not supported by your browser, use Safari, Chrome or Firefox');
      }, false);

Messages are JSON encoded into tuples [name, value]. Example messages:

// Number input port
['/foo/bar', 3.14]

// Boolean
['/my/toggle', true]

// Array
['/foo/numbers', [1, 3, 5, 7, 11]]

// Structure
['/structure', { 'foo': 'bar' }]

// Image

In order to send values from web page to Quartz Composer, in JavaScript JSON encode the tuple, ie:

var value = 3.14;
ws.send( JSON.stringify(['/foo/bar', value]) );

If the WebSocket Patch has foo/bar output port defined with Number format, the value will arrive to Quartz Composer for further processing.

## Installation

# Clone the repository including all submodules
git clone --recursive git://github.com/mirek/quartzcomposer-websocket.git

# Build the plugin and install in ~/Library/Graphics/Quartz Composer Plug-Ins/WebSocket.plugin
cd quartzcomposer-websocket
xcodebuild clean install

# Open example composition and run it
open Compositions/Example.qtz

# Open example web page
open WebPages/example.html