2017-03-23 3 views
0

Der folgende Code funktioniert einwandfrei, wenn ich die IDE-Klammern verwende. Wenn ich es jedoch auf github veröffentliche, wird es nicht korrekt mit PubNub verbunden. Ich nehme an, dass ich das SDK nicht richtig eingerichtet habe, aber ich bin ein bisschen wie ein Anfänger und habe keine Ideen mehr, wie ich es beheben kann. Jede Hilfe würde sehr geschätzt werden!Pubnub-Benutzerliste wird nicht angezeigt, wenn sie in GitHub veröffentlicht wird, funktioniert aber in Adobe-Klammern

Kann mir jemand bei diesem Problem helfen?

<!doctype html> 
<html> 
<head> 
<title>LupkerMusic</title> 


    <script type="text/javascript" src="jquery-3.1.1.js"></script> 
    <link rel="stylesheet" type="text/css" href="css/console.css"> 


</head> 
<body> 

    <h1 class="title">LUPKERMUSIC<img src="lupkermusiclogoinverse.png" 
    style="width:50px;height:50;"></h1> 

<p>List of Users</p> 
<br> 

<div id="channelStateBar" class="channelState"></div> 
<br> 

<button class="btn btn-primary updateButton" 
onclick="updateChannelState()">Update User List</button> 

<script src=https://cdn.pubnub.com/pubnub.min.js></script> 

<script type="text/javascript"> 
    (function() { 
     var publish_key = 'pub-c-a4dc5ebf-redacted'; 
     var subscribe_key = 'sub-c-1a1f6598-redacted'; 
     ssl: true; 
     var username = window.location.search.substring(1).split('=') 
[1]; 
     pubnub =PUBNUB.init({ 
      publish_key : publish_key, 
      subscribe_key : subscribe_key, 
      uuid : username 

     }); 
    })(); 
</script> 

<script type="text/javascript"> 
    function updateChannelState() { 
     pubnub.here_now({ 
      channel : 'lupkschat', 
      withPresence: true, 
      callback : function(m){ debugger; 
       $('#channelStateBar')[0].innerHTML = 
       'Occupancy : ' + m.occupancy + '<br/><br/><br/>' + 
'Users : ' + m.uuids; 
      } 
     }); 
    } 
</script> 
</body> 
</html> 
+0

Was meinst du mit * IDE Klammern * und * Veröffentlichung auf GitHub *? –

+0

