Implementing Real Time chat SDK to bubble.io

Hi everyone!

I am the developer of the Gaius App on bubble. I’m working on implementing the Real Chat SDK in bubble. Bubble has a JavaScript plugin that allows you to run any JS code in the bubble app. I tried to insert the JS code from your SDK and run it in the bubble app. I got several errors in the console. I have attached a screenshot.

Do I understand correctly that in order for the SDK to work correctly, you need to run JS code when the chat page is loaded? And am I also correct to understand that at this point the channel is activated, which allows you to maintain a constant connection via Web socket?

For a better understanding, I will describe the algorithm of how the JS code from your SDK is run in our bubble application.

  1. The page loads

  2. A workflow inside the application runs two JS scripts:

As for html and css. Bubble allows you to assign IDs or classes to elements, which can then be used in a JS script.

My task now is to try to run your SDK correctly on the bubble frontend.

I have also attached screenshots of how this works in the bubble.

Thank you very much!

Hi Ibragim,

“backendless.js” (or backendless.min.js) is a library, it doesn’t run by itself - instead you use the API provided by the library. The API you use would be in some other js file, perhaps your main.js if that suits you.

My recommendation is to get a basic HTML/JS app with backendless RT functionality without bubble first, that way you can understand the mechanics of using the Backendless API.

Regards,
Mark

Thank you for the answer, Mark!
I did more manipulation with SDK. I checked google chrome inspector and saw network sessions (on screenshot). I got 200 response. Does this mean that the session is set?

What “session” are you referring to? :wink:

I mean, doesn’t that tell you that the actual session between the client and the server is installed and working correctly? I observe that after some time the SDK sends a request https://eu-api.backendless.com/0A76C61A-6F2B-ED31-FF08-671D79F31200/2E252EFA-6B07-4F83-B39D-EC5472B5EA70/rt/lookup

And returns a response that the session is still alive.
444

What I see is some HTTP GET request that was executed successfully. If you’re asking about a dedicated web socket session, you’d need to look in the WS section of devtools:

Thanks Mark, everything seems to be working now. I can send messages to pub/sub. How can I get a list of all the messages sent, so that I can display them as a list in my app? Where are they stored? How can I retrieve them? How does this technically happen in your SDK? And why do they disappear after a while in the message tab?

Messages are ephemerial, they are not stored anywhere. If you need a message to be stored, you’d need to add login in Backendless to save them in the database. You’re welcome to take a look at our Chatly or GeoChat blueprints that demonstrate that functionality.

Thank you!
Did I understand correctly that these ephemeral messages will disappear if the user clears the browser cache and they can no longer restore them? Except if we save them to the database?

Once a message is delivered to you, it no longer exists on the server. I am not sure what impact browser cache has on this. If you do not store a message elsewhere, it is not saved on the server by default.

Hello Mark, How are you doing? can I ask your help with the following questions?

We want to use Real Time Chat or Real Time Data Base to create a chat room for our customers. In doing so, we need to store the message history and it needs to be available to each chat participant when they are online. But we have a problem with that.

When we use Real Time Chat, messages are not automatically saved to the database. We have to do this manually. However, we have to display them on the frontend as well as those messages that were sent and stored in the database earlier, such as two days ago. This creates problems with displaying Real Time chat and saved messages in the database at the same time.

I am also trying to use the Real Time Data Base and it seems to fit better, however I have a few questions:

  • Can I create objects through the Real Time Data Base, since in the example you demonstrate in the video (Introducing Backendless Real-Time Database - YouTube), you only do updates.
    In other words, is it possible to use this technology to directly save messages to the database, which at the same time will be displayed to all members of the connection?
  • Is it possible to use Codeless together with this technology (Real Time Data Base) so that I can create links between objects before or after they are saved?

I would also like to clarify if it is possible to use webhooks with your platform? This is necessary to solve the following problem:

  • when one user sends a request to save an object in the database, such as a chat message, the other chat participant must also receive an updated list of objects in order to see the new message. As we know in the case of API requests, participants can only retrieve it in their frontend after they have made the request. However, if we create a webhook connection that returns information that there has been a change in the number of objects in the Backenless database, then on the bubble side we can run the process and return the updated object list.

Yes, you can save messages, but keep in mind that the database stores objects.

Yes

It is definitely possible. With real-time messaging and real-time database, a callback happens automatically in the client program when a message is published in our publish-subscribe messaging system or if you use RT database, you get a callback when an object is created/updated/deleted.

Mark

Hi Team! I am having an issue trying to determine how to get the subscription services working with bubble. I have the ability to post a chat from bubble but am told that the websocket cannot be established.


I am also noticing that when trying to establish the web socket i am missing a password field in the real time logging console.

0:37:10.903 | SERVER_CODE | ERROR | [12529] Error: Property ‘password’ is required at

new ResponseError (/usr/local/lib/node_modules/backendless-coderunner/node_modules/backendless

-request/lib/index.js:42:116) at checkStatus (/usr/local/lib/node_modules/backendless-coderunner

/node_modules/backendless-request/lib/index.js:244:9) at processTicksAndRejections (internal/

process/task_queues.js:95:5)

Could you please show the code you use to add a real-time listener?


Here is the listening i have been playing with. I am getting the same issue on my non-bubble testing i have been doing.

I put together a simple test (outside of bubble) and everything is working as expected.

Here’s a page that creates a subscription and prints it out to browser console (run it first):
https://www.backendless.us/api/files/web/test.html

Here’s a page where you can publish messages:
https://www.backendless.us/api/files/ui-builder/containers/support/index.html?page=sendmessage

Try replicating the same example outside of bubble to make sure basic messaging works for you.

Regards,
Mark

Thanks! Let me test it out here.

@mark-piller thanks for your help

Issue appears to be tied to the script I was using.

<!-- // This one did not work  -->
<script type="text/javascript" src="https://api.backendless.com/sdk/js/latest/backendless.min.js" ></script>
	<!-- This one worked -->
<script src="https://api.backendless.com/sdk/js/latest/backendless.js"></script>

I changed my example to the minified version of the script and it is still working:

subscriber:
https://www.backendless.us/api/files/web/test.html

publisher:
https://www.backendless.us/api/files/ui-builder/containers/support/index.html?page=sendmessage