Discuss

WebSockets - Realtime Messaging

On this page

Intro

Thanks to the NodeJS and Socket.IO integration in Wappler now you can build apps which use real-time messaging, so you can send messages to all users, or only to specific users.

Messaging Basics

There are a few different options available for sending events between the server and the client - emit, broadcast or direct message.

Emit - sends to all the clients including the sender. Broadcast - sends to all clients excluding the sender. Direct Message - sends to specific client.

Socket Actions

You can find the Socket Actions under Sockets in Server Connect panel. There are two predefined Socket Actions - Connect and Disconnect. They run automatically for every client which connects to the server or disconnects from it:

Screenshot_1|690x432

So these two actions are really useful, when you want to send some messages when the users connect or disconnect from the server.

Emit Messages

We will show you a simple example showing how to send a message to all the connected clients, when a new client joins the server.

Server Side

First, we need to define a message (think of it like a message template) which will be sent to the clients, when a new client joins. Right click Sockets in the Server Connect panel and add new Socket Action:

Screenshot_3|690x432

We call it message. We need to define input data for it, so right click $_PARAM under input for this Socket Action:

Screenshot_4|690x432

And add new variable:

Screenshot_5|690x432

We call it message_text as this will be the text of the message we want to send to the clients:

Screenshot_6|690x432

Save your Socket Action:

Screenshot_7|690x432

Select the Connect Socket Action (1) and right click its Steps (2):

Screenshot_8|690x432

Open the Sockets category and select Emit:

Screenshot_9|690x432

You can find the emit step properties in the properties panel:

Screenshot_10|690x432

Select the message type you want to send:

Screenshot_11|690x432

We select the message which we created a few steps above:

Screenshot_1|690x432

And enter the text you want to send, in the input parameter field:

Screenshot_12|690x432

We enter A new user has joined! and click Save:

Screenshot_13|690x432

Client Side

Close the Server Connect panel, load your page and open the App Connect Panel. There are many ways to show a message to the clients, but in our example we will show you how to do this with the Toasts component. So right click App:

Screenshot_14|690x432

Open Components and add Toasts:

Screenshot_15|690x432

Then right click App again:

Screenshot_16|690x432

Open Sockets and select the Socket component:

Screenshot_17|690x432

Add new dynamic event:

Screenshot_18|690x432

Select Sockets > Message. This event triggers when a new message is received. In our example when a user connects, the Emit Message will trigger it:

Screenshot_19|690x432

Select the message type, so that the dynamic event knows where to gets its data from:

Screenshot_20|690x432

Then click the dynamic action picker button:

Screenshot_21|690x432

We want to show a Toast message, when the message is received. So select Toasts > Show:

Screenshot_22|690x432

And click the dynamic data picker to select a message to be displayed inside the Toast:

Screenshot_23|690x432

Under the Message Event you will see the input parameter message_text we created in the Socket Action called message. Select it:

Screenshot_24|690x432

Click Select:

Screenshot_25|690x432 Save your page, and you are done. Previewing the results in our browser, shows that a message is displayed to all the clients connected to the server including the sender (or the one who joins the server):

socket-emit|673x500

Broadcast Message

Broadcast works the same way as Emit, the only different is that it sends a message to all the clients except for the one which sends it (or the one that joined the server):

Screenshot_1|690x432

You can set up the Broadcast exactly the same as Emit - the properties and options are the same, so we won't show this step by step again:

Screenshot_2|690x432

Previewing the results in our browser, shows that a message is displayed to all the clients connected to the server excluding the sender (or the one that joins the server):

socket-broadcast|673x500

Direct Message

Direct message allows you to send a message to a specific user. In our example we will extend what we've already done until now by sending a direct message to the client who joins our server.

Identifying Clients

In order to send a direct message to the client we need to identify it. There is a special Socket Identify step, which returns the connected client id.

Select the Connect action, which we used to Emit messages:

Screenshot_2|690x432

Right click the Emit step and select Sockets > Socket Identify:

Screenshot_3|690x432

Sending a Direct Message

Now as we have added the Identify step, we can send a message to this specific client. Right click the Socket Identify step:

Screenshot_4|690x432

Open Sockets and select Direct Message:

Screenshot_5|690x432

Click the dynamic data picker to select the Socket ID:

Screenshot_6|690x432

And select the Socket Identify step which we added already:

Screenshot_7|690x432

Then select the Message Type from the dropdown:

Screenshot_8|690x432

We select the message Socket Action, which we created in the first part of this tutorial. Then we add the text for the Direct Message, which will be shown to the client when joining the server:

Screenshot_9|690x432

Click Save and you are done:

Screenshot_10|690x432

Previewing the results in our browser, shows that the Emit message is displayed to all the clients connected to the server, but the Direct Message is displayed only to the client which joins the server:

socket-personal-msg|673x500