-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathpubnub-demo.html
109 lines (102 loc) · 3.18 KB
/
pubnub-demo.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
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"> </script>
<style>
.convo-box,
input[name="new-message"]{
background: grey;
border-radius: 0.5em;
}
.convo-box{
height: 200px;
margin: 3em auto;
width:33%;
}
.input-box{
margin: 2em auto;
width:33%;
}
input{
height: 3em;
width:100%;
margin: 0.25em 0;
}
.convo-box,
input{
box-shadow: 10px 10px 25px #888888;
}
.chat-area{
width: 100%;
height: 20%;
word-wrap: break-word;
}
.message-sender{
font-weight: bold;
}
.message-date{
float:right;
font-size: 90%;
margin-right: 0.5em;
font-style: italic;
}
</style>
</head>
<body>
<div pub-key="pub-8170e21c-7fd2-4c90-aee1-88261c5c5816" sub-key="sub-894d0468-e416-11e1-a5bd-178bb4b7ab64" ssl="off" origin="pubsub.pubnub.com" id="pubnub"></div>
<div class='chat-area'>
<div class = "convo-box">
</div>
<div class = "input-box">
<div>Input: </div>
<input name="new-message" id="message-field" placeholder="Type new blurb..."/>
</div>
</div>
<script src="http://cdn.pubnub.com/pubnub-3.1.min.js"></script>
<script> (function(){
// Channel to be provided by CaseBlurb db. Probably use caseId.
var channel = "channel";
// Provide username too for posting to convo box:
var user = "[Rails Username]";
var msgBox = $('#message-field');
// LISTEN FOR MESSAGES
PUBNUB.subscribe({
channel : channel, // CONNECT TO THIS CHANNEL.
restore : false, // STAY CONNECTED, EVEN WHEN BROWSER IS CLOSED
// OR WHEN PAGE CHANGES.
callback : function(message) { // RECEIVED A MESSAGE.
// TODO: Add date/time stamp from rails
$('.convo-box').prepend('\
<div class = "message">\
<span class ="message-sender">'+message.sender+'</span>\
<span class = "message-text">'+message.text+'</span>\
<span class = "message-date">'+message.date+'</span>\
</div>')
},
disconnect : function() { // LOST CONNECTION.
$('.convo-box').append(
"Error: Connection Lost." +
"Will auto-reconnect when Online."
)
},
reconnect : function() { // CONNECTION RESTORED.
$('.convo-box').append("Connection restored!")
},
connect : function() { // CONNECTION ESTABLISHED.
PUBNUB.publish({ // SEND A MESSAGE.
channel : channel,
message : {sender: user, text:" is now viewing this blurb.", date: '[date]'}
})
}
});
$('#message-field').keyup(function(e) {
(e.which) === 13 && PUBNUB.publish({
channel : channel, message : {sender: user+': ', text: msgBox.val(), date:'[date]'}, x: msgBox.val('')}) && (function(){
// Do rails message transmission to CaseBlurb db here
console.log("rails magic starts here");
})()
});
})();
</script>
</body>
</html>