Real-Time Chat Application Using Pusher

WebSockets is an advanced technology that makes it possible to open an interactive communication session between the user’s browser and a server. With this API, you can send messages to a server and receive event-driven responses without having to poll the server for a reply. In this tutorial we are going to create a simple chat application using Pusher. Pusher is a simple hosted API for quickly, easily and securely adding realtime bi-directional functionality via WebSockets to web and mobile apps, or any other Internet connected device.

Browser Support

• Old browsers do not support WebSockets, you need latest browser that supports HTML5 WebSocket features, Please see caniuse.com to find-out all WebSocket supported browsers.

Scripts we need for our Chat Application:

• jQuery
• Pusher
• Bootstrap JS and CSS (For the UI)
• Bootbox (For our alert box)
• Custom Styles

Create a Pusher Account

• Step 1. Create an account at www.pusher.com
• Step 2. Login to your pusher account then create an App, name it anything you want.
• Step 3. After you have successfully created your app – the following will be generated: app_id, key, and secret.
• Step 4. Go over the codes in this tutorial and replace the following: ‘your_app_id’, ‘your_app_key’, ‘your_app_secret’ with your app_id, key, and secret.
• Step 5. Test the chat application in your server or local machine. Use 2 different browsers for the testing.

The Tutorial

Checkout the tutorial on this link

Demo

Checkout the demo from this link