forked from pubnub/javascript
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathmobile-chat.html
More file actions
125 lines (105 loc) · 3.78 KB
/
Copy pathmobile-chat.html
File metadata and controls
125 lines (105 loc) · 3.78 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
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<!doctype html>
<html>
<head>
<title>PubNub Chat</title>
<meta http-equiv=content-type content=text/html;charset=utf-8>
<meta name=viewport content=width=device-width>
<meta name=viewport content=initial-scale=1.0>
<meta name=viewport content=user-scalable=no>
<meta name=apple-mobile-web-app-capable content=yes>
<meta name=apple-mobile-web-app-status-bar-style content=black>
<link rel=apple-touch-icon href=icon.png>
<link rel=apple-touch-startup-image href=startup.png>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<style>
.message {
padding: 5px 5px 5px 5px;
}
.username {
font-weight: strong;
color: #0f0;
}
.msgContainerDiv {
overflow-y: scroll;
height: 250px;
}
</style>
</head>
<body>
<div data-role="page" id="loginPage" data-role="page" data-theme="a">
<div data-role="header">
<h1>PubNub Chat</h1>
</div>
<div data-role="content">
<div data-role="fieldcontain">
<label for="chatNameText"><strong>Chat Name:</strong></label>
<input type="text" name="chatNameText" id="chatNameText" value="" />
<button id="chatNameButton">Ok</button>
</div>
</div>
<div data-role="footer">
<h4>PubNub Chat</h4>
</div>
</div>
<div data-role="page" id="chatPage" data-role="page" data-theme="a">
<div data-role="header">
<h1>PubNub Chat</h1>
</div>
<div data-role="content">
<div id="incomingMessages" name="incomingMessages" class="msgContainerDiv" ></div>
<label for="messageText"><strong>Message:</strong></label>
<textarea id="messageText"></textarea>
<fieldset class="ui-grid-a">
<div class="ui-block-a"><a href="#loginPage" id="goBackButton" data-role="button">Go Back</a></div>
<div class="ui-block-b"><button data-theme="a" id="chatSendButton" name="chatSendButton">Send</input>
</fieldset>
</div>
<div data-role="footer">
<h4>PubNub Chat</h4>
</div>
</div>
<div id=pubnub pub-key=demo sub-key=demo></div>
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
<script src=../../web/pubnub.min.js></script>
<script>$(document).ready(function(){
var chatName = ""
, channel = "mobile-chat";
PUBNUB.subscribe({
channel : channel,
callback : function(message) {
$("#incomingMessages").append(
"<div class='message'><span class='username'>" +
(message.chatName || 'Anonymous') +
"</span> : " +
(message.text || ' ') +
"</div>"
);
$("#incomingMessages").scrollTop(
$("#incomingMessages")[0].scrollHeight
);
}
});
$("#chatNameButton").click(function(){
chatName = $("#chatNameText").val();
if(chatName.length <= 0) chatName = "unknown";
$(location).attr('href',"#chatPage");
});
$("#messageText").bind( 'keydown', function(e) {
if ((e.keyCode || e.charCode) !== 13) return true;
$("#chatSendButton").click();
return false;
});
$("#chatSendButton").click(function(){
PUBNUB.publish({
channel : channel,
message : {
chatName : chatName,
text : $("#messageText").val()
}
});
$("#messageText").val("");
});
});</script>
</body>
</html>