Pubnub用户列表在发布到github时不会出现,但在adobe括号中工作正常

时间:2017-03-23 20:54:32

标签: javascript pubnub

使用IDE括号时,下面的代码工作正常。但是,当我在github上发布它时,它无法正确连接到PubNub。我猜测我没有正确设置SDK但我在这方面有点像菜鸟,并且已经没有关于如何修复它的想法。任何帮助将不胜感激!

任何人都可以帮我解决这个问题吗?

<!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>

1 个答案:

答案 0 :(得分:0)

解析PubNub现在结果

我已将您的代码更新为PubNub SDK 4.5.0 (the latest at this post)。并对代码进行了适当的调整,以确保您获得结果,例如订阅频道,因此至少有一个占用者。但您可以订阅其他客户的频道,例如your PubNub Admin Dashboard's Debug ConsolePubNub Dev Console

在4x PubNub SDK中,hereNow results are presented in a much more rick format每个频道有多个频道和uuids,如下所示:

{
    "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"
}

由于这个例子只是寻找一个特定的通道,我没有实现通道循环,只是将通道名称硬编码到响应解析中。这是生成的代码,将使用demo/demo键,但您应该使用自己的pub / sub键替换。但是,如果没有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>

如果您有其他问题,请留言。