Skip to content

Instantly share code, notes, and snippets.

@dristic
Last active August 3, 2020 11:49
Show Gist options
  • Save dristic/5622385 to your computer and use it in GitHub Desktop.
Save dristic/5622385 to your computer and use it in GitHub Desktop.
Initial chat page for PubNub Messenger Tutorial.
<!-- Chat Page -->
<div data-role="page" id="chatPage" data-theme="c" class="type-interior">
<div data-role="content">
<div data-role="header" data-position="fixed" data-tap-toggle="false">
<h1>Pub Messenger</h1>
</div><!-- /header -->
<div data-role="content">
<ul data-role="listview" id="messageList">
<!-- <li><span class="username">User123:</span>This is my message.</li> -->
</ul>
</div>
<div data-role="footer" data-theme="c">
<textarea id="messageContent"></textarea>
<div class="ui-grid-a">
<div class="ui-block-a"><a href="#" id="sendMessageButton" data-role="button">Send Message</a></div>
<div class="ui-block-b"><a href="#" id="backButton" data-rel="back" data-role="button">Chat Rooms</a></div>
</div>
</div>
</div><!-- /content -->
</div><!-- /page -->
$(document).ready(function () {
// Initialize the PubNub API connection.
var pubnub = PUBNUB.init({
publish_key: 'demo',
subscribe_key: 'demo'
});
// Grab references for all of our elements.
var messageContent = $('#messageContent'),
sendMessageButton = $('#sendMessageButton'),
messageList = $('#messageList');
// Handles all the messages coming in from pubnub.subscribe.
function handleMessage(message) {
var messageEl = $("<li class='message'>"
+ "<span class='username'>" + message.username + ": </span>"
+ message.text
+ "</li>");
messageList.append(messageEl);
messageList.listview('refresh');
// Scroll to bottom of page
$("html, body").animate({ scrollTop: $(document).height() - $(window).height() }, 'slow');
};
// Compose and send a message when the user clicks our send message button.
sendMessageButton.click(function (event) {
var message = messageContent.val();
if (message != '') {
pubnub.publish({
channel: 'chat',
message: {
username: 'test',
text: message
}
});
messageContent.val("");
}
});
// Also send a message when the user hits the enter button in the text area.
messageContent.bind('keydown', function (event) {
if((event.keyCode || event.charCode) !== 13) return true;
sendMessageButton.click();
return false;
});
// Subscribe to messages coming in from the channel.
pubnub.subscribe({
channel: 'chat',
message: handleMessage
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment