widoyo/publish.html

## publish.html
<!doctype>
<html>
<head>
<!-- Include the PubNub Library -->
<script src="https://cdn.pubnub.com/pubnub.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<!-- Instantiate PubNub -->
<script type="text/javascript">

  var PUBNUB_demo = PUBNUB.init({
    publish_key: 'pub-c-95022de8-5f7f-4a7b-b165-90100ee1e25e',
    subscribe_key: 'sub-c-a929aab2-6850-11e3-be72-02ee2ddab7fe'
  });

  //Subscribe to the demo_tutorial channel
  PUBNUB_demo.subscribe({
    channel: 'front',
    message: function (m) { $("#ptext").text(m); }
  });

  $(document).ready(function(){
    $("#mytext").on("change", function(){
      PUBNUB_demo.publish({
        channel: "demo_tutorial",
        message: $(this).val()
      });
    });
  });

</script>
<style>
h2 { text-align: center; font-size: 4em; color: #e22; }
</style>
</head>
<body>
<h1>Publisher Pubnub</h1>
<p>Your message : </p>
<h2 id="ptext">?</h2>
<input type="text" id="mytext">
</body>
</html>

## subscribe.html
<!doctype>
<html>
<head>
  <title>Subscriber PUBNUB</title>
<!-- Include the PubNub Library -->
<script src="https://cdn.pubnub.com/pubnub.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<!-- Instantiate PubNub -->
<script type="text/javascript">

  var PUBNUB_demo = PUBNUB.init({
    publish_key: 'pub-c-95022de8-5f7f-4a7b-b165-90100ee1e25e',
    subscribe_key: 'sub-c-a929aab2-6850-11e3-be72-02ee2ddab7fe'
  });

  //Subscribe to the demo_tutorial channel
  PUBNUB_demo.subscribe({
    channel: 'demo_tutorial',
    message: function(m){ $("#mytext").html(m); }
  });

  $(document).ready(function(){
    $("#mybutton").on("click", function(){
      PUBNUB_demo.publish({
        channel: "front",
        message: $("#tfront").val()
      });
    });
  });

</script>
<style>
p { color: #e33; font-size: 2em; }
</style>
</head>
<body>
<h1>Demo Pubnub -- Subscriber</h1>
<p id="mytext">Watch here...</p>
Send to Front <input type="text" id="tfront" placeholder="type here..."> <button id="mybutton">send</button>
</body>
</html>
	<!doctype>
	<html>
	<head>
	<!-- Include the PubNub Library -->
	<script src="https://cdn.pubnub.com/pubnub.min.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

	<!-- Instantiate PubNub -->
	<script type="text/javascript">

	var PUBNUB_demo = PUBNUB.init({
	publish_key: 'pub-c-95022de8-5f7f-4a7b-b165-90100ee1e25e',
	subscribe_key: 'sub-c-a929aab2-6850-11e3-be72-02ee2ddab7fe'
	});

	//Subscribe to the demo_tutorial channel
	PUBNUB_demo.subscribe({
	channel: 'front',
	message: function (m) { $("#ptext").text(m); }
	});

	$(document).ready(function(){
	$("#mytext").on("change", function(){
	PUBNUB_demo.publish({
	channel: "demo_tutorial",
	message: $(this).val()
	});
	});
	});

	</script>
	<style>
	h2 { text-align: center; font-size: 4em; color: #e22; }
	</style>
	</head>
	<body>
	<h1>Publisher Pubnub</h1>
	<p>Your message : </p>
	<h2 id="ptext">?</h2>
	<input type="text" id="mytext">
	</body>
	</html>