gieart87/pubnub_client.html

## pubnub_client.html
<!doctype html>
<html>
<head>
	<title>PubNub Simple Chat Room Demo</title>
	<script src="http://cdn.pubnub.com/pubnub.min.js"></script>
	<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
	<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.1/css/bootstrap.min.css">
</head>
<body>

	<h4>This demo is built on <a href="https://www.pubnub.com" style="color:red">PubNub</a> api.</h4>
	<hr/>

	<div id="userList" class="table-bordered userList" ></div>

	<button id="leaveButton" class="btn btn-danger leaveButton" onclick="leave()">Leave</button>

	<div id="chatHistory" class="table-bordered chatHistory"></div>

	<input type="text" id="message" placeholder="Enter your message here" class="message"/>

	<button id="sendButton" class="btn btn-primary sendButton">Send</button>

	<script type="text/javascript">
		(function() {
			var publish_key = '<pubnub_publish_key>';
			var subscribe_key = '<pubnub_subscribe_key>';
			channel = 'crono_pos_28';
			var username = window.location.search.substring(1).split('=')[1];
			pubnub =PUBNUB.init({
				publish_key : publish_key,
				subscribe_key : subscribe_key,
				uuid : username
			});

			pubnub.subscribe({
				channel : channel,
				callback : function(message) {
					console.log(message);
					$('#chatHistory')[0].innerHTML = message + '<br/>' + $('#chatHistory')[0].innerHTML;
				},
				presence : function(state) {
					if (state.action == 'join') {
						if ($('#userList').text().indexOf(state.uuid) == -1) {
							$('#userList')[0].innerHTML = state.uuid + '<br/>' + $('#userList')[0].innerHTML;
						}
					} else if (state.action == 'leave' || state.action == 'timeout') {
						var index = $('#userList')[0].innerHTML.indexOf(state.uuid);
						if ( index !== -1) {
							$('#userList')[0].innerHTML =
								$('#userList')[0].innerHTML.substring(0,index) +
								$('#userList')[0].innerHTML.substring(index+state.uuid.length+4);
						}
					}

				}
			});

			pubnub.bind('click', pubnub.$('sendButton'), function(e) {
				pubnub.publish({
					channel : channel,
					message : pubnub.get_uuid() + ' : '  + $('#message').val()
				});
				$('#message').val('');
			});
		})();
	</script>

	<script type="text/javascript">
		function leave() {
			pubnub.unsubscribe({
				channel : channel,
				callback : function() {
					window.location = 'Login.html';
				}
			});
		}
	</script>
</body>
</html>
	<!doctype html>
	<html>
	<head>
	<title>PubNub Simple Chat Room Demo</title>
	<script src="http://cdn.pubnub.com/pubnub.min.js"></script>
	<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
	<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.1/css/bootstrap.min.css">
	</head>
	<body>

	<h4>This demo is built on <a href="https://www.pubnub.com" style="color:red">PubNub</a> api.</h4>
	<hr/>

	<div id="userList" class="table-bordered userList" ></div>

	<button id="leaveButton" class="btn btn-danger leaveButton" onclick="leave()">Leave</button>

	<div id="chatHistory" class="table-bordered chatHistory"></div>

	<input type="text" id="message" placeholder="Enter your message here" class="message"/>

	<button id="sendButton" class="btn btn-primary sendButton">Send</button>

	<script type="text/javascript">
	(function() {
	var publish_key = '<pubnub_publish_key>';
	var subscribe_key = '<pubnub_subscribe_key>';
	channel = 'crono_pos_28';
	var username = window.location.search.substring(1).split('=')[1];
	pubnub =PUBNUB.init({
	publish_key : publish_key,
	subscribe_key : subscribe_key,
	uuid : username
	});

	pubnub.subscribe({
	channel : channel,
	callback : function(message) {
	console.log(message);
	$('#chatHistory')[0].innerHTML = message + '<br/>' + $('#chatHistory')[0].innerHTML;
	},
	presence : function(state) {
	if (state.action == 'join') {
	if ($('#userList').text().indexOf(state.uuid) == -1) {
	$('#userList')[0].innerHTML = state.uuid + '<br/>' + $('#userList')[0].innerHTML;
	}
	} else if (state.action == 'leave' \|\| state.action == 'timeout') {
	var index = $('#userList')[0].innerHTML.indexOf(state.uuid);
	if ( index !== -1) {
	$('#userList')[0].innerHTML =
	$('#userList')[0].innerHTML.substring(0,index) +
	$('#userList')[0].innerHTML.substring(index+state.uuid.length+4);
	}
	}

	}
	});

	pubnub.bind('click', pubnub.$('sendButton'), function(e) {
	pubnub.publish({
	channel : channel,
	message : pubnub.get_uuid() + ' : ' + $('#message').val()
	});
	$('#message').val('');
	});
	})();
	</script>

	<script type="text/javascript">
	function leave() {
	pubnub.unsubscribe({
	channel : channel,
	callback : function() {
	window.location = 'Login.html';
	}
	});
	}
	</script>
	</body>
	</html>