Build Real-Time Chat, for real

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
A version control system (not a component) for Adalo projects to save, restore, and compare versions
image
The WYSIWYG editor/reader, this will eventually make it onto the marketplace when I get back around to id
image
Accelerometers, Gyroscope, Compass, etc… component
image
Mapbox component instead of google maps
image
A way to get the record id of a field, mainly for external api callbacks
image
Geocoding components for converting lat/long to address and reverse, and some other tricks
image
A component to draw pictures
image
A component to do simple photo editing like crop and scale stuff.

4 Likes

That’s amazing, good luck

1 Like

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)

3 Likes

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!

6 Likes

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

@TKOTC Are the messages encrypted on the ably end?

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

1 Like

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

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.

3 Likes

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.

That would be a great feature :+1:

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

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?

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

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

2 Likes

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.

1 Like

Ok, thank you very much:D

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

1 Like

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?

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.

1 Like

Thanks👍🏻