Real-time Data Updates with Fetch API - JavaScript Tutorial

In this video I'll take you through the process of using short polling in combination with the Fetch API to achieve the effect of "real time" or "live" data updates with JavaScript for your web projects.
Short polling involves asking the server for a fresh copy of information every set amount of seconds. The example in this video demonstrates a live view count for a piece of media content.
Support me on Patreon:
/ dcode - with enough funding I plan to develop a website of some sort with a new developer experience!
For your reference, check this out:
developer.mozi...
Follow me on Twitter @dcode!
If this video helped you out and you'd like to see more, make sure to leave a like and subscribe to dcode!

[@kuhak4780]

This is not an ideal solution for live data pulling/update. It will keep calling data from server. Imagine if 2 million requests done this way simultaneously, it will overflood the server with requests etc.

[@tylerobier3269]

Then would websockets be a better solution ?

[@emgodas]

@@tylerobier3269 I think websocket is better for one-to-one chatting

[@software9839]

so, what is the best solution?

[@ByronMarkLUrsua]

you just saved our project. thanks.

[@Fathurrr1000]

is that gonna slow down the performance when we refetch >100 table data every 2 seconds?

[@zorinzorin639]

Yes,is very very bad!!!

[@aarkaev]

It's NOT "real-time". It's periodic updates

[@dcode-software]

I see your point, something like Websockets would achieve pure real time. If you poll fast enough then users may not notice the difference

[@aarkaev]

@@dcode-software Server Sent Events may be better choice without WebSockets. Anyway thanks for video

[@rishiktiwari]

@@dcode-software Yes, but the problem with polling is the amount of burden on server. Imagine thousands of clients polling every second.

[@vikydxn]

@@rishiktiwari Any suggestion to avoid burden on server? or server side script?

[@rishiktiwari]

@@vikydxn You can use websockets (if PHP then try Ratchet or Signalr if .NET). Alternatively you can use third party API like Pusher.
Also, if your requirement is not fully real-time then fetching every 3-5mins shouldn't be much of a problem.

[@theartist8835]

Would using server-sent event be an alternative to this technique ? which one is more performant ?

[@utkarshchauhan5827]

Can we update data with python insteas of php

[@apoorvgupta4656]

Can I put url of a website in data, will it fetch the data as the whole website is only having a four digit number which change after every refresh.
Please reply it is very urgent

[@tusharniras]

Well its not real-time but it solves my purpose. Really helpful video! Thanks!

[@hanisirfan]

thanks for the video.. I don't know it could be as simple as this to make the API and also fetching the data (I'm new to AJAX etc) and also so fast when you clicking that TAB button 😂😂

[@ifeanyinnaemego]

How can I modify this code to send Ajax request to PHP to update a database value every 30days

[@rishiktiwari]

For the 30days countdown you will have to make sure that the client keeps your application open till that period because the countdown is on client's computer. I would prefer using Cookies or Redis keys with 30 days expiry. If you have access to the hosting service then you can set a cron job which runs your scripts every 30 days.

[@okeyeng8024]

What about 100ms? What's the safe minimum interval?

[@rangabharath4253]

Awesome as always 👍🎉👌

[@omargian_stw1305]

Good tutorial thanks. I'm wondering if I need to use data as a parameter for another function out of setInterval, I mean get the current data and use that data for a different function for example create a function with an alert(), and run it only once and not every two seconds. What do you recommend for this task?

[@cm3462]

let x = 1;
async function function1() {
await ..(some operation);
x = 4;
return x;
}
async function function2() {
await function1();
x = 5;
return x;
}
console.log(x);
result: console shows "5"
I don't know if this is the best way, but it works.

[@3dgiftz]

Thanks

[@kasper369]

is their a way to use javascript instead of PHP to append view count

[@farhanyousaf5616]

PHP generates the JSON data structure, so you could do it any language of your choice (node/python/ruby/whatever), as long it is JSON and fetchable.

[@rishiktiwari]

Use Node.js for backend!

[@TheRaiat]

Boa aula, porém acredito que um setinterval a depender do tamanho da aplicação e do número de requisições haja necessidade de um servidor de grande processamento

[@cleroletras6954]

Ae ja teria que partir para o Node js

[@cleroletras6954]

Thanks bro

[@johnyanastacio1107]

thank you

[@johndeoresearch2251]

can you share the code?

[@whatsapponly6288]

Thank youu

[@Gszada]

that's cool...

[@anthonyzorilla5919]

GOOOOODDDSS TO!

[@wardenclyffepark486]

can i do this in table data?

[@shivanshmishra752]

Yes you can you just need an api

[@mehedihassan3882]

multiple rows data updated is possible? if yes please help me.

[@cleroletras6954]

Yes

[@expiredlamb2000]

what is youtube.local?

[@dcode-software]

I explain it in detail in this video:
ruclips.net/video/gBfZdJFxjew/видео.html

[@expiredlamb2000]

@@dcode-software Thanks

[@pickashoe7870]

Java has a footer in the middle of the official site 💀

[@abubakarsiddique4276]

ll

[@PraexorVS]

PHP 🤮