johnschimmel/pubnub-chat.html

## 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>
	<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>