Hi all,
I’m considering to port one of my existing projects to bubble.
A key feature is real-time chat and native push notifications.
How hard would it be to set this up using bubble? I know of some native wrapper solutions. So that should be no problem.
I never come across posts about implementing real-time chat though… Is it that easy in bubble, or not a lot of people doing that?
Any pointers would be much appreciated!
Cheers,
Steven
Websockets?
Look into fire base.
I previously set up a live chat feature natively using normal Bubble workflows with no plugins fairly simply.
For a super simple live chat, you could do it by setting up just 2 new data types:
ChatMessages (which would include a field for a list of texts called something like “chatText”)
and
ChatChannel (which would include a field for a list of ChatMessages “chats,” and a field for users “ChannelMembers”)
Set up whatever workflows you need to add the target users to the relevant “ChatChannels.” Design your UI for a chatbox with a repeating group inside of type “ChatMessages” and have it display the relevant “ChatChannel’s chats.” Set up workflows for when a user types a message and clicks a button, the a new “chatMessage” is created and added to the current ChatChannel’s chats.
You can also get more creative with ‘reactions,’ ‘seen’ and ‘dates/times’ if you like
e.g 1. Group Chat UI
e.g. 2 Private Chats UI
Hi Michael,
Thanks! Seems simple enough.
And is the speed good? As in: can 2 users have an active, quick chat together. New messages appearing immediately after being send at the other users’ screen? Had a lot of issues with that in Adalo.
Cheers,
Steven
Thanks Doug!
I know about Firebase’s capabilities. Am hoping that either Bubble’s native tooling is good enough, or that a simple configurable plugin is available.
Cheers, Steven
There’s one signal plug-in for push notifications.
Building a chat app in bubble, new messages are pretty nimble
Speed has been easily fast enough to keep up with messages on my end. Haven’t done too much testing to be honest but I’ve had live chats with users on my bubble site and seemed to run as smoothly as any other live chat I’ve used online before.
I skipped over all the smaller details, so there will probably be a little problem solving to get it all working together but if there’s anything you get really stuck on I’m happy to try help
Hey @michael40 , what did you do to reverse the order of the chat messages, so that the most recent are at the bottom and you don’t have to load all the messages? That’s something I’ve run into and I’m currently using a plugin to reverse the order, but it’s not a great solution because it stops page scroll over it.
just sort it by date descending = no?
That’ll get you the right order, but there are some issues:
If it’s date descending, then most recent messages are last, and you’ll have to load all messages in a thread to display the most recent. Also, the user will start at the top of the repeating group by default, and you need a way to get them to the bottom where the most recent messages are.
You could load a smaller number of messages, but you still have the issue of getting the user to the bottom of the repeatinggroup first, and you’ll also need to build a way to load older messages if the user scrolls up to view more.
To be clear, all this is doable and I have chat in a couple places in my app that is working well, it’s just not as simple as sorting and I’m always curious how others have implemented. My app is using this plugin to implement the reverse order:
Hi @johndurso, totally fair concerns that I shared when making the chat feature too. I got around these problems without plugins:
"you’ll have to load all messages in a thread to display the most recent."
As far as I know, RGs don’t load all entries first before displaying the last ones if filtering/sorting in a different way. Rather, they search for the first 20 or so relevant entries (I forgot the exact number) to display initially and then load only those ones so its always fast. When you scroll past those initial 20(?), the RG will automatically start loading the next set of entries. If you want it to load a custom number of entries initially, just set the data source to (your list of messages):items until#
"the user will start at the top of the repeating group by default"
I solved this by adding a workflow on page load - scroll to (name of repeating group)'s list of ChatMessages:last item. If that is for some reason interacting with your main page scroll bar, you could put the UI of your chatbox in a reusable element.
I think your other concerns you raised should all be resolved by the advice above
That’s what I’d do, # until 10 or something and then just use some arrows to display next or display last (from the repeating group element actions) sort by asc
I seem to remember there being an issue with that but it’s been a while since I implemented it. I’ll go back and check. If I can get by without a plugin or extra complications I definitely will!
Thanks all for the input!
So doable, fast enough for user-to-user chat, but requires some quirky work-arounds. Good to know 
I have a problem in my chat that only loads at the beginning of the conversation and I want the last typed message to appear when I load it. I already created a flow in the button where the chat starts, to SCROLL TO and select the element (repeatinggroup) but it still doesn’t work.
I’m having a bit of trouble implementing this. I’ve got the HTML and Javascript running just fine, but my repeating group doesn’t do any lazy loading / loading as I scroll up the page. Instead, it loads the entire chat (100ish messages) at one time. How do we force the lazy loading behavior?
Hi! Did you figure out how to send push notifications on native ios for real time chat? Dealing with the same issue. Looks like onesignal isn’t good for real time chat notifications and in it’s documentation it has hyperlinks to other services for this but I don’t think those other services have easy integration with bubble
Yeah, you can totally set up real-time chat in Bubble, but getting it to run smoothly can be a bit of a pain sometimes, especially if you want instant notifications. I’ve used Firebase for some real-time stuff, and it worked fine, but if you’re looking for something more like a fast, back-and-forth convo, kinda like chatting with https://www.sicha.ai/ , you might need to mess around a bit more.
Also, when I did it in Bubble, I had a bit of trouble with the message order. The newer messages wouldn’t always show up at the bottom, and scrolling through older ones was kinda slow.
