Chat app with Ionic 3 & Firebase – Ep. 16 – Sending messages in groups

Hi Friends,

Hope everyone’s fine. In this episode we’ll see how to send messages in groups. We’ll also see how to send images and show time in messages.

I assume that you all have read the previous posts in the series and have a copy of the repo of what we have achieved so far.

Let’s begin.

A screencast of this post:

Code for this episode is available – here.

Code for this entire app is available – here.

Open up groupchat.html and add the below code.

We have simply added a text area in the footer along with a button, an area for showing all the messages in the group and a new button at the top for sending images.

Open up groupchat.scss and add the below css code as well.

This is for the clean chat interface that I showed you in one-to-one chatting. Let’s move on.

(There is a lot of code in this post & video guys, So in order to keep it short, I’ll move a bit quicker).

Open up groupchat.ts file and add the below code into it.

As the name suggests the first function is to add a message to the group. The scrollTo() function is to provide a smooth scrolling interface whereas the sendpicmsg() function is to send a picture message.

Open up groups.ts (inside the providers directory and add the below code.

Let’s break this down.

  1. First I am getting the owner of the group in which the message is being sent.
  2. Then I am pushing the message to the msgboard of the member.
  3. Once that is done, I am pushing the message to the msgboard of the owner as well. I have added a check for evaluating whether the owner is the sender of the message as well. In that case, I don’t post on his msgboard since it would be a duplicate.
  4. Then I am getting the list of all the members in the group, traversing to all their msgboards and pushing a copy of this message there as well.
  5. Since step 4 required multiple async calls to happen, I simply wrote them in a separate function and called the function with an instance of resolve. Once each and every call was resolved, I used a promise.all() to denote the end of all successful calls.
  6. The getgroupmsgs() function simply gets the msgboard of the logged-in user and publishes an event which denotes that the msgs are available.

Now go back to groupchat.ts file and add the below code. The final groupchat.ts file should look as shown below.

As you guessed, I am using some code to iterate through the timestamps in all the messages here and then display the suitable time in a readable format.

This is actually for just a demonstration. The good practice would be to write it as a pipe and invoke the pipe directly in the html.

I presume you would understand the flow now.

If you hadn’t understood any of the above code or explanations, I will try to say it in a simple sentence.

When you speak in a group of friends, each and everyone’s memory registers a copy of what you said along with your own memory. This is exactly what I have replicated here.

I have used a msgboard field in every group instance under each and every group member. I have simply pushed our messages under this msgboard field and then displaying them onto the screen of the group chat.

Improvements that you can try on your own.

  1. Use the ‘child_added’ event instead of value so that each and every time you add a message the entire collection doesn’t get pulled.
  2. Move the logic onto a pipe instead of hard-coding it.
  3. Write a better logic to filter out images instead of finding out all url’s and classifying them as images.

That’s it guys. Hope you enjoyed this series. If you found this helpful, kindly share it with someone and help them too.

Thanks for reading. Peace.. :)

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