Chat app with Ionic 3 & Firebase – Ep. 8 – One2One Chat

Hi Friends,

Hope you are all well. This is part – 8 of the Chat app series. In this post we’ll continue from where we left off and see how to create a provision to chat among two users.

The screencast for this part.

The code for this post is available –  here

The code for this entire series is available – here

Let’s begin.

I presume you have already grabbed a copy of the existing repo and you have read the previous parts as well.

First let’s create a provider for chat and a page using the below commands.

Now create a page where the user can view the chats and send messages as well.

Now open up chat.ts and add the below function

We are initializing the person with whom we want to chat and then navigating to the newly created page.

Now open up chat.ts inside the providers directory and add a method as shown below.

Don’t forget to declare buddy. The chat.ts file would look like this now.

Now go to buddychat.ts file and add the code for sending a message.

We’ll see what this does in a minute. Now notice that there is a addnewmessage() function. Let’s go ahead and add that in chat Provider.

Open up chats.ts and add the below code into it

Let’s break this down.

Upon function call, we are first storing the message in a node under the user’s uid. (Note that I am using the receiver’s uid as key).

Then we are also storing the message in a node under the receiver’s uid. (Note that this time I am using the sender’s uid as key).

The data itself has 3 keys; namely sentby, message, timestamp. Sentby is helpful in the front-end (we’ll see later).

Now let’s write a method for retrieving all the messages as well.

Add the below function as well in chat.ts file.

Here we are just pulling the nodes under the child node of the person whom we wish to chat with.

How.. ?

Remember we first initialized the person whose name was tapped on by the user right..? So that person’s uid corresponds to this.buddy.uid.

Now I will have a copy of all messages sent/received by all the people whom I have ever chat with in the buddy chats collection under my uid. So with the help of this.buddy.uid I can get all the chats corresponding to that particular person whom I tapped on right..?

NoSQL data modelling might seem tough, but if you know how to play around with the keys and if you know a little about indexing, you will find that you can do a lot of stuff in a easier way. (That’s why it grew so popular in a short span of time.. Duh!)

The final chat.ts file would look as shown below.

Now open up buddychat.ts and add code for scrolling and loading new messages whenever they appear.. (See the last line of the above code.. I am publishing an event whenever new messages appear)

I have simply written subscribed to an event and then getting all the messages from the provider (buddymessages).

The scrollto() method is to scroll to the bottom of the chat window so that the user always sees the latest messages.

Open up buddychat.html and add the below code.

Let’s add some styling. Open up buddychat.scss and add the below code.

Let’s not dive into html and css since they are pretty much easy to follow. Let’s run this app now.

If everything goes fine, you would be able to chat with any user on your friend list and you would also be able to see their responses in real-time.

 

Screenshot_2017-08-04-03-15-24

 

In our next part let’s see how to send images in chats.

Hope this helped you guys. If you found this helpful, kindly share it with someone else and help them too.

If you would like to support me and keep the forthcoming videos free for everyone kindly consider donating a couple of bucks by clicking here – Donate.

Thanks for reading guys. Peace.. :)

Liked it? Take a second to support admin on Patreon!
  • arsene

    thanks for the post, help me how can i send to user email? not to uid?

  • Web Expert

    Hi, Thanks for posting this article.
    This is really great.
    Could you let me know when you will post Group chat feature?

    Thank you

    • To understand group chat, one must understand the concept of mesh networks. The next episode will be on sending images in chat.. After that a video on mesh networks. After that creating groups, adding members to groups, sending messages.. and so on.. (In short, there will be atleast 4 more episodes)

  • Generalzod

    i just figured out a bug u can add a user twise and it will apear in the friends list double

  • Hicham shadow

    thank you Mr raja for this article.

    I have a question : how can we push last message received from buddychat page to chat page ?

    thank you

  • Vajid Ali

    This is really great. in this article have not delete message option