javascript - Tranfer data between canvas with pubnub and webrtc successfully -
i trying implement small app (example in order make main app work) when user 1 canvas clicks button, other user's channels numbers changes in order become same user clicked button on first canvas (this implemented shown below webrtc , pubnub! ).
the problem data never exchanged between peers channel never changed. please help!!
index.html
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge,chrome=1"> <title>codoodler</title> <meta name="description" content="draw"> <meta name="author" content="tomomi imura @girlie_mac"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="css/style.css"> <script src="http://cdn.pubnub.com/pubnub.min.js"></script> </head> <body> <script>var canvas_flag = false;</script> <header> <div> <h1>codoodler</h1> <h2>doodle strangers on interweb!</h2> </div> <div class="bubble"> <span id="occupancy">0</span> <span id="unit">doodler</span> </div> </header> <section id="main"> <canvas id="drawcanvas" width="300" height="300">canvas not supported on browser!</canvas> <section id="colorswatch"> <input type="radio" name="color" id="color01" data-color="gold" checked><label for="color01"></label> <input type="radio" name="color" id="color02" data-color="darkorange"> <label for="color02"></label> <input type="radio" name="color" id="color03" data-color="navy"> <label for="color03"></label> <input type="radio" name="color" id="color04" data-color="yellowgreen"> <label for="color04"></label> <input type="radio" name="color" id="color05" data-color="firebrick"> <label for="color05"></label> <input type="radio" name="color" id="color06" data-color="powderblue"> <label for="color06"></label> </section> </section> <footer> powered <a href="http://pubnub.com" target="_blank">pubnub</a><br> read tutorial on <a href="http://pubnub.com/blog/multiuser-draw-html5-canvas-tutorial/" target="_blank">pubnub blog</a> </footer> <a href="https://github.com/pubnub/codoodler" target="_blank"><img class="github" style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/365986a132ccd6a44c23a9169022c0b5c890c387/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67" alt="fork me on github" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png"></a> <script> // history() demo, please view history.html. var drawhistory = false; var number = math.floor(math.random()*999+1); //phone variable var string_number = number.tostring(); var pubnub = pubnub({ subscribe_key: 'demo', // required publish_key: 'demo' // required if publishing }); function function1(){ pubnub.publish({ channel: 'canvas_channel2000', 'message' : { 'canvas_channel_number': string_number }, callback : function(m){console.log(m)} }); } function change_the_canvas_channel_(m){ string_number = m.canvas_channel_number; console.log("tora kanali egine"+ string_number); } pubnub.subscribe({ channel: 'canvas_channel2000', message: function(m){change_the_canvas_channel_(m)} error: function (error) { // handle error here console.log(json.stringify(error)); } }); </script> <button type="button" onclick = "function1()">submit</button> <script src="js/test1.js"></script> </body> </html> test1.js
(function() { /* canvas */ var canvas = document.getelementbyid('drawcanvas'); var ctx = canvas.getcontext('2d'); var color = document.queryselector(':checked').getattribute('data-color'); canvas.width = 300; canvas.height = 300; ctx.strokestyle = color; ctx.linewidth = '3'; ctx.linecap = ctx.linejoin = 'round'; /* mouse , touch events */ document.getelementbyid('colorswatch').addeventlistener('click', function() { color = document.queryselector(':checked').getattribute('data-color'); }, false); var istouchsupported = 'ontouchstart' in window; var ispointersupported = navigator.pointerenabled; var ismspointersupported = navigator.mspointerenabled; var downevent = istouchsupported ? 'touchstart' : (ispointersupported ? 'pointerdown' : (ismspointersupported ? 'mspointerdown' : 'mousedown')); var moveevent = istouchsupported ? 'touchmove' : (ispointersupported ? 'pointermove' : (ismspointersupported ? 'mspointermove' : 'mousemove')); var upevent = istouchsupported ? 'touchend' : (ispointersupported ? 'pointerup' : (ismspointersupported ? 'mspointerup' : 'mouseup')); canvas.addeventlistener(downevent, startdraw, false); canvas.addeventlistener(moveevent, draw, false); canvas.addeventlistener(upevent, enddraw, false); /* pubnub */ var pubnub = pubnub.init({ publish_key : 'pub-c-465c4b3b-0b7d-40de-86c5-10a9433058b5', subscribe_key : 'sub-c-43a257e0-d94a-11e4-a2b8-0619f8945a4f', leave_on_unload : true }); pubnub.subscribe({ channel: string_number, callback: drawfromstream, 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); } }); function publish(data) { pubnub.publish({ channel: string_number, message: data }); } /* draw on canvas */ function drawoncanvas(color, plots) { ctx.strokestyle = color; ctx.beginpath(); ctx.moveto(plots[0].x, plots[0].y); for(var i=1; i<plots.length; i++) { ctx.lineto(plots[i].x, plots[i].y); } ctx.stroke(); } function drawfromstream(message) { if(!message || message.plots.length < 1) return; drawoncanvas(message.color, message.plots); } // older , past drawings! if(drawhistory) { pubnub.history({ channel : string_number, count : 50, callback : function(messages) { pubnub.each( messages[0], drawfromstream ); } }); } var isactive = false; var plots = []; function draw(e) { e.preventdefault(); // prevent continuous touch event process e.g. scrolling! if(!isactive) return; var x = istouchsupported ? (e.targettouches[0].pagex - canvas.offsetleft) : (e.offsetx || e.layerx - canvas.offsetleft); var y = istouchsupported ? (e.targettouches[0].pagey - canvas.offsettop) : (e.offsety || e.layery - canvas.offsettop); plots.push({x: (x << 0), y: (y << 0)}); // round numbers touch screens drawoncanvas(color, plots); } function startdraw(e) { e.preventdefault(); isactive = true; } function enddraw(e) { e.preventdefault(); isactive = false; publish({ color: color, plots: plots }); plots = []; } })();
i see not using test1.js publish or subscribe, it's canvas code pubnub tutorial page, ignore js test code. nice if can clean before posting question!
anyway, publish , subscribe work should.
i modified code can see when subscription occurs on 2nd user's browser window-
- init:
var pubnub = pubnub({ subscribe_key: 'sub-c-...', publish_key: 'pub-c-...' }); please use ownsubscribe_key , publish_key keys, not ones copied tutorial! otherwise, use 'demo' both.
- upon
onclickevent, app publish random number string:
pubnub.publish({ channel: 'canvas_channel2000', 'message' : { 'canvas_channel_number': string_number }, callback : function(m){console.log(m)} }); - subscribing
pubnub.subscribe({ channel: 'canvas_channel2000', message: function(m){ console.log(m); } }); when message subscribed, should see object on browser console. code above (removed of code not make sense, e.g. uuid in subscribe) works expected.
also, advise use debug console too! http://www.pubnub.com/console/
Comments
Post a Comment