Skip to content

Commit ebd09ed

Browse files
cvconovercvconover
committed
first commit
1 parent a4ea746 commit ebd09ed

2 files changed

Lines changed: 95 additions & 1039 deletions

File tree

‎web/examples/presence/index.html‎

Lines changed: 95 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,24 @@
11
<html>
22
<head>
33
<title>PubNub Presence Demo</title>
4-
54
<style>
6-
body { height: auto; bottom:0; top:0; font-family: Verdana, Geneva, sans-serif; }
7-
table { border:2px solid #000; width: 100%; height:100%; border-collapse:collapse; }
8-
td { border:2px solid #000; vertical-align: top; padding: 10px; }
9-
td.history { width: 80%; }
10-
td.history .message { clear:both; font-size:12px; }
11-
td.history .message .sender { width: 150px; float:left; /*border:1px solid #000;*/ overflow: hidden; white-space: nowrap; font-weight: bold; }
12-
td.history .message .text { margin-left:155px; /*border:1px solid #000;*/ }
13-
td.chat { height: 19px; padding:0; }
14-
td.chat input { margin:0; }
15-
td.users { width: 20%; font-size: 14px; }
16-
td.users ul { padding-left: 20px; }
17-
td.history .join { text-align: center; color: gray; font-style: italic; font-size:12px; }
18-
td.chat input { width: 100%; }
19-
td.occupancy { text-align: right; padding: 0 10; vertical-align: middle; font-size: 14px; }
20-
input.example { color: #666; }
5+
body { height: auto; bottom:0; top:0; font-family: Verdana, Geneva, sans-serif; }
6+
table { border:2px solid #000; width: 100%; height:100%; border-collapse:collapse; }
7+
td { border:2px solid #000; vertical-align: top; padding: 10px; }
8+
td.history { width: 80%; }
9+
td.history .message { clear:both; font-size:12px; }
10+
td.history .message .sender {
11+
width: 150px; float:left; /*border:1px solid #000;*/ overflow: hidden; white-space: nowrap; font-weight: bold;
12+
}
13+
td.history .message .text { margin-left:155px; /*border:1px solid #000;*/ }
14+
td.chat { height: 19px; padding:0; }
15+
td.chat input { margin:0; }
16+
td.users { width: 20%; font-size: 14px; }
17+
td.users ul { padding-left: 20px; }
18+
td.history .join { text-align: center; color: gray; font-style: italic; font-size:12px; }
19+
td.chat input { width: 100%; }
20+
td.occupancy { text-align: right; padding: 0 10; vertical-align: middle; font-size: 14px; }
21+
input.example { color: #666; }
2122
</style>
2223
</head>
2324
<body>
@@ -42,76 +43,115 @@ <h3>Currently Here</h3>
4243
</tr>
4344
</table>
4445

45-
46-
<div pub-key="demo" sub-key="demo" ssl="off" origin="pubsub.pubnub.com" id="pubnub"></div>
47-
<script src="../../dist/pubnub.min.js"></script>
46+
<!-- WARNING: pubnub-dev.js is unminified and always points to latest release
47+
You should always deploy to production with a minified, versioned library.
48+
Latest release can be found here: https://www.pubnub.com/docs/web-javascript/pubnub-javascript-sdk
49+
-->
50+
<script src="https://cdn.pubnub.com/pubnub-dev.js"></script>
4851

4952
<script>(function(){
53+
// The demo keys are for internal demo purposes only.
54+
// Please sign up for a free PubNub account and use your own publish/subscribe keys
55+
pn = PUBNUB.init({
56+
publish_key: 'demo',
57+
subscribe_key: 'demo',
58+
restore: true // STAY CONNECTED, EVEN WHEN BROWSER IS CLOSED OR WHEN PAGE CHANGES.
59+
});
5060

5161
// LISTEN FOR MESSAGES
52-
PUBNUB.subscribe({
53-
channel : "presence_demo_chat", // CONNECT TO THIS CHANNEL.
54-
55-
restore : true, // STAY CONNECTED, EVEN WHEN BROWSER IS CLOSED
56-
// OR WHEN PAGE CHANGES.
57-
58-
callback : function(message) { // RECEIVED A MESSAGE.
62+
pn.subscribe({
63+
channel: "presence_demo_chat", // CONNECT TO THIS CHANNEL.
64+
message: function(message) { // RECEIVED A MESSAGE.
5965
if (message['sender'] != PUBNUB.db.get($("#pubnub").attr('sub-key')+'uuid')) {
6066
messageEvent(message);
6167
}
6268
},
63-
connect : function() { // CONNECTION ESTABLISHED.
64-
65-
PUBNUB.history({channel: "presence_demo_chat", limit:100, callback: function(history) {
66-
for (i=0; i<history.length; i++) {
67-
messageEvent(history[i]);
68-
}
69-
}});
70-
71-
PUBNUB.here_now({channel:'presence_demo_chat', callback:function(message) {
72-
$("td.occupancy .number").text(message['occupancy']);
73-
for (i=0; i<message['uuids'].length; i++) {
74-
$(".users .list").append($("<li class='"+message['uuids'][i]+"'>"+message['uuids'][i]+"</li>"));
69+
connect: function() { // CONNECTION ESTABLISHED
70+
pn.history({
71+
channel: "presence_demo_chat",
72+
callback: function(history) {
73+
for (i=0; i < history[0].length; i++) {
74+
messageEvent(history[0][i]);
75+
}
7576
}
76-
}});
77-
77+
});
78+
// this is not necessary because the SDK does a here-now call
79+
// and simulates join events locally
80+
// to prevent this automatic here-now call, set noheresync:true in the init
81+
//
82+
// pn.here_now({
83+
// channel:'presence_demo_chat',
84+
// callback:function(message) {
85+
// $("td.occupancy .number").text(message['occupancy']);
86+
// for (i=0; i<message['uuids'].length; i++) {
87+
// $(".users .list").append($("<li class='"+message['uuids'][i]+"'>"+message['uuids'][i]+"</li>"));
88+
// }
89+
// }
90+
// });
7891
},
79-
presence : function(message) {
92+
presence: function(message) {
8093
presenceEvent(message, true);
8194
}
8295
})
83-
})();</script>
96+
})();
97+
</script>
98+
8499
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" ></script>
85100
<script src="js/jquery.example.min.js"></script>
101+
86102
<script>
87103
function presenceEvent(message, announce) {
88-
if (announce == undefined) announce = true;
89-
//console.log("Got presence event: ", message, " announce ", announce);
104+
if (announce == undefined)
105+
announce = true;
106+
90107
if (message['action'] == 'join') {
91108
$(".users .list").append($("<li class='"+message['uuid']+"'>"+message['uuid']+"</li>"));
92-
if (announce) $(".history").append($("<div class='join "+message['uuid']+"'>"+message['uuid']+" joined the channel</li>"));
93-
} else if (message['action'] == 'leave') {
109+
if (announce)
110+
$(".history").append($("<div class='join "+message['uuid']+"'>"
111+
+message['uuid']+" joined the channel</li>"));
112+
}
113+
114+
else if (message['action'] == 'leave') {
94115
$(".users .list li."+message['uuid']).remove();
95-
if (announce) $(".history").append($("<div class='join "+message['uuid']+"'>"+message['uuid']+" left the channel</li>"));
96-
} else if (message['action'] == 'timeout') {
116+
if (announce)
117+
$(".history").append($("<div class='join "+message['uuid']+"'>"
118+
+message['uuid']+" left the channel</li>"));
119+
}
120+
121+
else if (message['action'] == 'timeout') {
97122
$(".users .list li."+message['uuid']).remove();
98-
if (announce) $(".history").append($("<div class='join "+message['uuid']+"'>"+message['uuid']+" timed out</li>"));
123+
if (announce)
124+
$(".history").append($("<div class='join "+message['uuid']
125+
+"'>"+message['uuid']+" timed out</li>"));
99126
}
127+
100128
$("td.occupancy .number").text(message['occupancy']);
101129
}
130+
102131
function messageEvent(message) {
103132
//console.log("Got message: ", message);
104-
$(".history").append($("<div class='message'><div class='sender'>"+message['sender']+"</div><div class='text'>"+message['text']+"</div></div>"));
133+
$(".history").append($("<div class='message'><div class='sender'>"+message['sender']
134+
+"</div><div class='text'>"+message['text']+"</div></div>"));
105135
}
136+
106137
$("td.chat input").example("Chat here");
107-
$('td.chat input').keypress(function(e){
108-
if(e.which == 13){
109-
message = {sender:PUBNUB.db.get($("#pubnub").attr('sub-key')+'uuid'), text:$("td.chat input").val()};
110-
PUBNUB.publish({channel:'presence_demo_chat',message:message});
138+
139+
$('td.chat input').keypress(function(e) {
140+
if (e.which == 13){
141+
message = {
142+
sender: PUBNUB.db.get($("#pubnub").attr('sub-key')+'uuid'),
143+
text: $("td.chat input").val()
144+
};
145+
146+
pn.publish({
147+
channel: 'presence_demo_chat',
148+
message: message
149+
});
150+
111151
messageEvent(message);
112152
$("td.chat input").val("");
113153
}
114154
});
115155
</script>
116156
</body>
117-
</html
157+
</html>

0 commit comments

Comments
 (0)