使用 pubnub 和 webrtc 在画布之间传输数据成功答案

【问题标题】：Tranfer data between canvas with pubnub and webrtc successfully使用 pubnub 和 webrtc 在画布之间传输数据成功
【发布时间】：2015-06-29 14:39:26
【问题描述】：

我正在尝试实现一个小应用程序（例如为了使我的主应用程序工作），当用户从一个画布单击一个按钮时，另一个用户的频道编号会发生变化，以便与用户相同单击第一个画布上的按钮（这是通过 webrtc 和 pubnub 实现的，如下所示！）。
问题是数据永远不会在对等方之间交换，因此通道永远不会改变。请帮忙！！

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 with 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 is not supported on this 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 by <a href="http://pubnub.com" target="_blank">PubNub</a><br>
        Read the 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>
        // For 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', // always required
          publish_key: 'demo'    // only 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 to 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 and 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);
    }

    // Get Older and 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 for 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 = [];
    }
})();

【问题讨论】：

标签： javascript html canvas webrtc pubnub

【解决方案1】：

我看到你没有使用 test1.js 来发布或订阅，它只是 PubNub 教程页面中的一个画布代码，所以我忽略了 js 来测试你的代码。如果您能在发布问题之前进行清理，那就太好了！

无论如何，发布和订阅都可以正常工作。

我修改了您的代码，以便您可以在第二个用户的浏览器窗口中看到订阅发生的时间-

初始化：



    var pubnub = PUBNUB({
      subscribe_key: 'sub-c-...', 
      publish_key: 'pub-c-...'    
    });

请使用您自己的subscribe_key 和publish_key 密钥，而不是您从教程中复制的密钥！否则，对两者都使用“演示”。

在发生onclick 事件时，您的应用会发布一个随机数作为字符串：


    pubnub.publish({
      channel: 'canvas_channel2000',    
      'message' : {              
        'canvas_channel_number': string_number             
      },                   
      callback : function(m){console.log(m)}
    });



    pubnub.subscribe({ 
      channel: 'canvas_channel2000',
      message: function(m){
        console.log(m);
      }
    });

成功订阅消息后，您应该会在浏览器控制台上看到该对象。上面的代码（删除了一些没有意义的代码，例如订阅中的uuid）按预期工作。

另外，我建议你也使用调试控制台！ http://www.pubnub.com/console/

【讨论】：

太棒了！！！是的，我忘了提到你也应该使用最新的 pubnub.js！ //cdn.pubnub.com/pubnub-3.7.12.min.js
我的错误，它不能正常工作..请重新检查