How to make a Realtime View Counter using JavaScript & Firebase

How to make a Realtime View Counter using JavaScript & Firebase. Hey guys and gurls. I'll be showing how to make a realtime view counter. This could be used to count views on a video or visitors to your site or whatever you need to count in realtime. So let's begin.
Background Beat: Mac Miller ft. Tom Misch Type Beat ''REMIND'' - GC
Firebase: firebase.googl...
API: api.ipify.org/
Font Awesome: fontawesome.com/
Patreon: / rhymbil
Until next time
RhymBil Out.
HMU @[e-mail]

[@thedelanyo]

Simple but great 👍🏿😃 tutorial. For those who don't want to write the for loop,, instead of replace(".", "-" ), you can do replaceAll

[@MelvinAdekanye]

Great tip! You're so right.

[@ihackedpiggy3212]

Wait using the real-time fire base would it be possible to make the online chatapp

[@MelvinAdekanye]

Yes. You could store messages and their sender. Then render it.

[@nonthapat.j]

Help please it have this error: "@firebase/database: FIREBASE WARNING: Exception was thrown by user callback. TypeError: snapshot.numChildern is not a function" in console

[@ebk_west]

Can u put the source code

[@ihackedpiggy3212]

Rhymbil Thank you!

[@MelvinAdekanye]

No problem

[@ashishnagle57]

This guy play fortnite

[@paisalepra]

Hi Rhymbil awesome tutorial!! i have a doubt, what if i need to count every single hit that have my website? even if there is hit by the same ip several times

[@MelvinAdekanye]

Oh Ok. So you want to count repeated visitors. For this you would need to create a random id that would be saved instead of the actual IP. In better terms your database should look similar to this: database | RANDOM ID | viewers_ ip: 192.168.82.0 // same user | RANDOM ID | viewers_ ip: 192.168.82.0 // same user | RANDOM ID | viewers_ ip: 192.168.89.9 // not same user But it will appear as 3 visitors. Which 2 of them are repeated.

[@nonthapat.j]

@@MelvinAdekanye how to do it???

[@busayo02]

The counter doesn't reduce even after someone leaves the page. Is there a fix for this?

[@MelvinAdekanye]

No. This isn't a current viewer counter. But rather a total views counter. Perfect for videos or viewing total traffic to your site. If you want to make a current view counter. You might want to look into web sockets with node.

[@kaangoktan8536]

@@MelvinAdekanye Can you make a current viewer counter tutorial? That would be awesome

[@genigeekus]

can this work on a video when a peron views it? I was looking for something like this but under a video so that people can see how many people viewed a video

[@MelvinAdekanye]

Of course!

[@rangabharath4253]

awesome

[@Deeni_Akhbar]

its not working for me can anyone help me

[@DiimaPopov]

Thank you so much. It did work for me. Great job

[@DiimaPopov]

Would be nice to see like button using js & firebase. Something like facebook like

[@MelvinAdekanye]

You're very welcome. Maybe a like button for a comment section. For sure. I'll get on it.

[@DiimaPopov]

@@MelvinAdekanye yeah that would be amazing

[@jepfarragona]

do you have an updated tutorial of this?

[@MelvinAdekanye]

Coming soon.

[@jepfarragona]

looking forward to it.

[@dhandayalprasad2267]

Please make a video on how to make a leader-board with Firebase

[@MelvinAdekanye]

For sure. You can expect it

[@poopieness]

Hi! I am doing a system where I have a Web Application for the Admin Side and Mobile Application for the Customer Side. How can display the count of views from the Mobile app to my Web App?

[@DJVeryita]

Hi, can i add this code to the default player HTML5? is for a proyect and i dont know how :/!!!!

[@DJVeryita]

i need to know how many persons are cnonected to a live hls stream :/

[@burenbatturtogtoh5179]

hi dear, this is really useful for me, but my count is not decreasing what should i do help me

[@MelvinAdekanye]

You're welcome. It's not supposed to. It's only a lifetime counter. But you definitely can decrease it. For example. When the user exists the tab. You can delete their data from the database so it decreases the count.

[@phihoanghong2473]

thanks

[@sherbertlemons7393]

Hi, it would be great if you could do an update to this video. Doesn't seem to work currently

[@MelvinAdekanye]

Oh, okay. Thanks for the heads up.

[@AbdirahimAli10]

how is it if you need to count how many times that ip is visiting you?

[@MelvinAdekanye]

Let say you're trying to track traffic to your website. Or you have videos on your site and you need to count views like KZbin. Or you just want to get some practice with Firebase.

[@AbdirahimAli10]

@@MelvinAdekanye i have a web page (de-centralization page) i need how many times is visited this page and which IP address is visited the most? thanks in advance

[@MelvinAdekanye]

@@AbdirahimAli10 No problem

[@LoLingVo]

Does that cost anything?

[@MelvinAdekanye]

Well, yes. Firebase is free to try out and great for small projects. But the costs appear when your database grows.

[@Deeni_Akhbar]

provide source code pls

[@jgbjbcvgcug5561]

How to make a chatting app for brother school

[@MelvinAdekanye]

You can view a previous video I made here: kzbin.info/www/bejne/iYLLk6uGp5l4isk

[@digitsmartplus7121]

how to create like and dislike to firebase please

[@MelvinAdekanye]

That would be a good video to make. But you can simply apply these methods to a like/dislike counter.

[@kahuds]

Could you release the source code?

[@MelvinAdekanye]

The video is the source code. 🤣

[@cikargt5187]

it didnt write to database

[@MelvinAdekanye]

Do you have any errors in your console?

[@ebk_west]

it dont work

[@ebk_west]

pls help

[@codejoy9546]

First

[@MelvinAdekanye]

Second 😂

[@codejoy9546]

Hahaha