In this series of tutorials we will show how to build a fully functional jQuery chat app using jQuery and Bootstrap, the most commonly used framework in the world.

jQuery Chat App Overview

Our jQuery chat app will have an open channel (public chat room) which users will join anonymously. It will support sending/receiving messages in real time. Apart from this it will include features such as typing indicator, read receipt, media sharing and participant list.

Before we start, you can check out the live demo of our jQuery chat app below:

 

Installing ChatCamp SDK

Let’s us start by adding ChatCamp JavaScript SDK to our app. This can be either done by including SDK manually from our CDN with the help of script tag.

Or we may install it using a package manager like npm

We will use the first method here. Add that script tag code to your index.html as shown below:

Setup Open Channel

Create an open channel by going to ChatCamp Dashboard as shown below:

jQuery Chat App - Create Open Channel

An open channel allows user to connect to the channel without any prior invitation. It is mean to be used for public conversation where any number of users can participate.

 

Initialize ChatCamp JavaScript SDK

After creating open channel, let’s create a JS file called chat.js. It will contain all our jQuery chat JavaScript code. Let’s start by initializing chat SDK:

 

We initialize ChatCamp Web SDK by creating a new instance of ChatCamp class and passing our ChatCamp application ID to it. This app ID may be retrieved from ChatCamp Dashboard. Next we create a random user ID and user display name. Finally we use connect() function for establishing chat connection and then we use updateUserDisplayName() to set the name of the user in chat.

 

jQuery Chat App Layout

Next we need to create layout for our jQuery chat app with the help of Bootstrap framework. We will add one header at the top. It will be  followed by chat room content in the center. We will also have a footer section which will have chat input section. Let’s start by adding the following HTML code inside chat-app div.

So the chat app contains three sections namely header, history and message. The header section shows open channel information including name and participants. The history section shows chat messages of the open channel. The messages are received and updated in real time. Finally the footer section has input box to send the message.

 

Join the Open Channel

Next we will stitch the above template with our chat SDK functions. Let’s start by joining the open channel once the chat has connected. You need to join open channel before being able to send/receive messages. We will do so with the help of join() as shown below:

 

Retrieve Chat History of the Open Channel

Now let’s get the chat history by using createPreviousMessageListQuery() function of the OpenChannel class. This will return an instance of PreviousMessageListQuery class. It contains a function called load() which we will use to fetch the chat messages of our open channel.

Here we request 50 messages from the server and once the chat messages are retrieved we loop through them and add them to our jQuery chat app and finally we move scroll to the bottom.

 

Listen for New Chat Messages in the Open Channel

Next let’s add the functionality to receive a message in real time from the open channel. ChannelListener class allows us to receive and handle events in real time from ChatCamp backend. Let’s implement event listener as shown below:

The onOpenChannelMessageReceived callback method is fired whenever a new message is added to the open channel. We register our instance of ChannelListener with the help of addChannelListener() function.

 

Send Chat Message to the Open Channel

Finally let’s implement the send message functionality. The sendMessage() function of OpenChannel class allows us to send text message to the open channel.

 

Conclusion

That’s it for now! We will enhance this jQuery chat app in the next part of our tutorial. You may check out the live demo here – jQuery Chat App Demo. Also, the code is available on Github at this link – https://github.com/ChatCamp/ChatCamp-JavaScript-Examples/tree/master/jquery-chat-example.

 

Leave a Reply

Your email address will not be published. Required fields are marked *