Skip to content

Instantly share code, notes, and snippets.

@rohinip

rohinip/pubnub_chat.html

Created February 27, 2014 02:19
Show Gist options
  • Save rohinip/9243036 to your computer and use it in GitHub Desktop.
Save rohinip/9243036 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
pubnub_chat.html
html>
<head>
<style>
.applewrap {
width: 50%;
display: block;
height: 250px;
background: white;
border: 1px solid;
border-color: #e5e5e5 #dbdbdb #d2d2d2;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
-moz-box-shadow: rgba(0,0,0,0.3) 0 1px 3px;
box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
}
.applewrap .col {
float: left;
box-sizing: border-box;
width: 350px;
height: 250px;
padding: 16px 7px 6px 22px;
font: 12px/18px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
color: #343434;
border-right: 1px solid #dadada;
}
.applewrap .col.last { width: 350px; border-right-color: #fff; }
.applewrap .col.last img { float: right; position: relative; top: -20px; }
.applewrap .col h2 { font-size: 15px; margin-bottom: 4px; font-weight: bold; }
</style>
</head>
<body>
<div class="applewrap">
<div class="col">
<h2>User 1</h2>
<input id="input" placeholder="type something to user2" size="25" style="font-size:15px" />
</div>
<div class="col last">
<h2>User 2</h2>
<input id="input2" placeholder="type something back" size="25" style="font-size:15px" />
</div>
</div>
<div class="applewrap">
<div class="col last">
<h1>Chat Output</h1>
<div id="box" style="font-size:15px"></div>
<div id="box2" style="font-size:15px"></div>
</div>
</div>
<script src="https://cdn.pubnub.com/pubnub.min.js"></script>
<script>
(function(){
var box = PUBNUB.$('box'), input = PUBNUB.$('input'), channel = 'rohini_private_chat';
PUBNUB.subscribe({
channel : channel,
message : function(text) { box.innerHTML = (''+text).replace(/[<>]/g, '' )+'<'+'br>'+box.innerHTML }
});
PUBNUB.bind( 'keyup', input, function(e) {
(e.keyCode || e.charCode) === 13 && PUBNUB.publish({
channel : channel, message : input.value, x : (input.value='')
})
} )
var box2 = PUBNUB.$('box2'), input2 = PUBNUB.$('input2'), channel = 'rohini_private_chat';
PUBNUB.subscribe({
channel : channel,
message : function(text) { box.innerHTML = (''+text).replace(/[<>]/g, '' )+'<'+'br>'+box.innerHTML }
});
PUBNUB.bind( 'keyup', input2, function(e) {
(e.keyCode || e.charCode) === 13 && PUBNUB.publish({
channel : channel, message : input2.value, x : (input2.value='')
})
} )
})()
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment