Realtime chat using Xano and weweb

Ask us anything How do I?
1

I am currently working on implementing a chat feature within my application for users to chat back and forth. I’d like messages to update in realtime as new messages are sent between users without the need for polling. I have seen the videos on how to enable realtime in xano and have done that and a few other weweb videos on websockets and chat support but nothing that really fits my use case for a user chat feature. Are there any resources that would help me with this? I’ve set up channels and workflow using some of the other videos but can’t get the messages between users to update in realtime without the need to do polling or refreshing the screen. I am a newbie so any videos or resource recommendations would be greatly appreciated

2

Hi Randy :waving_hand:

I’m glad you are experimenting with real-time in your app.

For getting started with realtime in WeWeb, our realtime docs are a great place to start, especially the intro pages for Xano and Supabase.

3

Thanks @Agustin_Carozo. I was hoping for something with a little more detail on my use case as I’ve already looked at those and doesn’t really provide guidance on what I’m trying to accomplish. It would be great if weweb would create a video for us looking to implement something like this

4

@Agustin_Carozo @Joyce - Is there anything else that might be able to help me with more detail for my use case for a in app user chat feature?

We are building a single-page application in WeWeb using container-based view switching (not page routing). The chat interface lives inside a container that becomes visible based on a navigation state variable.

Our chat UI uses a repeater bound to a messages collection returned from a Xano API endpoint. Messages display correctly on initial page load and after manual refresh.

Expected behavior:

When a new message is sent by another user, the receiving user should see the message appear in the chat UI in real time.

Actual behavior:

The message is successfully created in Xano, but the receiving user does not see the message appear unless they manually refresh the page.

What we’ve confirmed so far:

  • Messages are being saved correctly in Xano

  • The API immediately returns the new message when re-queried

  • Repeater bindings and display logic are correct

  • Container visibility is correct (not display:none)

  • The issue occurs across different browsers/devices

Realtime troubleshooting performed:

  • We attempted to use WeWeb Realtime Events triggered from Xano on message creation

  • The WeWeb frontend is subscribed to the event

  • However, no frontend actions or logs fire when the event occurs

At this point, it appears that although the realtime event may be firing from Xano, the WeWeb frontend is not receiving or reacting to the event in a way that causes the messages dataset to re-fetch or update.

We’re trying to understand whether this requires a specific workflow action (such as manually re-fetching a collection on realtime event) or if there are limitations with repeater reactivity in container-based SPAs. I’ve been able to get it to open a new nested channel in xano by applying workflow when the user clicks on the conversations repeater that displays the individual messages in the conversation. But I can’t seem to figure out how to get it to listen for new messages and return new messages automatically.

Any guidance on the correct pattern for realtime chat updates in this setup would be appreciated.

5

Seems like you are not listening to the event properly in weweb. if its being logged you need to subscribe to the channel to listen to it.

6

Ya I agree and that’s the part I’m stuck on. All the documentation Ive seen Ive followed and it should be listening but it’s not

7

you would need to share more details on how you are listening to the changes. Maybe post screenshots so i can help

1 Like
8

Hey @RandyG0322 :waving_hand:

Thanks a lot for describing the setup and everything you tried and checked.

I’d suggest a couple of options:

  1. Share a video walkthrough of how things are setup on both WeWeb and Xano (or some screenshots like Samuel suggested) to help us see if there’s an action or step missing.
  2. Reach out to the support chat so they can look at your project directly.

Option 2 is probably the easiest for the team to be able to jump in directly and see where the flow is breaking.

In any case, I’ll take a look on my side as well and see if I can put a video/build guide together in the coming weeks.

9

Hi Joyce,

I’m also using api polling with a repeater workflow for my messaging, and would also be stoked for a video/guide on turning this into a realtime system! Also on xano+weweb stack (so I’m just +1-ing for the guide :smiley: )