initial commit

This commit is contained in:
Tomomi Imura
2014-11-24 15:50:27 -08:00
parent 9e5e25ddc1
commit 89d4973861
10 changed files with 326 additions and 0 deletions

BIN
Samples/PubNub/.DS_Store vendored Normal file

Binary file not shown.

21
Samples/PubNub/LICENSE Normal file
View File

@@ -0,0 +1,21 @@
The MIT License (MIT)
Copyright (c) 2014 PubNub
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

36
Samples/PubNub/README.md Normal file
View File

@@ -0,0 +1,36 @@
# PubNub JavaScript APIs Example: Super Simple Chat Demo
This is a super simple chat web app, built with using [PubNub JavaScript APIs][pubnub].
## Live Demo
Try this [chat room demo][demo] on multiple browser windows.
## Send and Receive Messages with PubNub APIs
Tasks like sending and receiving data through PubNub take a single function call. The basic *send* functionality happens through a `publish()` call. And to *receive* all of the sent messages on a specific channel, simply make a `subscribe()` call. All of the network infrastructure and scaling is taken care of for you, so you spend time building your app, not the infrastructure.
```
// Send a message
PUBNUB.publish({ channel: 'chat', message: "hello!" });
```
```
// Receive messages
PUBNUB.subscribe({ channel: 'chat', callback: function(m){console.log(m)}});
```
Super easy!
## So, What is PubNub?
PubNub is a globally distributed *data stream* network, a cloud service that developers use to build and scale real-time applications. We connect to over 250 million devices with billions of monthly real-time transactions for financial services, social apps, online auctions, multi-player games, telecom infrastructure, retail apps etc. PubNub also enables many Internet of Things (IoT) solutions for home automation, connected cars, retail, transportation and many others.
Are you looking for the SDKs in different languages? visit our [developers page]!
PubNub creates and supports over 50 languages and development platforms with our SDKs, inluding node.js, ruby, python, Objective-C, etc, etc!
Happy hacking :-)
[Demo]: http://pubnub.github.io/super-simple-chat/index.html
[pubnub]: http://www.pubnub.com/docs/javascript/javascript-sdk.html
[dev]: http://www.pubnub.com/developers/

BIN
Samples/PubNub/assets/.DS_Store vendored Normal file

Binary file not shown.

BIN
Samples/PubNub/assets/skipop.ttf Executable file

Binary file not shown.

BIN
Samples/PubNub/css/.DS_Store vendored Normal file

Binary file not shown.

View File

@@ -0,0 +1,173 @@
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
html {
height: 100%;
}
body {
padding: 0;
margin: 0;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Roboto Light", "Segoe UI Web Light", "Segoe UI Light", "Segoe UI Web Regular", "Segoe UI", Helvetica, Arial, sans-serif;
background: #f9f9f9;
color: #333;
}
header {
height: 58px;
background: #fff;
border-top: 4px solid #ce1126;
border-bottom-color: #eee;
}
h1, h2, h3 {
margin: 0;
text-rendering: optimizeLegibility;
}
h1 {
font-size: 2em;
line-height: 58px;
text-align: center;
font-weight: normal;
}
input[type=text], button {
-webkit-appearance: none;
-moz-appearance: none;
border: 1px solid #ddd;
color: #333;
font-size: 1em;
padding: .7em 1em;
margin-bottom: 1em;
display: block;
}
button {
background: #e6e6e6;
text-shadow: 0 1px 0 #f3f3f3;
margin: .5em 0 2em 0;
width: 100%;
}
#chat {
height: 75px;
position: relative;
}
#chat i {
font-size: 75px;
position: absolute;
}
#chat input {
margin-left: 75px;
position: relative;
top: 15px;
width: calc(100% - 75px);
}
#main {
margin: 2em 1em 1em;
}
#main > p {
color: #ce1126;
}
#output p {
font-size: 1.2em;
margin: 0.6em;
position: relative;
}
#output i {
font-size: 40px;
position: absolute;
top: -5px;
}
#output span {
position: relative;
margin-left: 40px;
}
/* Font Icons */
@font-face {
font-family: 'skipop';
src:url('../assets/skipop.ttf') format('opentype');
font-weight: normal;
font-style: normal;
}
[class^="face"], [class*=" face"] {
font-family: 'skipop';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.face-1:before {
content: "\2a";
}
.face-2:before {
content: "\34";
}
.face-3:before {
content: "\36";
}
.face-4:before {
content: "\3b";
}
.face-5:before {
content: "\3e";
}
.face-6:before {
content: "\45";
}
.face-7:before {
content: "\47";
}
.face-8:before {
content: "\4d";
}
.face-9:before {
content: "\52";
}
.face-10:before {
content: "\59";
}
.face-11:before {
content: "\63";
}
.face-12:before {
content: "\6f";
}
.face-13:before {
content: "\7a";
}
.color-1 {
color: #393b79;
}
.color-2 {
color: #6b6ecf;
}
.color-3 {
color: #637939;
}
.color-4 {
color: #b5cf6b;
}
.color-5 {
color: #8c6d31;
}
.color-6 {
color: #e7ba52;
}
.color-7 {
color: #843c39;
}
.color-8 {
color: #d6616b;
}
.color-9 {
color: #7b4173;
}
.color-10 {
color: #ce6dbd;
}

35
Samples/PubNub/index.html Normal file
View File

@@ -0,0 +1,35 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>PubNub JS API Example : Simple Chat</title>
<meta name="description" content="Simple Chat Room with PubNub API">
<meta name="author" content="Tomomi Imura @girlie_mac">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<h1>PubNub Super Simple Chat</h1>
</header>
<section id="main" role="main">
<div id="chat">
<i id="avatar" class="face12"></i><input type="text" id="input" placeholder="Type your message...">
</div>
<button id="button">Send Message</button>
<div id="output"></div>
</section>
<footer></footer>
<!-- PubNub CDN -->
<script src="http://cdn.pubnub.com/pubnub.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>

BIN
Samples/PubNub/js/.DS_Store vendored Normal file

Binary file not shown.

61
Samples/PubNub/js/app.js Normal file
View File

@@ -0,0 +1,61 @@
/* *
* PubNub Example: Super Simple Chat Room Demo
* For more JavaScript and more SDKs, visit http://www.pubnub.com/developers/
*/
(function() {
var output = document.getElementById('output');
var input = document.getElementById('input');
var button = document.getElementById('button');
var avatar = document.getElementById('avatar');
var channel = 'mchat';
// Assign a random avatar (using font icons. see CSS file) in random color
avatar.className = 'face-' + ((Math.random() * 13 + 1) >>> 0) + ' color-' + ((Math.random() * 10 + 1) >>> 0);
/* *
* PubNub Initialization
* Sign up and get your own subscribe and publish keys at pubnub.com :-)
*/
var p = PUBNUB.init({
subscribe_key: 'demo',
publish_key: 'demo'
});
/* *
* Receiving messages with PubNub Subscribe API
*/
p.subscribe({
channel : channel,
callback : function(m) {
output.innerHTML = '<p><i class="' + m.avatar + '"></i><span>' + m.text.replace( /[<>]/ig, '' ) + '</span></p>' + output.innerHTML;
}
});
/* *
* Sending a message with PubNub Publish API
*/
function publish() {
p.publish({
channel : channel,
message : {
avatar: avatar.className,
text: input.value
},
callback : function() {
input.value = '';
}
});
}
// Press Return or click the Send button to submit
input.addEventListener('keyup', function(e) {
(e.keyCode || e.charCode) === 13 && publish();
}, false);
button.addEventListener('click', publish, false);
})();