Fetching Data in real time

A few days ago I ran into a situation where I needed to update certain data based on the output of an API. It was a simple counter based on the data coming from an API which is a kind of timeout on a Line. So… I tried a lot of things with bubble and nothing worked, so I decided to try something with bubble and came up with this solution:


An HTML that loads a script and the scripts update the text every x seconds. It is really simple and works like this:

If you want to take a look or something, you can see it here:

This is the code I’m using:

<h2 class="bubble-element Text baTaRsaT" id="waiting-text" style="align-self: center; min-width: 0%; order: 8; min-height: 55px; height: max-content; flex-grow: 0; flex-shrink: 0; width: auto; margin: 0px 0px 10px; z-index: 5; white-space: pre-wrap; overflow: visible; font-family: var(--font_default); font-size: 18px; font-weight: 500; color: var(--color_text_default); text-align: center; line-height: 1.5; border-radius: 0px; opacity: 1;">Texto</h2>
<script>
    function updateCurrentDateAndWaitingTime() {
        fetch('https://api.chucknorris.io/jokes/random')
                              .then(response => {
                    if (!response.ok) {
                        throw new Error('Failed to fetch current date');
                    }
                    return response.json();
                })
                .then(data => {
					var waitingTextElement = document.getElementById('waiting-text');
            		var image = document.getElementById('image');
            		console.log(image)
                // Extract the number of minutes from the content
                	var content = waitingTextElement.textContent;
                	
                	var newContent =data.value;
                
                // Update the content of the h2 element
                	waitingTextElement.innerHTML = newContent;
                   
                })
                .catch(error => {
                    console.error('Error fetching current date:', error);
                });
     };
    

    // Call the function initially to fetch and display the current date and waiting time
    updateCurrentDateAndWaitingTime();

    // Update the current date and waiting time every second
    setInterval(updateCurrentDateAndWaitingTime, 1000);
</script>

If I’m not doing something right or you think I’m doing something bad, let me know :smile:
But if didn’t find any information about something like this when I was looking so I hope this works for someone.

thanks for sharing. there is a native workflow trigger, do every x seconds, did that not work for use case?

2 Likes

That’s actually a great alternative. However with this I have an independent job that’s is getting the data. With this is the browser’s client the one in charge of the data and not bubble running a every x seconds and setting a state every x seconds.

That is the client device doing the work, not the Bubble server, as those triggers and actions are both client side, as far as I know.

I’m not quite sure there, since I think the process of triggering the wf x seconds and then setting an state that is calling an external API would consume more WUS than a html+script running on the client side. But since I’m not sure of how much does that consume, I’m not able to confirm. I’ll try to make some tests to find the difference.

If you are using an external API in workflows, yes, that costs money. I was not focused on the use of the API in the setup and focused more on the general approach of doing something every x seconds, like setting a custom state.

If you are using an API in this setup, do be aware of the security risks of using sensitive data in the API call, such as secret keys or something, but from the looks you are just running a free api for jokes, so not an issue, but if using this approach for APIs that have sensitive data, it would be a security vulnerability.

Yes, forum sure it’s something that could generate a vulnerability. And that’s something to have in mind when you’re setting something like that, but in this example and in the case I used it, it’s just calling an API that return a single value, no params no editing data. That’s why I’m sharing this. This is a solution for those cases (instead of setting states and putting a Unix in the header of a external API call to avoid bubble caching the answer)