Skip to content

Instantly share code, notes, and snippets.

@johnschimmel

johnschimmel/pubnub-chat.html

Created November 16, 2011 01:48
Show Gist options
  • Save johnschimmel/1369009 to your computer and use it in GitHub Desktop.
Save johnschimmel/1369009 to your computer and use it in GitHub Desktop.
Download ZIP
Telepresence Change color annoy your friends
Raw
pubnub-chat.html
<html>
<head></head>
<body>
<div><input id=input placeholder=you-chat-here /></div>
<div id="box"></div>
<!--
UPDATE pub-key and sub-key with your info from pubnub
-->
<div pub-key="YOURKEYHERE" sub-key="YOURKEYHERE" ssl="off" origin="pubsub.pubnub.com" id="pubnub"></div>
<script src="http://cdn.pubnub.com/pubnub-3.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script>(function(){
var user = prompt("Type your name");
var box = PUBNUB.$('box'); //where the chat messages end up
var input = PUBNUB.$('input'); // where the user types
var channel = 'chat'; // what pubnub channel we subscribe to.
var fontSize = 13;
PUBNUB.subscribe({
channel : channel,
callback : function(text) {
if (text.clicked) {
fontSize = fontSize + 5; //increment font
jQuery('#box').css('font-size',fontSize);
} else {
var incomingMsg = text.user + ':'+ text.msg;
incomingMsg = incomingMsg.replace( /[<>]/g, '' );
box.innerHTML = incomingMsg + '<br/>' + box.innerHTML;
//update background color
jQuery('body').css('background-color',text.msg);
}
}
});
PUBNUB.bind( 'keyup', input, function(e) {
//if return key or ENTER then send the message
if (e.keyCode == 13 ) {
PUBNUB.publish({
channel : channel,
message : {
msg:input.value,
user:user
}
});
}
} );
jQuery('body').click( function(e){
PUBNUB.publish({
channel : channel,
message : {
clicked : true
}
});
});
})();</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment