UX and speed for user to user chat using repeating groups has not been optimum.
It appears that webrtc is the best option, possibly using a third-party such as www.pubnub.com.
Has anybody successfully integrated a basic user to user text chat using webrtc?
I’ve had experience building a variety of live chats for client apps and I can tell you its definitely possible to build a good chat system in Bubble. It’s not going to be on par with Slack but definitely possible.
Cheers!
This has been my experience as well. It works, but is not optimum. I notice that on mobile 3G/4G connections the speed and responsiveness is a huge problem for end users, especially in a world where FB Messenger, Whatsapp and Slack are king and people have gotten used to the “instantaneous” nature of chat.
I will say that paginating your repeating groups (ie showing max 10-20 results at a time) will improve speed to a certain extent. I’d be interested in hearing what @peng.o has done to build a good chat system in Bubble. Maybe there’s something I’m missing that’s obvious?
PubNub looks like a great option with their JavaScript SDK, thank you for linking to it. I’ll post here if I get around to testing that out. Ideally this would be integrated as a plugin, seems doable.
My question would be: what don’t you guys find “optimal” about it specifically or what issues are you having?
Good to hear peng.o.
Users have come accustomed to webrtc communication, especially when wrapping a bubble app for mobile.
The Main issues we see are:
Would love to see what you have put together. Again we do not need anything fancy a clean text 1:1 system will be Killah.
However, I think there would ultimately be a lot of interest into a plug-in. I am talking to the team at pubnub to see if we can make this happen.
I have created a test plugin for pubnub ChatEngine.
But there is one issue with bubble that prevents it from being practical.
It is the issue of not being able to modify a thing client-side.
Think about it this way, assuming you’r able to receive messages, how are you going to display them in bubble?
Repeating group is likely the way. But repeating group requires a data type. If you just make it a text it means you can only use the message. But you need things like sender, time message was sent etc.
One work around will be to create a datatype in your database say Message which has fields to the text message, sender, time, etc, and use it for the repeating group.
Now comes the main issue, in a plugin states can only return primitive types like text, date, number, etc. You state cannot return a thing like message.
This means you will have to return the individual fields of the messages as different values.
But bubble doesn’t allow setting individual fields of a thing on client-side. Meaning its hard to come up with a way of displaying the data without interacting with the database.
But if you were to interact with the database then it defeats the whole purpose of using something like pubnub.
tldr:
Bubble will have to support ability to return an object (thing) as a plugin value or ability to modify a thing on client-side to have a practical implementation of pubnub chatengine in bubble.
Thanks @peng.o,
In short we are trying to get the same loading effect as the bubble forums. when the forums thread is long and you enter far down the repeating group, as you scroll up more entries load above.
So we are loading the last ten with vertical scrolling . If for example we use Zeroqodes detect scroll position we can trigger the Repeating group to load X entries more.
The problem is that the Repeating group scroll position is now at 0 and we can not scroll any further up to trigger the repeating group to load an additional X amount more.
Do you have any work arounds?
@levon perhaps you have an option.
why don’t you add a workflow when scrolling position is 0 then show certain number of entries?
OK just for anybody else out there struggling with this we have a work around. But its all a bit rough!!
Message Input:
Firstly, you’ll need to have the message input and it’s trigger in a floating group fixed to the bottom.
Message Thread
The repeating group with the messages will need to be set to full list, be the full width of the screen, with its top at the top and its bottom bordering the input floating group. You will need to set a custom state (“message count” as a number) and then use “-” to set how many messages from the last you want to load.
Set RG’s Messages datasource to search for your messages “from #” messages “count”.
Be sure to add a conditional to this repeating group so that this doesn’t trigger when there are not enough messages. eg.
Use scroll to rg’s last message off send trigger.
Use airdevs stretch to fit code for alternating colour texts
https://widgets.airdev.co/bubble-widget/stretch-to-fit-messenger-1496772972510x651241166982799700
Loading more entries as you scroll up
Use zeroqodes scroll detector to trigger the following work flows to ensure it smoothly loads as you hit scroll position 0% and resets itself to 1% off.
Hope that helps Merry Xmas
Workable but not great. Would love see if you have a better template.
