5
How to build a chat app in 10 lines of code

Build a realtime chat app in 10 lines of code

  • Upload
    pubnub

  • View
    114

  • Download
    0

Embed Size (px)

DESCRIPTION

This tutorial walks you through how to build a realtime chat app in 10 lines of code. The simple chat application can easily be embedded into any website with 10 lines of JavaScript. Full blog post (with demo and copy and pastable code): http://www.pubnub.com/developers/demos/10chat/

Citation preview

Page 1: Build a realtime chat app in 10 lines of code

How to build a chat app in

10 lines of code

Page 2: Build a realtime chat app in 10 lines of code

With PubNub, you can build real-time chat in 10 lines of JavaScript. This is the quickest way to write a realtime chat application on web or mobile. !PubNub’s framework dramatically reduces your coding when building chat based collaboration apps. Tasks like sending and receiving data take only one function call. !And your code instantly updates in web and mobiles apps, for rapid testing. The network infrastructure and scaling is taken care of for you so you spend time building your app, not infrastructure.

Page 3: Build a realtime chat app in 10 lines of code

Step 1: Copy and paste code into favorite text editor !

Copy and paste the code below into your favorite text editor and save as .html.

Enter Chat and press enter<div><input id=input placeholder=you-chat-here /></div>!Chat Output<div id=box></div>!<script src=http://cdn.pubnub.com/pubnub.min.js></script><script>(function(){var box = PUBNUB.$('box'), input = PUBNUB.$('input'), channel = 'chat';PUBNUB.subscribe({ channel : channel, callback : 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='') })} )})()</script>

Next, we’ll show you how to “publish” and “subscribe”

Page 4: Build a realtime chat app in 10 lines of code

Step 2: Publish Functionality !

The basic send “publish” functionality with sending a message for simple chat apps:

// Send a messagePUBNUB.publish({ channel : 'chat', message : "hello!" })

Step 3: Subscribe Functionality !

The basic send “publish” functionality with sending a message for simple chat apps:

// Receive messagesPUBNUB.subscribe({ channel : 'chat', message : fun })!

And that’s it! You have yourself a live working chat application in just 10 lines of code. Check out the full demo on the next slide.

Page 5: Build a realtime chat app in 10 lines of code

10 Lines of Code Chat Demo !

Click here to check out a live working demo: http://www.pubnub.com/blog/build-real-time-chat-10-lines-code/

The PubNub JavaScript SDK !

Check out the documentation for our PubNub JavaScript SDK. Additionally, we’ve created a more advanced chatroom demo, which can be found here. And now you can equip your chat communication source code with high-security options using Self Destructing Chat: Key Exchange and Self Destructing Messages with Public Key Exchange using RSA Asymmetric Cryptography for chat messages.