How to make a Realtime View Counter using JavaScript & Firebase

Поделиться
HTML-код
  • Опубликовано: 9 окт 2024
  • 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 @rhymbilyt@gmail.com

Комментарии • 58

  • @thedelanyo
    @thedelanyo Год назад +1

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

  • @ihackedpiggy3212
    @ihackedpiggy3212 4 года назад +1

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

    • @MelvinAdekanye
      @MelvinAdekanye  4 года назад

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

  • @DiimaPopov
    @DiimaPopov 3 года назад +1

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

    • @DiimaPopov
      @DiimaPopov 3 года назад

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

    • @MelvinAdekanye
      @MelvinAdekanye  3 года назад +1

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

    • @DiimaPopov
      @DiimaPopov 3 года назад

      @@MelvinAdekanye yeah that would be amazing

  • @nonthapat.j
    @nonthapat.j 3 года назад

    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

  • @paisalepra
    @paisalepra 4 года назад +1

    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
      @MelvinAdekanye  4 года назад +4

      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
      @nonthapat.j 3 года назад

      @@MelvinAdekanye how to do it???

  • @ihackedpiggy3212
    @ihackedpiggy3212 4 года назад +2

    Rhymbil Thank you!

  • @busayo02
    @busayo02 4 года назад +2

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

    • @MelvinAdekanye
      @MelvinAdekanye  4 года назад +2

      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
      @kaangoktan8536 2 года назад

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

  • @ebk_west
    @ebk_west 4 года назад +3

    Can u put the source code

  • @burenbatturtogtoh5179
    @burenbatturtogtoh5179 3 года назад

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

    • @MelvinAdekanye
      @MelvinAdekanye  3 года назад

      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.

  • @poopieness
    @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
    @DJVeryita 4 года назад +1

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

    • @DJVeryita
      @DJVeryita 4 года назад

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

  • @genigeekus
    @genigeekus 2 года назад

    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

  • @sherbertlemons7393
    @sherbertlemons7393 2 года назад

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

  • @dhandayalprasad2267
    @dhandayalprasad2267 4 года назад +1

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

  • @AbdirahimAli10
    @AbdirahimAli10 4 года назад +1

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

    • @MelvinAdekanye
      @MelvinAdekanye  4 года назад +1

      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 RUclips. Or you just want to get some practice with Firebase.

    • @AbdirahimAli10
      @AbdirahimAli10 4 года назад

      @@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
      @MelvinAdekanye  4 года назад

      @@AbdirahimAli10 No problem

  • @rangabharath4253
    @rangabharath4253 3 года назад +1

    awesome

  • @phihoanghong2473
    @phihoanghong2473 3 года назад +1

    thanks

  • @jepfarragona
    @jepfarragona 2 года назад

    do you have an updated tutorial of this?

  • @Deeni_Akhbar
    @Deeni_Akhbar 10 месяцев назад

    its not working for me can anyone help me

  • @jgbjbcvgcug5561
    @jgbjbcvgcug5561 4 года назад +1

    How to make a chatting app for brother school

    • @MelvinAdekanye
      @MelvinAdekanye  4 года назад

      You can view a previous video I made here:
      ruclips.net/video/SQhbxPr4ETg/видео.html

  • @LoLingVo
    @LoLingVo 4 года назад

    Does that cost anything?

    • @MelvinAdekanye
      @MelvinAdekanye  4 года назад +1

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

  • @digitsmartplus7121
    @digitsmartplus7121 3 года назад

    how to create like and dislike to firebase please

    • @MelvinAdekanye
      @MelvinAdekanye  3 года назад

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

  • @Deeni_Akhbar
    @Deeni_Akhbar 7 месяцев назад

    provide source code pls

  • @kahuds
    @kahuds 4 года назад +1

    Could you release the source code?

  • @cikargt5187
    @cikargt5187 2 года назад

    it didnt write to database

  • @ebk_west
    @ebk_west 4 года назад

    it dont work

  • @codejoy9546
    @codejoy9546 4 года назад +2

    First