使用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>
答案 0 :(得分:0)
我已将您的代码更新为PubNub SDK 4.5.0 (the latest at this post)。并对代码进行了适当的调整,以确保您获得结果,例如订阅频道,因此至少有一个占用者。但您可以订阅其他客户的频道,例如your PubNub Admin Dashboard's Debug Console或PubNub 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>
如果您有其他问题,请留言。