[Verwenden Sie das neueste SDK] (https://www.pubnub.com/docs/web-javascript/pubnub-javascript-sdk) und nicht eine 3x-Version. https://cdn.pubnub.com/sdk/javascript/pubnub.4.5.0.min.js - dies wird auch Änderungen an Ihrem Code bedeuten. Mehr zu kommen ... –

+0

wird sehr bald aktualisierten Code zur Verfügung stellen. –

Antwort

0

Parsing PubNub Hier Ergebnisse Jetzt

Ich habe Ihren Code PubNub SDK 4.5.0 (the latest at this post) aktualisiert. Und Sie haben den Code richtig angepasst, um sicherzustellen, dass Sie Ergebnisse erhalten, wie beispielsweise Abonnieren des Kanals, sodass mindestens ein Nutzer anwesend ist. Aber Sie können den Kanal von anderen Kunden wie in your PubNub Admin Dashboard's Debug Console oder PubNub Dev Console abonnieren.

In dem 4x PubNub SDKs, die hereNow results are presented in a much more rick format mit mehreren Kanälen und UUID pro Kanal wie folgt:

{ 
    "status": 200, 
    "message": "OK", 
    "payload": { 
     "channels": { 
      "81d8d989-b95f-443c-a726-04fac323b331": { 
       "uuids": [ 
        "70fc1140-22b5-4abc-85b2-ff8c17b24d59" 
       ], 
       "occupancy": 1 
      }, 
      "81b7a746-d153-49e2-ab70-3037a75cec7e": { 
       "uuids": [ 
        "91363e7f-584b-49cc-822c-52c2c01e5928" 
       ], 
       "occupancy": 1 
      }, 
      "c068d15e-772a-4bcd-aa27-f920b7a4eaa8": { 
       "uuids": [ 
        "ccfac1dd-b3a5-4afd-9fd9-db11aeb65395" 
       ], 
       "occupancy": 1 
      } 
     }, 
     "total_channels": 3, 
     "total_occupancy": 3 
    }, 
    "service": "Presence" 
} 

Da dieses Beispiel für einen bestimmten Kanal nur sucht, habe ich die Kanäle Schleife nicht implementieren und einfach den Kanalnamen in die Antwortparsignierung fest codiert. Hier ist der resultierende Code und funktioniert so wie mit den Schlüsseln demo/demo, aber Sie sollten durch Ihre eigenen Pub/Sub-Schlüssel ersetzen. Aber Sie sollten diese Schlüssel nicht ohne die Öffentlichkeit zuerst veröffentlichen securing you app with PubNub Access Manager.

<script type="text/javascript"> 
 
    (function() { 
 
     var publish_key = 'demo'; // replace with your pub key 
 
     var subscribe_key = 'demo'; // replace with your sub key 
 
     var username = "uuid-" + Date.now() 
 
     // window.location.search.substring(1).split('='); 
 

 
     pubnub = new PubNub({ 
 
      publishKey : publish_key, 
 
      subscribeKey : subscribe_key, 
 
      ssl: true, 
 
      uuid : username 
 
     }); 
 

 
     pubnub.addListener({ 
 
      status: function(statusEvent) { 
 
       console.log("Status event received: ", statusEvent); 
 
      }, 
 
      message: function(message) { 
 
       console.log("Message received: ", message); 
 
      }, 
 
      presence: function(presenceEvent) { 
 
       console.log("Presence event received: ", presenceEvent); 
 
       // by monitoring join/leave/timeout events, 
 
       // you can update the user list in realtime 
 
       // after the initial hereNow call 
 
      } 
 
     }); 
 

 
     // subscribing to channel so that at least 
 
     // 1 occupant is there when we call hereNow 
 
     pubnub.subscribe({ 
 
      channels: ['lupkschat'], 
 
      withPresence: true 
 
     }); 
 

 
    })(); 
 
    </script> 
 

 
    <script type="text/javascript"> 
 
    var updateChannelState = function() { 
 
     pubnub.hereNow({ 
 
      channels : ['lupkschat'], 
 
      withPresence: true 
 
     }, 
 
     function(status, response){ 
 
      console.log(status, response); 
 
      // hardcoded with known channel for this simple example 
 
      // best practice would be to loop through all channels 
 
      var channel = response.channels['lupkschat']; 
 
      var uuids = []; 
 

 
      for (var i=0; i < channel.occupancy; i++) { 
 
       uuids.push(channel.occupants[i].uuid); 
 
      } 
 

 
      $('#channelStateBar')[0].innerHTML = 'Occupancy : ' 
 
       + channel.occupancy + '<br>' 
 
       + 'Users : [' + uuids.join(" | ") + "]"; 
 
     }); 
 
    }; 
 
    </script>
<html> 
 
<head> 
 
    <title>LupkerMusic</title> 
 
    <script src="https://code.jquery.com/jquery-3.2.1.min.js" type="text/javascript"></script> 
 
    <script src="https://cdn.pubnub.com/sdk/javascript/pubnub.4.5.0.min.js" type="text/javascript"></script> 
 
</head> 
 
<body> 
 
    <h1 class="title">LUPKERMUSIC</h1> 
 
    List of Users 
 
    <div class="channelState" id="channelStateBar"></div> 
 
    <button class="btn btn-primary updateButton" onclick="updateChannelState()">Update User List</button> 
 

 
    <script type="text/javascript"> 
 
    (function() { 
 
     var publish_key = 'demo'; // replace with your pub key 
 
     var subscribe_key = 'demo'; // replace with your sub key 
 
     var username = "uuid-" + Date.now() 
 
     // window.location.search.substring(1).split('='); 
 

 
     pubnub = new PubNub({ 
 
      publishKey : publish_key, 
 
      subscribeKey : subscribe_key, 
 
      ssl: true, 
 
      uuid : username 
 
     }); 
 

 
     pubnub.addListener({ 
 
      status: function(statusEvent) { 
 
       console.log("Status event received: ", statusEvent); 
 
      }, 
 
      message: function(message) { 
 
       console.log("Message received: ", message); 
 
      }, 
 
      presence: function(presenceEvent) { 
 
       console.log("Presence event received: ", presenceEvent); 
 
       // by monitoring join/leave/timeout events, 
 
       // you can update the user list in realtime 
 
       // after the initial hereNow call 
 
      } 
 
     }); 
 

 
     // subscribing to channel so that at least 
 
     // 1 occupant is there when we call hereNow 
 
     pubnub.subscribe({ 
 
      channels: ['lupkschat'], 
 
      withPresence: true 
 
     }); 
 

 
    })(); 
 
    </script> 
 

 
    <script type="text/javascript"> 
 
    var updateChannelState = function() { 
 
     pubnub.hereNow({ 
 
      channels : ['lupkschat'], 
 
      withPresence: true 
 
     }, 
 
     function(status, response){ 
 
      console.log(status, response); 
 
      // hardcoded with known channel for this simple example 
 
      // best practice would be to loop through all channels 
 
      var channel = response.channels['lupkschat']; 
 
      var uuids = []; 
 

 
      for (var i=0; i < channel.occupancy; i++) { 
 
       uuids.push(channel.occupants[i].uuid); 
 
      } 
 

 
      $('#channelStateBar')[0].innerHTML = 'Occupancy : ' 
 
       + channel.occupancy + '<br>' 
 
       + 'Users : [' + uuids.join(" | ") + "]"; 
 
     }); 
 
    }; 
 
    </script> 
 
</body> 
 
</html>

Lassen Sie bitte Anmerkungen, wenn Sie weitere Fragen haben.

+0

Das obige Code-Snippet enthält einen Fehler, wenn Sie auf die Schaltfläche "Benutzerliste aktualisieren" klicken. Die Arbeit am Fix, aber Code funktioniert, wenn Sie es in einer eigenen Datei auf Ihrem System ausführen. –

+0

Ich habe das Problem mit dem Ausführen von Code-Snippets behoben. Es war nur ein Fehler bei der Erstellung des Snippets mit Stack Overflow. –

Verwandte Themen