How to make a Realtime View Counter using JavaScript & Firebase

แชร์
ฝัง
  • เผยแพร่เมื่อ 14 ธ.ค. 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

  • @ebk_west
    @ebk_west 4 ปีที่แล้ว +4

    Can u put the source code

  • @Deeni_Akhbar
    @Deeni_Akhbar ปีที่แล้ว

    its not working for me can anyone help me

  • @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

  • @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

  • @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.

  • @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 :/

  • @jepfarragona
    @jepfarragona 2 ปีที่แล้ว

    do you have an updated tutorial of this?

  • @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

  • @sherbertlemons7393
    @sherbertlemons7393 2 ปีที่แล้ว

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

    • @MelvinAdekanye
      @MelvinAdekanye  2 ปีที่แล้ว

      Oh, okay. Thanks for the heads up.

  • @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

  • @phihoanghong2473
    @phihoanghong2473 3 ปีที่แล้ว +1

    thanks

  • @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 TH-cam. 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

  • @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:
      th-cam.com/video/SQhbxPr4ETg/w-d-xo.html

  • @dhandayalprasad2267
    @dhandayalprasad2267 4 ปีที่แล้ว +1

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

  • @thedelanyo
    @thedelanyo 2 ปีที่แล้ว +1

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

  • @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.

  • @digitsmartplus7121
    @digitsmartplus7121 4 ปีที่แล้ว

    how to create like and dislike to firebase please

    • @MelvinAdekanye
      @MelvinAdekanye  4 ปีที่แล้ว

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

  • @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???

  • @Deeni_Akhbar
    @Deeni_Akhbar 10 หลายเดือนก่อน

    provide source code pls

  • @cikargt5187
    @cikargt5187 2 ปีที่แล้ว

    it didnt write to database

    • @MelvinAdekanye
      @MelvinAdekanye  2 ปีที่แล้ว

      Do you have any errors in your console?

  • @rangabharath4253
    @rangabharath4253 3 ปีที่แล้ว +1

    awesome

  • @kahuds
    @kahuds 4 ปีที่แล้ว +1

    Could you release the source code?

    • @MelvinAdekanye
      @MelvinAdekanye  4 ปีที่แล้ว +1

      The video is the source code. 🤣

  • @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.

  • @ebk_west
    @ebk_west 4 ปีที่แล้ว

    it dont work

    • @ebk_west
      @ebk_west 4 ปีที่แล้ว

      pls help

  • @codejoy9546
    @codejoy9546 4 ปีที่แล้ว +2

    First