Codoodler

Codoodler

Doodle with strangers on InterWeb!
This is a very simple multi-user doodling web app, using PubNub real-time network JavaScript API, that enables you to draw on the canvas with strangers.

Featured Use

  1. Publish – Subscribe
  2. History – Fetch, Delete
  3. Presence events – Join, Disconnect, HereNow
Publish and Subscribe Draw Paths

Build your drawing web app by simply:

  • Creating a drawing canvas that allows a user to draw, with HTML5 Canvas
  • Publishing the drawing path data to Isometrik data stream
  • Subscribing the data from other users from the data stream, and draw on the canvas

To send data, all you have to do is broadcast the array of canvas coordinates to a channel with publish(). To retrieve the published data, you simply need subscribe().

isometrik.publish({ channel: channel, message: data, storeInHistory: true }); isometrik.subscribe({ channels: [channel], withPresence: true });
isometrik.subscribe({ channels: [channel], withPresence: true }); presence: function(m) { if (m.occupancy > 1) { document.getElementById('unit').textContent = 'doodlers'; } document.getElementById('occupancy').textContent = m.occupancy; var p = document.getElementById('occupancy').parentNode; p.classList.add('anim'); p.addEventListener('transitionend', function() { p.classList.remove('anim'); }, false); }
Displaying Occupancy

You can also display the number of users online with Presence Detection API. presence() receives user events including Join/Leave status changes.

Fetching Old Data Using History

You can easily retrieve last drawing data using history() API. This function fetches historical messages of a channel. This Storage & Playback feature provides realtime access to a history for all messages published to Isometrik.

isometrik.history({ channel: channel, count: 50 }).then((message) => { message.messages.forEach(drawFromStream); });