Discuss

Building a Real Time Chat Application

On this page

Intro

Thanks to the WebSockets and NodeJS integration in Wappler you can build real-time apps. One example of what you can build is a real-time chat app.

Sockets provide a real-time bi-directional communication channel between a client and a server. This means that the server can push messages to clients. Whenever an event occurs, the idea is that the server will get it and push it to the concerned connected clients.

Screenshot_2|638x500

In this example we will show you a simple chat app, using Data Store to store the chat history locally in your browser local storage.

Server Side

First we need to setup the server-side part. Open the Server Connect panel and right click Sockets:

Screenshot_1|690x430

Add Socket Action:

Screenshot_2|690x430

This socket action will be used as our chat message template, so we call it chat_message:

Screenshot_3|690x430

Open Input and right click $_PARAM:

Screenshot_4|690x430

Add two variables - username and message. These are the input variables for the message which will be emitted:

Screenshot_7|690x430

Then right click Steps:

Screenshot_8|690x430

Open Sockets and select Emit:

Screenshot_9|690x430

Open the Type dropdown and select the chat_message socket action we just created:

Screenshot_10|690x430

Click the dynamic data picker for the username input parameter:

Screenshot_100|690x428

And select username under $_PARAM:

Screenshot_101|690x428

Do the same for the message input parameter:

Screenshot_102|690x428

Select message under $_PARAM:

Screenshot_103|690x428

Save your Socket Action and you are done with the server side part:

Screenshot_104|690x428

Client Side

First, let's create the page for our chat app.

Creating the Chat Page

Open the Pages Manager:

Screenshot_12|690x430

Select Pages and click the Create Page button:

Screenshot_13|690x430

Add a name for your page, select a layout if you are using any and click Save:

Screenshot_14|690x430

Now you can close the Pages Manager panel. Now as out page has been created, let's add the required App Connect components to it. In this example we will use the Data Store component to store the chat messages in the local storage of the browser.

Data Store Component

Open the App Connect panel, select App and add click the Add New button:

Screenshot_15|690x430

Open Data and select Data Store:

Screenshot_16|690x430

Add a name for the Data Store component and click the Define Data Store Schema button:

Screenshot_17|690x430

Right click the Data Store name and add two variables:

Screenshot_19|690x430

We want to store the user name and message, so we call them chat_user and chat_message:

Screenshot_20|690x430

Sockets Component

Select App and click the Add New button:

Screenshot_21|690x430

Open Sockets and select the Socket component:

Screenshot_22|690x430

Add new dynamic event:

Screenshot_23|690x430

Under Sockets select Message:

Screenshot_24|690x430

Now we are going to set up what happens, when a new message has been received. Open the Message Type menu and select the Socket Action (or message template) called chat_message which we created earlier:

Screenshot_25|690x430

Click the dynamic action picker icon:

Screenshot_26|690x430

On new message, we want to add it to the Data Store. So, select Insert Record under the Data Store component:

Screenshot_27|690x430

And select the data, which needs to be inserted for chat_user:

Screenshot_28|690x430

We select username under Message Event:

Screenshot_29|690x430

We do the same for the chat_message:

Screenshot_30|690x430

Select message under Message Event:

Screenshot_31|690x430

Click Select when you are done:

Screenshot_32|690x430

Now the user name and message text will be stored in the Data Store, when a new message is received by the Sockets Component.

Session Storage

We will store the username in a session variable, so that the user enters his username just once per each chat session. Right Click App:

Screenshot_33|690x430

Open State Management and select Session Storage Manager:

Screenshot_34|690x430

Click the Define Session Storage Items button:

Screenshot_35|690x430

Right click the Session Storage and Add Variable:

Screenshot_37|690x430

We call this variable username as it will store the username, which your user entered. Click Save:

Screenshot_38|690x430

Page Layout

We've set up all the required components on the page, now let's build the page layout. It will consist of two parts - an input where the users enter their username and another section where the user can send messages and view the other users' messages.

Let's start by adding a container on the page. Click the Add New button:

Screenshot_39|690x430

And select Container:

Screenshot_40|690x430

Then select the Header and two columns preset for the container layout:

Screenshot_41|690x430

Username

The top row is where the username input will be placed. So click add new button in the column there: Screenshot_42|690x430

And add a text input:

Screenshot_43|690x430

Add an ID and name for it and and customize it, as per your needs. The styling of the input is not related to how the chat app will work:

Screenshot_44|690x430

Then with the input selected click the Add After button:

