forked from pubnub/javascript
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathmsgChaos.html
More file actions
111 lines (79 loc) · 2.94 KB
/
msgChaos.html
File metadata and controls
111 lines (79 loc) · 2.94 KB
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
111
<!DOCTYPE html>
<html>
<head>
<title>Message CHAOS!</title>
<link rel="stylesheet" type="text/css" href="msgChaos.css">
</head>
<body>
<script src=http://cdn.pubnub.com/pubnub-3.6.1.min.js></script>
<script>(function () {
var textAreaList = {};
var imageRE = /(https?:\/\/.*\.(?:png|jpg))/i;
var imageLoading = false;
var imageQ = [];
var tempImage = "";
// Init
var pubnub = PUBNUB.init({
publish_key: 'demo',
subscribe_key: 'demo'
});
pubnub.here_now({state: false, callback: hereNowOutput});
function hereNowOutput(m) {
var channels = Object.keys(m.channels);
var channelList = JSON.stringify(channels);
var channelOutputs = document.getElementById("channelOutputs");
var image = document.getElementById("image");
document.getElementById("channelList").innerHTML=channels;
console.log("Subscribing to " + channels.length + " channels: " + channelList);
pubnub.subscribe({
channel: channels,
message: function (m, e, c) {
message = JSON.stringify(m);
//console.log("Channel: " + c + " " + JSON.stringify(message));
foundImage = imageRE.exec(message);
if (foundImage){
image.setAttribute("src", foundImage[1]);
}
// TODO: Give it a 5s max load time
// if (foundImage) {
// imageQ.push(foundImage[1]);
// }
//
// if (imageQ.length > 0 && imageLoading == false) {
// imageLoading = true;
// tempImage = imageQ.pop();
//
// image.onload = function(){
// imageLoading = false;
// };
//
// image.setAttribute("src", tempImage);
// }
var existingElement = document.getElementById(c);
if (existingElement) {
existingElement.value = message;
} else {
var newLabel = document.createElement("label");
newLabel.setAttribute("for", c);
newLabel.setAttribute("id", "labelFor" + c);
newLabel.innerHTML = c;
channelOutputs.appendChild(newLabel);
var newElement = document.createElement("input");
newElement.setAttribute("id", c);
newElement.setAttribute("size", 350);
newElement.value = message;
channelOutputs.appendChild(newElement);
}
}
});
}
})();</script>
<div id="header">
<h3>All Channels</h3>
<textarea cols="120" rows="10" id="channelList"></textarea>
<img id="image" src="http://www.pubnub.com/static/images/structure/pubnub.png">
</div>
<h3>Latest Channel Activity</h3>
<div id="channelOutputs"></div>
</body>
</html>