# Build Real-Time Chat, for real

**URL:** <https://forum.adalo.com/t/build-real-time-chat-for-real/21624>\
**Category:** Resources & Tutorials\
**Created:** [January 4, 2022, 10:46pm UTC](https://forum.adalo.com/t/build-real-time-chat-for-real/21624 "2022-01-04T22:46:20Z")\
**Posts on this page:** 20\
**Page:** 2

<div class="post-metadata">

**Author:** ![TKOTC](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/tkotc/32/6863_2.png) [@TKOTC](https://forum.adalo.com/u/TKOTC)\
**Post date:** [January 5, 2022, 6:03pm UTC](https://forum.adalo.com/t/build-real-time-chat-for-real/21624/21 "2022-01-05T18:03:16Z")

</div>

Well, here are some of them, but there are lots. I do have a company to run so I only get about an hour or so a day to build test and deploy components so it takes a long time to get it onto our marketplace, then there are the Adalo rules/Terms and Conditions/limitations I need to contend with.

![image](https://us1.discourse-cdn.com/flex020/uploads/adalo/original/2X/7/7ec7b7c15c029d05e61781b241842ee388be6a2f.png)  
A version control system (not a component) for Adalo projects to save, restore, and compare versions  
 ![image](https://us1.discourse-cdn.com/flex020/uploads/adalo/original/2X/0/065a128869a2bb50c2a68a5f2eab56c355faec38.png)  
The WYSIWYG editor/reader, this will eventually make it onto the marketplace when I get back around to id  
 ![image](https://us1.discourse-cdn.com/flex020/uploads/adalo/original/2X/2/2c4764d42fb2ede2771427c4a097bec34c1fdf1e.png)  
Accelerometers, Gyroscope, Compass, etc… component  
 ![image](https://us1.discourse-cdn.com/flex020/uploads/adalo/original/2X/a/affdc6bac82e916bce7112bc61a7543637d85fc3.png)  
Mapbox component instead of google maps  
 ![image](https://us1.discourse-cdn.com/flex020/uploads/adalo/original/2X/f/ff269b6ae0c97b44437f62ae71881e41299b3804.png)  
A way to get the record id of a field, mainly for external api callbacks  
 ![image](https://us1.discourse-cdn.com/flex020/uploads/adalo/original/2X/0/0f51f0699b3fb3d584b2be4738f3a303abb439ef.png)  
Geocoding components for converting lat/long to address and reverse, and some other tricks  
 ![image](https://us1.discourse-cdn.com/flex020/uploads/adalo/original/2X/c/c799495e0ef04dd9e0869dec4f4d99d7f15d6d71.png)  
A component to draw pictures  
 ![image](https://us1.discourse-cdn.com/flex020/uploads/adalo/original/2X/4/4500d757e99ab73de2f666f16601038fc5b57a3f.png)  
A component to do simple photo editing like crop and scale stuff.

---

<div class="post-metadata">

**Author:** ![njimmy10](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/njimmy10/32/23489_2.png) [@njimmy10](https://forum.adalo.com/u/njimmy10)\
**Post date:** [January 5, 2022, 6:08pm UTC](https://forum.adalo.com/t/build-real-time-chat-for-real/21624/22 "2022-01-05T18:08:45Z")

</div>

That’s amazing, good luck

---

<div class="post-metadata">

**Author:** ![Eugen](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/eugen/32/25382_2.png) [@Eugen](https://forum.adalo.com/u/Eugen)\
**Post date:** [January 5, 2022, 7:07pm UTC](https://forum.adalo.com/t/build-real-time-chat-for-real/21624/23 "2022-01-05T19:07:39Z")

</div>

Looks good anyway and keep up this ! Really a game changer for majority of Adalo Makers.

I made a simple preview to show how well the chat component works (in terms of speed)

> **[Chat](https://previewer.adalo.com/844f033e-f967-4912-8dbc-b2e677520c83)**

---

<div class="post-metadata">

**Author:** ![TKOTC](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/tkotc/32/6863_2.png) [@TKOTC](https://forum.adalo.com/u/TKOTC)\
**Post date:** [January 5, 2022, 7:17pm UTC](https://forum.adalo.com/t/build-real-time-chat-for-real/21624/24 "2022-01-05T19:17:57Z")

</div>

Awesome! Thanks for doing this!

The PragmaFlow marketplace turns 2 months old on Friday (minus being shut down for 2 weeks in between). The community response to our body of work has been overwhelmingly positive, so a big thanks to the entire community and lets see how we can make the future even brighter!

---

<div class="post-metadata">

**Author:** ![jakob](https://avatars.discourse-cdn.com/v4/letter/j/71c47a/32.png) [@jakob](https://forum.adalo.com/u/jakob)\
**Post date:** [January 5, 2022, 7:29pm UTC](https://forum.adalo.com/t/build-real-time-chat-for-real/21624/25 "2022-01-05T19:29:10Z")

</div>

Hi, I have another question to this component. Do you think it is somehow possible to send pictures with it?

---

<div class="post-metadata">

**Author:** ![njimmy10](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/njimmy10/32/23489_2.png) [@njimmy10](https://forum.adalo.com/u/njimmy10)\
**Post date:** [January 5, 2022, 7:32pm UTC](https://forum.adalo.com/t/build-real-time-chat-for-real/21624/26 "2022-01-05T19:32:12Z")

</div>

@TKOTC Are the messages encrypted on the ably end?

---

<div class="post-metadata">

**Author:** ![TKOTC](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/tkotc/32/6863_2.png) [@TKOTC](https://forum.adalo.com/u/TKOTC)\
**Post date:** [January 5, 2022, 7:45pm UTC](https://forum.adalo.com/t/build-real-time-chat-for-real/21624/27 "2022-01-05T19:45:42Z")

</div>

Tough question to answer, the sockets are TLS enabled so the messages are secured, but they are not “encrypted” messages by default, they are “encrypted” packets. Ably does not persist the data, but Ably could decrypt the message. We could add a feature to enable true encryption (when I first started the project, encrypted messages were on my mind).

Step 1: Make it work  
Step 2: Make it better  
Step 3: Repeat step 2 until you run out of time or money

> **[Encryption](https://ably.com/docs/realtime/encryption)**
>
> Encrypt message payloads with the Realtime Client Library SDK.

---

<div class="post-metadata">

**Author:** ![njimmy10](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/njimmy10/32/23489_2.png) [@njimmy10](https://forum.adalo.com/u/njimmy10)\
**Post date:** [January 5, 2022, 7:48pm UTC](https://forum.adalo.com/t/build-real-time-chat-for-real/21624/28 "2022-01-05T19:48:40Z")

</div>

My main concern is, if it’s possible to open my ably dashboard and somewhere there see the messages?

---

<div class="post-metadata">

**Author:** ![TKOTC](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/tkotc/32/6863_2.png) [@TKOTC](https://forum.adalo.com/u/TKOTC)\
**Post date:** [January 5, 2022, 7:49pm UTC](https://forum.adalo.com/t/build-real-time-chat-for-real/21624/29 "2022-01-05T19:49:10Z")

</div>

Not presently. I we could talk to Adalify to integrate their service into this component, or perhaps have some form of workflow to use the Adalo image picker to send an image in the message. I would need to add image support into the message (not too hard). I had considered adding Audio/Voice messages to the system as well.

---

<div class="post-metadata">

**Author:** ![TKOTC](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/tkotc/32/6863_2.png) [@TKOTC](https://forum.adalo.com/u/TKOTC)\
**Post date:** [January 5, 2022, 8:06pm UTC](https://forum.adalo.com/t/build-real-time-chat-for-real/21624/30 "2022-01-05T20:06:40Z")

</div>

I just spoke to Ably and the answer is possibly. In Ably you can enable persistence mode in the settings. If you did this then you would be able to read all the messages using the History API, if you do not enable persistence then you cannot.

If we enabled encrypted messages using a private key then the messages would be stored encrypted in Ably, even if persistence mode was on. So it would look like the Encryption toolkit I built a little while back.

---

<div class="post-metadata">

**Author:** ![jakob](https://avatars.discourse-cdn.com/v4/letter/j/71c47a/32.png) [@jakob](https://forum.adalo.com/u/jakob)\
**Post date:** [January 5, 2022, 8:28pm UTC](https://forum.adalo.com/t/build-real-time-chat-for-real/21624/31 "2022-01-05T20:28:28Z")

</div>

That would be a great feature 👍

---

<div class="post-metadata">

**Author:** ![njimmy10](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/njimmy10/32/23489_2.png) [@njimmy10](https://forum.adalo.com/u/njimmy10)\
**Post date:** [January 5, 2022, 8:35pm UTC](https://forum.adalo.com/t/build-real-time-chat-for-real/21624/32 "2022-01-05T20:35:56Z")

</div>

That sounds great, but i think that maybe you should add an encryption feature…

---

<div class="post-metadata">

**Author:** ![jakob](https://avatars.discourse-cdn.com/v4/letter/j/71c47a/32.png) [@jakob](https://forum.adalo.com/u/jakob)\
**Post date:** [January 5, 2022, 8:42pm UTC](https://forum.adalo.com/t/build-real-time-chat-for-real/21624/33 "2022-01-05T20:42:03Z")

</div>

With this fabulous component the chat function in my app is nearly finished. There is one issue left. So does anybody know if it’s somehow possible to implement a “new messages counter” in a group chat? I’d need a number property for every member, because every group member has a different amount of new messages, but I don\*t know how many members a group will have, so it’s difficult to implement isn’t it?

---

<div class="post-metadata">

**Author:** ![TKOTC](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/tkotc/32/6863_2.png) [@TKOTC](https://forum.adalo.com/u/TKOTC)\
**Post date:** [January 5, 2022, 10:58pm UTC](https://forum.adalo.com/t/build-real-time-chat-for-real/21624/34 "2022-01-05T22:58:09Z")

</div>

I am sure there are many solutions to the unread message problem. Here is how I would solve it. It is not too elegant, but it will do the job for most cases

Essentially we store the last time a user visited the chat by using a page action to update when the user visited the screen, and when the user left the screen (using the back button). Then we add a count of messages that were created after the user visited the screen. Using it this way you might have some times where the unread message count might be wrong because of timing, but it will correct itself if they open the window. Doing it this way, every user in a group of 5 users will have their own last visited time, so their unread message count would be unique to them.

Something like this  
https://player.vimeo.com/video/662784830?h=f9bae87ed4&app_id=122963

I also forgot to show that on the Count text field in the conversation list you need to turn on auto refresh to keep the numbers updating as people are messaging without you in the chat

 ![image](https://us1.discourse-cdn.com/flex020/uploads/adalo/original/2X/d/de376f62a068a7efa82d4d902cc87756357dd745.png)

---

<div class="post-metadata">

**Author:** ![TKOTC](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/tkotc/32/6863_2.png) [@TKOTC](https://forum.adalo.com/u/TKOTC)\
**Post date:** [January 5, 2022, 11:05pm UTC](https://forum.adalo.com/t/build-real-time-chat-for-real/21624/35 "2022-01-05T23:05:24Z")

</div>

Actually, this will cause performance issues. I have come up with a better way, I will post it later when I am back at my desk.

---

<div class="post-metadata">

**Author:** ![jakob](https://avatars.discourse-cdn.com/v4/letter/j/71c47a/32.png) [@jakob](https://forum.adalo.com/u/jakob)\
**Post date:** [January 6, 2022, 12:57am UTC](https://forum.adalo.com/t/build-real-time-chat-for-real/21624/36 "2022-01-06T00:57:57Z")

</div>

Ok, thank you very much:D

---

<div class="post-metadata">

**Author:** ![Eugen](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/eugen/32/25382_2.png) [@Eugen](https://forum.adalo.com/u/Eugen)\
**Post date:** [January 6, 2022, 1:13am UTC](https://forum.adalo.com/t/build-real-time-chat-for-real/21624/37 "2022-01-06T01:13:42Z")

</div>

Instead of using a Counter for unridden messages, I’m trying to setup a ridden/unridder property for conversations and show a dot next to the unridden ones… Let me see if works

---

<div class="post-metadata">

**Author:** ![jakob](https://avatars.discourse-cdn.com/v4/letter/j/71c47a/32.png) [@jakob](https://forum.adalo.com/u/jakob)\
**Post date:** [January 6, 2022, 10:24pm UTC](https://forum.adalo.com/t/build-real-time-chat-for-real/21624/38 "2022-01-06T22:24:01Z")

</div>

Hi, I have found a small bug. Normally, if you swipe from the top to the bottom of the screen, you go further up, but in the chat component, you go further down. This is a bit confusing for the users. Do you know what I mean or should I send a video where it is shown?

---

<div class="post-metadata">

**Author:** ![TKOTC](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/tkotc/32/6863_2.png) [@TKOTC](https://forum.adalo.com/u/TKOTC)\
**Post date:** [January 6, 2022, 10:33pm UTC](https://forum.adalo.com/t/build-real-time-chat-for-real/21624/39 "2022-01-06T22:33:41Z")

</div>

I think I understand, it moves reverse of the swipe motion. I use a flatlist component and set the flag to inverted so it might be related to that. I will do some local testing and post back.

---

<div class="post-metadata">

**Author:** ![jakob](https://avatars.discourse-cdn.com/v4/letter/j/71c47a/32.png) [@jakob](https://forum.adalo.com/u/jakob)\
**Post date:** [January 6, 2022, 10:56pm UTC](https://forum.adalo.com/t/build-real-time-chat-for-real/21624/40 "2022-01-06T22:56:46Z")

</div>

Thanks👍🏻

[Previous page](https://forum.adalo.com/t/build-real-time-chat-for-real/21624.md?page=1)

[Next page](https://forum.adalo.com/t/build-real-time-chat-for-real/21624.md?page=3)