Screenshot_45|690x430

Add a button:

Screenshot_46|690x430

This button will be used to enter the chat, after the username is entered. I.e. it will add the entered username to the session storage. Style it as per your needs:

Screenshot_47|690x430

Then add new Dynamic Event:

Screenshot_48|690x430

Select Mouse > Click:

Screenshot_49|690x430

And click the dynamic action picker icon:

Screenshot_50|690x430

Select Set under the Session Storage component:

Screenshot_51|690x430

Choose a dynamic value for the username session variable:

Screenshot_52|690x430

This should be the username input value:

Screenshot_53|690x430

Click Select:

Screenshot_54|690x430

Message Input

The chat section of our app consists of two columns - one for the message input and another one which lists the chat messages.

Click the add new element button in the left column:

Screenshot_55|690x430

Add a textarea:

Screenshot_56|690x430

Add a name and ID for it:

Screenshot_57|690x430

With the textarea still selected, click the add after button:

Screenshot_58|690x430

And add a button:

Screenshot_59|690x430

Style it as per your needs. This button will be used to send the message you enter in the textarea:

Screenshot_60|690x430

Add new dynamic event:

Screenshot_61|690x430

Select Mouse > Click:

Screenshot_62|690x430

And click the dynamic action picker icon:

Screenshot_63|690x430

Select and add Emit under the Socket component:

Screenshot_64|690x430

Open the Type menu and select the chat_message message template:

Screenshot_65|690x430

Now let's select the dynamic data, which needs to be sent with the Emit action. Click the dynamic data picker for the username:

Screenshot_66|690x430

The username will be stored in a session variable, so we select the session variable where we are storing it:

Screenshot_67|690x430

We do the same for the message:

Screenshot_68|690x430

This should be the value of the message text area:

Screenshot_69|690x430

You can clear the textarea value, after the message has been sent. Under textarea select set value and add it to the actions list:

Screenshot_70|690x430

Just enter an emtpy space there and click select:

Screenshot_71|690x430

Chat Messages

Now, let's setup the repeat region, which will display the chat messages. Click the add new element button in the right column:

Screenshot_72|690x428

Add a row:

Screenshot_73|690x428

Then add a column in this row:

Screenshot_75|690x428

Set the column size to 12:

Screenshot_76|690x428

This column is the message body, we need to show the username and message here. So let's add them:

Screenshot_77|690x428

For the username we use a Title:

Screenshot_78|690x428

And set it to Heading 6:

Screenshot_79|690x428

Add another element after the heading:

Screenshot_80|690x428

And select paragraph, this will be the message text:

Screenshot_81|690x428

We set its style to Lead:

Screenshot_82|690x428

Then select the row, wrapping our message body column. Click Make Repeat children:

Screenshot_83|690x428

And select an expression for the repeat:

Screenshot_84|690x428

This should be the data element of the Data Store component:

Screenshot_85|690x428

Turn the App Connect mode off in order to be able to bind the data inside the repeat region:

Screenshot_86|690x428

Double click the title and click the dynamic data icon:

Screenshot_87|690x428

Select the chat_user binding from the repeat region:

Screenshot_88|690x428

We do the same for the message paragraph:

Screenshot_89|690x428

Select the chat_message binding from the repeat region:

Screenshot_90|690x428

Our page layout is done:

Screenshot_91|690x428

Conditional Regions

We only want to show the username input when the user has not entered a username yet and also we want to show the chat area after the user entered a username. In order to do this we will use conditional regions.

Select the row wrapping the username input and click Make Conditional Region:

Screenshot_92|690x428

Click the Dynamic Data Picker for the condition:

Screenshot_93|690x428

We want to show the username input only when the session variable doesn't contain any username. So we select the session variable, where we store our username:

Screenshot_94|690x428

Then select Code and add an exclamation mark ! in front of the expression. Click Select:

Screenshot_95|690x428

Select the row wrapping the chat area and click Make Conditional Region:

Screenshot_96|690x428

Click the Dynamic Data Picker for the condition:

Screenshot_97|690x428

We want to show the username input only when the session variable contains a username. So we select the session variable, where we store our username and click Select:

Screenshot_98|690x428

And we are done, so save your page:

Screenshot_99|690x428

Result

You can see the result in our browser below. The user enters a username and then he is taken to the chat area, where he can send messages to the other clients:

chat-preview|690x349

Note: This is a brief example of a real-time chat app, which we believe explains the basics of how the things work. Feel free to extend this if you need a more complex solution.