Live Hit Counter

A live JPEG or MJPEG hit counter that you can embed in your website.


How it Works

  1. Each request serves an image that displays the number of requests made to that specific image.
  2. You can choose either a live or static image. The live image is served as mjpeg, a format which can be updated continuously after the page load is complete.
  3. The image can be customized by changing the default font, and colors.

Installation

You can install the source for this server by downloading this repository, and running
npm install

Start the server with npm start -- the port is defined in index.js.


Usage

Each instance of the counter you embed on a website should have a unique ID. It can be anything (up to 20 characters) -- we don't pick that for you. It could be something programmatic like md5(location.hostname) a GUID, numeral Id (123), or any other url-safe string you like (like foo%20bar).

Live Code

Enter an Id:
This updates the examples below

Usage Example

<img src="http://localhost:5000/live/123" height="40" />

Customization

You can customize the widget by passing parameters, like:

<img src="http://localhost:5000/live/123?font=Futura&color=black&bg=white" height="40" />

Embedding a static image

If you don't want to use a live image, you can use a static one, like:

<img src="http://localhost:5000/static/123" height="40" />

Demo

You can increment the counter on this page in real-time by visiting: This static counter. The counter on this page will update in real-time without a refresh.



Inspired by these blog posts:

Live server push without Javascript [discuss on HN] -- Serverless Hit Counter [discuss on HN]


This page has been visited this many times:

Hit Counter
Copied