Is there a comprehensive guide or tutorial available that outlines the process of integrating a chat system with Weweb and any other backend? The objective is to enable logged-in users to engage in private and anonymous chats. I’m seeking a step-by-step walkthrough for inspiration before undertaking the development from scratch. Any recommendations or suggestions would be greatly appreciated.
I built chat recently and it ended up mostly:
- collection list to display/select the list of people user is chatting with
- collection list to display recent messages in chat (query a message DB with selected people chatting)
- form input to submit next message
- variables to track things like the next message, selected chat etc.
I found it most helpful to take apart a couple of prebuilt flutterflow MVPs and see how they were built. But the experience of using flutterflow is terrible compared to WeWeb haha, so it was worth the work to switch over here.
1 Like
I’d say use Supabase Realtime, there is people like @Johnny who made this I think. I also managed to do so, but for a step by step tutorial, that would take time.
1 Like
@John.k I’m still waiting for a chat tutorial as well. Most of us do not need it to be real time. Just something where one person sends a message (using a form), it gets stored in Xano, and the receiver can view the message when they reopen their page.
I have figured out one part - Private messages. However, you know on the left sides of chats where it shows you who you’re talking too (name picture etc) and it does not repeat? I am struggling with that part.
Here’s what I did for the private message part:
Here’s the advice that CoPilot gave me that I’m working with:
To create a messaging feature where two people can have a private conversation with Xano as your backend, you would need to structure your database and create endpoints in Xano, then utilize these in your frontend application. Here is a basic step-by-step guide:
1. Create necessary tables in Xano: You need at least two tables: Users and Messages. The Users table stores your user data, and Messages table stores the messages sent between users. In the Messages table, you would likely need fields for senderid, receiverid, and message_content at a minimum.
2. Create API endpoints in Xano: You need to create at least two API endpoints: one for sending messages and one for retrieving messages. The ‘send message’ endpoint could be a POST request that creates a new message in the Messages table, with the senderid, receiverid, and message_content provided in the request. The ‘get messages’ endpoint could be a GET request that retrieves all messages where the logged-in user is either the sender or receiver.
3. Implement functionality on your frontend: In your frontend application, create a messaging interface. This would involve creating a form for sending messages, which makes a request to the ‘send message’ endpoint when submitted. You also need to create a way to display messages, which retrieves messages pertaining to the logged-in user from the ‘get messages’ endpoint and displays them.
4. Filter messages for privacy: To ensure that a user can only see messages that are part of their private conversation, you could add a filter to the ‘get messages’ endpoint. This filter can check that the logged-in user is either the sender or receiver of the message before sending it to the frontend.
5. Handle real-time updates: As Xano does not support websockets for real-time updates, you will need to periodically fetch new messages on the frontend. This could be done by periodically sending a request to the ‘get messages’ endpoint and updating the displayed messages whenever new ones are received.
1 Like
Thanks for your suggestion. Having said that, weweb guides with explanations on how to build full working components would be valuable rather than frankenstein something from Flutterflow. These guides could provide step-by-step instructions, helping users understand and replicate the process and its logic. This would promote best practices and fewer errors in the long term.
I’m paying someone to finish our direct messenger now. I will post back here if it works with details on how to replicate.
@MyHeroVA Did you manage to get something out of it?
It would be great if the WeWeb central team would be willing to actually build replicable tutorials for these essential features.
I frankensteined it. But maybe something in this tutorial will help: Loom | Free Screen & Video Recording Software | Loom
1 Like
Thank you for sharing your current progress, I really appreciate it!
1 Like
There is also Talkjs.com - https://talkjs.com - if your app needs a very robust in-app chat experience with all the bells and whistles without even designing a chat UI.
YES it costs some $$ - BUT - you can deploy very, very quickly and have every feature anyone would want or expect in a chat UI. To build everting you get immediately out of box with Talkjs would take a lot of dev time.
Everything is realtime via Talkjs server - and then if you want, you can save messages to Xano or whatever backend you use with their Rest API.
@Mark_Pederson that sounds amazing, I can’t get it to work tho. Can you guide me in the right direction where to put the javascript code? That would be awesome, thanks!
you can actually do it using supabase realtime and weweb. thats quite easy to setup and also manage in the longrun. i recently built one using this stack you can view it here. https://x.com/the_icon_x/status/1782498491496869936