Show HN: Real Time Users – Add a real-time user counter to your site | Hacker News Reader

Show HN: Real Time Users – Add a real-time user counter to your site

realtimeusers.bycontrast.co

57 pointsfredrivett43 comments

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, there's a counter at the top of the page.

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

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

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

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

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

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 :)

Can I get your help in deploying socket.io to Google App Engine? Is it possible? It works locally for me but Google app engine seems to close out the websocket.

http://stackoverflow.com/questions/37401250/how-do-i-deploy-...

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?

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.

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.

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

Ohh I didn't even look in depth at the request. Thanks for the response!

I'd say ajax is probably the right way as far as polling for the data goes. Using web sockets for polling incredibly simple data doesn't seem necessary.

The benefit of using websockets is that each user's browser doesnt need to constantly be requesting the number of users from our server. If the number of users on the site hasnt changed, then with AJAX polling, its a wasted request. But with websockets there is no waste, the client gets pushed the updates when they happen from the server.

Having said all that, with the number of requests that we're getting at the moment, i dont think it makes much of a difference. Though im guessing if we got a lot more traffic, then websockets would probably reduce our server load.

Are these users or visitors? I'm not sure how this implementation would be able to distinguish between a user and a visitor of our site.

It's currently unique visitors. So, if you refresh the page, it doesn't increment the counter, as it knows you've already been logged. So it's visitors, rather than visits.

Bringing hit counters back in fashion, eh?

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

Re: https://highscore.money/

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

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.

Hey all.

Last week Marc Kohlbrugge launched 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

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

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

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

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

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

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.

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

Perfect, thanks Mosselman. Will take a look!

Not just you. This site crashed Firefox for me.

Sorry to hear that Splendor, that's properly bad. I'll look into this.

https://bycontrast.co/ is just a "hello world", is there a normal site for that

https://wearecontrast.com/

https://blog.wearecontrast.com/

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

What's the backend made of?

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

It's all, thanks

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

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.

So actually nobody bothered to Google for that ?

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

> So actually nobody bothered to Google for that?

Please don't be dismissive of new work on HN, especially in Show HNs: https://news.ycombinator.com/showhn.html.

People are allowed to make things even when other things like that already exist, and they're welcome to share them here. The spirit of Show HN is "hey, I made this," not, "I declare a claim to priority".

A better way to post a comment like this would be to mention specific other projects in the space and ask how this one differs.

There's nearly always existing solutions to problems. From my experience, if they're not well known enough, that's a good enough reason to build something. There's still space in that area.

For us, this was just a fun hackathon over the weekend. But who knows where it will go, maybe we'll continue developing it out and it'll become something more. We'll see.

You are right though! :)

i find it hard to believe google analytics is "not well known enough"...does this do something different?

This is a simple way to display the counter to your users. GA is for internal use, whereas this shows how popular your site is at any time.

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.

I think there's some value to see other options solving a similar problem, but I agree the "that already exists" mantra is pretty limited.

For a long time we never shipped anything due to the need to try and make the next Facebook in one go. It crippled our creativity.

These days we've learnt that it's ok to build and launch something that's been done before, the most important thing is learning to launch. For us we launched this to get back into the swing of launching stuff after a few months since our last launch. This is entirely an MVP, built and launched in under 15 hours total design/dev time.

Thanks for taking the time to comment Colin.

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

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.

Reply on news.ycombinator.com