Create a messaging system (Whatssap / messenger clone )

Ask us anything How do I?
1

Hello,

I would like to create a messaging system like whatssap inside my application.
Have you ever tried to do this?

And how please? I’m looking for a complete tutorial ( if possible ) thanks in advance :slight_smile:

1 Like
2

Hi, its depends of your backend. It should be possible with supabase because it has a realtime feature we handle in WeWeb, so your chat collection will be updated in realtime.

For now we don’t have the feature required to do it natively with custom backend. Its could be possible by developing a plugin so it require web development skills.

What’s your backend ? I think you still can emulate the realtime by fetching the collection every x seconds for example. Not efficient but should works. I’ve no tutorial for you that said, sorry

It would look like :

  1. Create an On App Load workflow (after collection has been fetched)
  2. Create a global workflow fetching your collection
  3. Add a custom JS action that include a js code looking like this =>
setInterval(() => { executeWorkflow(globalWorkflowId) }, 10000)

So every 10 seconds the collection is updated, again, its more like a hack, the good practice for chat feature is to use something called websocket, a protocol allowing you to have a realtime connection between a client and a server, so the server can notify every clients when a new message has been posted. This is native between WeWeb and Supabase, but we don’t have this feature yet for others backend.

1 Like
3

It is possible to use Ably to be able to connect WeWeb + Xano in realtime. It might be interesting to look at this.

4

hey Alexis,

thank you for your answer. I use supabase as a backend. I will try and tell you if it works. Thank you

5

if I can’t connect weweb and supabase for my case, I’ll certainly try your solution. Thank you for your help

7

Hey @roxanne

Yes, I’ve worked on creating a messaging system similar to WhatsApp, and there are different ways to approach it. One of the easiest ways is to use an existing SDK that simplifies the process of building real-time chat functionality, without having to implement everything from scratch.

If you’re using Flutter, I personally recommend checking out the MirrorFly Flutter Plugin. It’s a comprehensive solution for adding real-time messaging, voice, and video calling features to your app. The plugin provides all the necessary tools and APIs to create a robust chat system like WhatsApp, including features like direct messaging, group chats, notifications, and media sharing.

You can find a complete guide and code samples in the repository, which will be really helpful to get you started. This SDK is fully customizable, so you can tweak it to suit your needs and integrate it with your app seamlessly.

I hope this helps, and good luck with your project!