Build Real-time Chat Apps in 10 Lines of Code

6 min read Stephen Blum on Mar 19, 2011

Waving Hand

Good News! We’ve launched an all new Chat Resource Center.

The SDK or APIs in this tutorial may be out of date. We recommend checking out our new Chat Resource Center, which includes overviews, tutorials, and design patterns for building and deploying mobile and web chat.

Take me to the Chat Resource Center →

With PubNub, you can build real-time chat in 10 lines of JavaScript. This is the quickest way to write a real-time 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.

Chat Input ( try it on your mobile device too! ):

Chat Outbox:

Here’s the code ( the JavaScript is 10 lines )

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

The basic receive “subscribe” functionality to receive messages in a simple chat app:

For more information on our JavaScript SDK, check out the GitHub Repository here. 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.

Build Real-time Chat Apps Fast and Cut Development Time

PubNub’s framework dramatically reduces your coding. 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.

Develop Real-time Chat Across Platforms

PubNub has the only complete solution for developing across platforms and OS versions.You can write once and build Web, iOS and Android Apps. PubNub will automatically broker your connections from web to phones to tablets to everywhere.

How Chat with PubNub Works

PubNub is a global Data Stream Network that makes it easy to develop and deploy real-time mobile and web apps, using just two functions (Publish and Subscribe) to pass data back and forth in under 1/10 second. These functions are available free in PubNub’s Real-time Software Development Resources, Tutorials & SDKs for over 50 programming languages and frameworks. These simple APIs push messages onto the PubNub Network, which has 14 Points of Presence around the world for low latency and reliable connectivity everywhere. Since PubNub works on just about every conceivable device, it’s now possible to build powerful one-to-one and many-to-many chat applications that work on every device, everywhere in the world.

PubNub is designed to make real-time mobile and web apps easier to build with SDKs to pass data back and forth using JavaScript and other mainstream languages.

PubNub’s Global RPC Network manages XHR cross domain routing, serialization and parsing so that you don’t have to deal with AJAX. It’s built using JavaScript extended with every optimization under the sun. PubNub creates SDKs with publish (send) and subscribe (receive) functions. Messages published are automatically synced in real time with clients subscribed. PubNub offers an abstraction layer to make calling remote functions very simple without worrying about ports or sockets. It is a higher-level interface for making network programming easy.

Chat Security

PubNub offers many optional layers of security giving you the easy-to-use tools necessary to deploy an encrypted chat solution that incorporates powerful features like non-repudiation and secure data archival for audit purposes, where needed. PubNub also provides a plug-in replacement for Google GCM Android Cloud Messaging Notifications and Apple APNS Push Notifications, allowing you to “wake-up” a smartphone with a secure message without leveraging unsecured Apple and Google APIs.

PubNub’s secure features for chat include:

  • Built-in AES256 encryption libraries, so chat messages are encrypted at the source. AES keys are not generated or kept by PubNub, so the data is only ever visible by the devices which contain the AES keys.
  • SSL encryption to ensure the message envelope is encrypted to/from the PubNub Data Stream Network.
  • Access Manager allowing fine-grain read/write privileges on every chat “channel”, giving you the simultaneous ability to have secured one-to-one chat and unsecured group chat sessions within the same app.
  • Ability to dynamically create random chat “channels”, ensuring the anonymity of users and their locations, even when they are in a private chat together. The user’s IP address and other identifying information is never exposed.

Chat Presence Detection & Participant List using Presence

A common question is “who’s listening in my chat rooms“? Most real-time apps want to show their end-users who else is there (i.e. subscribing) to a channel. This functionality is a common requirement in chat apps (think about the green icon that appears next to someone’s name), as well as within game chat room lobbies and many other similar apps. Using Presence, you can instantly detect when users enter/leave your app when they disconnect from the network. Presence is easy to use: every chat channel contains an optional “presence” channel on which “connect” and “disconnect” events are sent. This provides you an easy way to display icons when a user is in a chatroom, and remove those icons as soon as a user disconnects.

Presence gives you more information that just connect/disconnect events. Presence also gives you a real-time count of the number of people in a chatroom (i.e. “subscribed to a channel”). And, with Presence, you can pass in a user ID and PubNub will show a list of all chatrooms a user is connected to. This gives you an easy-to-use way to let users “find” their friends in within an application that may contain many chatrooms, games, or collaboration spaces. This presence data is available to end-devices, as well as your servers.

Check out lots of interesting ways to use presence: Five Ways You Can Use Presence.

Chat History Storage & Playback

When a user enters a chatroom, they often want to see a list of recent chat messages that occurred there. The PubNub Storage & Playback service gives you a single API, PubNub.History(), that will load messages that have previously been typed. The PubNub Storage & Playback system is highly redundant and deployed globally, ensuring that the chat messages are resilient and reliably sync’ed in the cloud, even if there is a disruption in the connection. Learn more about chat history API options starting with JavaScript Storage & Playback for Real-time Apps.

With 5 years of development on SDKs for every device and environment, it’s now easy to deliver chat on every device imaginable, including iOS, Android, JavaScript, Blackberry, and many, many other resources and SDKs for devices needing real-time software including support for web browsers IE4+, Safari 1+, Opera, Chrome 1+, FireFox 1+ and more.

Use PubNub to Power real-time chat app