
Show HN: Real Time Users – Add a real-time user counter to your site - fredrivett
https://realtimeusers.bycontrast.co/?ref=hackernews
======
nevi-me
Why not just use websockets? I use socket.io on my site. I keep track of
socket IDs in memory, if a connection is lost, I get a disconnect event, and
vice versa. Socket events are sent to users when the number changes.

I manage the frequency of socket emits using RxJS, to prevent sending too many
changes to users.

[https://movinggauteng.co.za](https://movinggauteng.co.za), there's a counter
at the top of the page.

EDIT: Only saw a comment about why the OP used Ajax after posting this.

~~~
simplify
Websockets would overkill for this kind of feature – you don't need realtime
two-way communication. Server sent events (SSE) [1] are a much better
alternative; it's a simple, long-lived HTTP request where the server can push
data to the client. They're built into most browsers [2], and the client-side
polyfill [3] is small (2kb gzipped).

[1] [https://developer.mozilla.org/en-US/docs/Web/API/Server-
sent...](https://developer.mozilla.org/en-US/docs/Web/API/Server-
sent_events/Using_server-sent_events)

[2] [http://caniuse.com/#search=server-
sent%20events](http://caniuse.com/#search=server-sent%20events)

[3]
[https://github.com/Yaffle/EventSource](https://github.com/Yaffle/EventSource)

~~~
nevi-me
Fair enough, but what happens if I open a page, send an Ajax call to say "add
1 user", then promptly close that page? I don't know what OP is doing to
detect that a user is no longer on the site.

The reasons why I used WebSockets are that I get a disconnect event
immediately, and I was already using WebSockets for other features on the site

~~~
simplify
It's a long-lived HTTP request. The server automatically knows if a client
disconnects; that's a feature built into all HTTP server libraries everywhere.

But yes, if you're already using websockets for other features, there's no
reason not to continue to use them, as you explained :)

------
subie
Is using ajax calls on a loop the best way to track users on a site? I'm
curious because when I look at pages using google analytics I don't see any
repeating requests in the network console. Does google mask the requests or
use some other protocol?

~~~
mikeaag
Hey subie,

I'm one of the creators of Real Time Users.

Only 1 AJAX call get sent to 'track' you on the site for each page load. The
AJAX calls you're seeing are asking the server for the latest number of users
on the site so that we can update the value displayed.

This isnt the most efficient way of doing this, as if the site has a low
number of users, the count will return the same number most of the time. A
better way would be to use websockets, however i only have limited knowledge
of using websockets so we decided it was best to just stick to the tech we
knew (Especially as we built it in a weekend).

If people start using this more, we might update it to use websockets though.

Hope that answers your questions. Let me know if theres anything else you'd
like to know.

~~~
nevi-me
I commented separately, I use sockets for this. I don't know about libraries
for PHP as I haven't used it in a while, but most socket libraries make it
easy to implement something.

My implementation is in-memory, and the nice thing about it is that if fit
example my Node.js app restarts, all active users will get disconnected, and
they will emit a connection event, allowing me to get the count of online
users again.

I can extract relevant code and share it if it'd help.

~~~
mikeaag
Hi Nevi-me

I've come across Socket.io before, and played around with pusher as well. And
if i remember correctly, Laravel has built in helpers for sending websocket
messages.

My main issue is actually running the node.js application, as its something
i've not done before. That was another reason for not using websockets. Wanted
to remove as many barriers that might slow us down or stop us from launching,
so we stuck with what we knew.

I'm sure i'll update this at some point to use websockets though, gotta learn
how to deploy node.js sites at some point :D

------
Olscore
Bringing hit counters back in fashion, eh?

~~~
fredrivett
We saw 2 people request some form of site counter in the past few weeks, which
was enough for us to spend a weekend hacking on it.

Who knows whether anyone will actually use it.

There's also a leaderboard, to track who does.

[https://realtimeusers.bycontrast.co/leaderboard](https://realtimeusers.bycontrast.co/leaderboard)

~~~
cdubzzz
Re: [https://highscore.money/](https://highscore.money/)

Just like the million dollar homepage guy - why didn't I think of that!?

~~~
fredrivett
Haha yep! Its a cool idea. Marc's got a good network though, which helps when
you're starting out with a product like that. Gotta avoid the tumbleweed
effect at all costs.

------
fredrivett
Hey all.

Last week Marc Kohlbrugge launched
[https://highscore.money/](https://highscore.money/). Following that, he sent
out a tweet, asking if anyone knew of a good real time user counter to add to
his site.

[https://twitter.com/marckohlbrugge/status/737388891246891008](https://twitter.com/marckohlbrugge/status/737388891246891008)

No-one did, so we made one.

Real Time Users is just that. We made it this weekend. I wrote a quick post
introducing it, so feel free to look at that for more details.

[https://blog.wearecontrast.com/make-stuff-
ff82f78cf5a9#.s8mg...](https://blog.wearecontrast.com/make-stuff-
ff82f78cf5a9#.s8mggqigh)

Feel free to ask any questions, I'll be about all day.

------
codepie
Is it just me or this website is heavy on CPU? Increased my CPU usage by 50%.

~~~
fredrivett
Hmm, could be. It might be the CSS animations on the numbers on the homepage
there. I'll look into it. Thanks for the heads up

~~~
oneloop
Do one thing right. Get rid of anything that's not essential, like animations.

~~~
fredrivett
I think there's room for adding style around substance, but not if it causes
issues. I wasn't aware of the performance issues, but now I know I'll be sure
to look at this when I get home from work.

~~~
mosselman
You could look at moving the animations to the GPU.

You could read this ( I just duckduckgoed this, but it looked like what I
remember it involves to do this).

[http://blog.teamtreehouse.com/increase-your-sites-
performanc...](http://blog.teamtreehouse.com/increase-your-sites-performance-
with-hardware-accelerated-css)

~~~
fredrivett
Perfect, thanks Mosselman. Will take a look!

------
pech0rin
[https://bycontrast.co/](https://bycontrast.co/) is just a "hello world", is
there a normal site for that

~~~
dyscrete
[https://wearecontrast.com/](https://wearecontrast.com/)

[https://blog.wearecontrast.com/](https://blog.wearecontrast.com/)

~~~
fredrivett
Yep, those are the main sites. We only bought bycontrast.co at the weekend,
need to setup a redirect there! :)

------
shujito
What's the backend made of?

~~~
mikeaag
Hey shujito, It's built with PHP using Laravel. And the Database is MariaDB.

Let me know if theres anything else you'd like to know

~~~
shujito
It's all, thanks

------
llamataboot
No link to the code on github? (or gitlab or wherever?)

~~~
fredrivett
Not currently, but we may do that soon. Having only built this last weekend we
haven't stopped to consider the options around open sourcing yet.

------
Gys
So actually nobody bothered to Google for that ?

[https://www.google.com/search?q=user+counter](https://www.google.com/search?q=user+counter)
brings many websites offering this in various fonts, sizes and colors.

But then again, 'good' can be very subjective...

~~~
colinbartlett
It's very frustrating to me when people here take the time to build something
and then solicit feedback from HN, only to have someone immediately post "That
already exists".

Sure, it can be nice to solicit explanations of differentiation from the OP to
help understand the use cases, but these kind of sweeping comments aren't
helpful to anyone.

~~~
Gys
The OP explicitly says nobody could find a service like this. I was very
surprised, did some research and responded to that.

I think its always good to do some fact checking...

~~~
oneeyedpigeon
The trouble is, you didn't say any of that in your original comment, so it was
easier to misunderstand your intentions than not. OP is probably aware of the
alternatives, but somewhere along the line, none of them fulfil all their
requirements.

