/
index.html
110 lines (94 loc) · 4.08 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>PubNub Detailed History Demo</title>
<style>
body { height: auto; bottom:0; top:0; font-family: Verdana, Geneva, sans-serif; }
table { border:2px solid #000; width: 100%; height:100%; border-collapse:collapse; }
td { border:2px solid #000; vertical-align: top; padding: 10px; }
#publish-result{ width: 25%; }
#detailed-history-result { width: 75%; }
td.detailed-history .message { clear:both; font-size:12px; }
td.detailed-history .message .sender { width: 150px; float:left; /*border:1px solid #000;*/ overflow: hidden; white-space: nowrap; font-weight: bold; }
td.detailed-history .message .text { margin-left:155px; /*border:1px solid #000;*/ }
td.publish { height: 19px; padding:0; }
td.publish input { margin:0; }
td.detailed-history .join { text-align: center; color: gray; font-style: italic; font-size:12px; }
td.publish input { width: 100%; }
input.example { color: #666; }
</style>
</head>
<body>
<table>
<tr>
<td class="detailed-history" id="publish-result">
</td>
<td class="detailed-history" id="detailed-history-result" >
</td>
</tr>
<tr>
<td class="publish">
<input type="text"/>
</td>
<td class="detailed-history-inputs">
<input id="detailed-history-button" type="button" value="Detailed History" />
<input id="detailed-history-count" type="text" value="5"/>
<input id="detailed-history-start" type="text" value=""/>
<input id="detailed-history-end" type="text" value=""/>
<input id="detailed-history-channel" type="text" value="hello_world"/>
<input id="detailed-history-reverse" type="checkbox" name="reverse" value="true">Reverse ?</input>
</select>
</td>
</tr>
</table>
<div pub-key="demo" sub-key="demo" ssl="off" origin="pubsub.pubnub.com" id="pubnub"></div>
<script src="../../pubnub-3.3.1.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" ></script>
<script src="js/jquery.example.min.js"></script>
<script>
var publish_help = "Publish Here";
var count_help = "Count (default: 100)";
var start_help = "Start Time Stamp";
var end_help = "End Time Stamp";
function messageEvent(message) {
$("#publish-result").append($("<div class='message'><div class='sender'>"+message['sender']+"</div><div class='text'>"+message['text']+"</div></div>"));
}
function detailedHistoryEvent(message) {
$("#detailed-history-result").append($("<div class='text'>" + JSON.stringify(message) + "</div>"));
}
$("#detailed-history-button").click(function(){
var paramobj = {};
paramobj["channel"] = "detailed-history-demo-channel";
paramobj["callback"] = function(history) {
for (var i=0; i<history.length; i++) {
detailedHistoryEvent(history[i]);
}
};
if ($("#detailed-history-reverse:checked").val())
paramobj["reverse"] = true;
if ($("#detailed-history-count").val() != count_help)
paramobj["count"] = $("#detailed-history-count").val();
else
paramobj["count"] = 100;
paramobj["channel"] = $("#detailed-history-channel").val();
if ($("#detailed-history-start").val() != start_help)
paramobj["start"] = $("#detailed-history-start").val();
if ($("#detailed-history-end").val() != end_help)
paramobj["end"] = $("#detailed-history-end").val();
PUBNUB.detailedHistory(paramobj);
});
$("td.publish input").example(publish_help);
$("#detailed-history-count").example(count_help);
$("#detailed-history-start").example(start_help);
$("#detailed-history-end").example(end_help);
$('td.publish input').keypress(function(e){
if(e.which == 13){
message = {sender:PUBNUB.db.get($("#pubnub").attr('sub-key')+'uuid'), text:$("td.publish input").val()};
PUBNUB.publish({channel:$("#detailed-history-channel").val(),message:message});
messageEvent(message);
$("td.publish input").val("");
}
});
</script>
</body>
</html>