Create Realtime Chat with Chatview and Socket.io

In this tutorial we will learn how to create a real-time chat with the ChatView and Socket.Io components in a very simple way.

You can see a live example of this on our YouTube video:

The first that we need to do is to declare all the needed vars.

variables

These will be the variables we will need, a list of ids, a list of users and a username.

Once the variables are declared we will proceed to program what we want to happen when starting the App.

What we will do when starting the app will be to configure the colors of the ChatView, connect our Socket.Io component to our Socket.Io server by entering its url.

Finally we will show a dialog in which the user has to enter his username.

When the user enters his name, in the event to capture this action we will indicate to Socket.Io that hears the event announcements (It can be any other name), we will also set the username variable to the username that has been entered in the dialog.

After this we will program what we want to do when the send message button is pressed.

sendMessage

What we are doing in the image is to emit an event to our server with the name announcements and with a value that in this case is the username and the message with a semicolon in between to separate the values ​​and be able to parse it later more easily.

We have already indicated that we want it to happen when we press the send message button, now we are going to create a procedure that will help us add a message to the ChatView.

What we are doing in the image is to check if the message is ours or not to know what type of message we are going to add to the ChatView, to check it we compare the value of the username variable with the value of the message list, which we will receive by parameter by doing a split at ; and selecting index 1.

In case of being equal it means that the message is ours, therefore we will add a message on the right side of the ChatView and to get the message we will select from the message list by doing Split at ; and obtaining the value of index 2.

If on the contrary the message is not ours we will do the same as in the previous case, but adding the message to the left.

Now we reach the most important point, we are going to capture the events that are received by Socket.Io, here we will add values ​​to the list of ids and call the procedure we have created previously to add messages to the ChatView.

What we are doing in the picture is the following:

  • First we check if the name of the event received is announcements

  • We check if it is the first message sent by the user from whom we received the message, for this we check if the user exists in the list of users for this purpose we perform a Split of the value of the event emitted and we obtain the value of index 1.

  • If it is not the first message of said user we call the procedure of adding message and we pass the id, to obtain the id we select the list of ids and in the index we will obtain the index of the list of users in which we will make a Split the value of the event at ; and we will select the index 1. We will also pass to the procedure the value of the event.

  • In case of being the first message of said user we initialize a local variable called id, whose value will be a random number, after this we will create a user in the ChatView using said id and obtaining the username of the event value by performing a Split by ; and selected index 1, then what we will do will be to add the username to the list of users in the same way that we have obtained it previously, we will also add to the list of ids, the id that we have generated and finally we will call the procedure of adding message and we will pass the id and the value of the event.

  • At this point we already have the chat working, but if we want we can do some more things, for example, allow the user to delete messages, for this we will do the following.

deleteMessage

As you can see in the image, we will simply use the OnMessageLongClick event to capture when a user presses a message, this event will return the id of the message that has been pressed, and we will simply use the Delete Message method of ChatView and pass it the id.

Finally we will make when the user clicks on the profile picture the image is changed, in this case it will be changed automatically, but it could be done in other ways, for example, for the user to select an image from their images, and set the selected image as a profile picture, but in this case we have made it easier to simplify the example.

As we can see in the image, when we click on the image, we update the user icon with an online image, for this we indicate the user id, which we will receive in the event and we indicate the URL of the online image that we want to use.

The code used for the socket.io server is as follows, although each one can create their own since it is very simple.
To learn more about how to run this server code or develop your own click here

var app = require('express')();
var http = require('http').createServer(app);
var io = require('socket.io')(http);

app.get('/', function(req, res){
    res.send('Server running')
});

io.on('connection', function(socket){

    console.log('User connected');

    socket.on('announcements', function (msg) {
        console.log('New message: '+ msg);
        io.emit('announcements', msg)
    });

    socket.on('profiles', function (msg) {
        console.log('New profile: '+ msg);
        io.emit('profiles', msg)
    });

    socket.on('disconnect', function(){
        console.log('User disconnected');
    });
});

http.listen(3000, function(){
    console.log('Listening on *:3000');
});

And here is the AIA example:

chatexample.aia (51,1 KB)

5 Likes

I can make user list and online offline status.