How do I display this code in HTML?

Question

I'm trying to make a sign that says how many users are currently on my website at a time using Javascript for my Meteor app (I don't know if that makes a difference). I have this code for tracking how many users are on the site at a time:

Presences.find({online: true}).count();

But how do I display this on my website with HTML? I think with the way Meteor is organized it will make things more difficult.

Oh and I should also mention that I have the iron-router package installed in this project so the templates are a little different. This may affect the code?

score 4 · Accepted Answer · answered Apr 02 '14 at 00:21

4

Its a bit tricky, you need a custom publish function and a virtual collection on the client side (userCount)

This only publishes the count of the number of users online, and changes it as it changes using the Observer query.

This way you don't have to publish all the documents of the users who are online :) so as you have more users it wont slow down your client as much.

Server side code

Meteor.publish("userCount", function() {

    var self = this;
    var presences = Presences.find({online: true});

    var count = presences.count();

    var handle = presences.observe({
        added: function() {
            if(!handle) return;
            count++;
            self.changed('userCount', 'count', {count: count});
        },
        removed: function() {
            count--;
            self.changed('userCount', 'count', {count: count});
        }
     });

     self.added('userCount', 'count', {count: count});

     self.onStop(function() {
         handle.stop();
     });

     this.ready();

});

Client side code

var userCount = new Meteor.Collection("userCount");

Meteor.subscribe("userCount");

HTML (example)

<template name="example">
{{userCount}}
</template>

Template Helper

Template.example.userCount = function() {
    var count_doc = userCount.findOne({_id:'count'});

    return (count_doc && count_doc.count) || 0;
}

answered Apr 02 '14 at 00:21

Tarang

75,157
39
215
276

It kind of works but the count stays at 0 no matter how many users are logged on. Do you know why this is? – 5AMWE5T Apr 02 '14 at 00:44
Looks like this method is more efficient than the one below, using template helper, since in this code the server are not recounting the users online all the time but just adding or subtracting from the total, is that correct? – Fabio Apr 02 '14 at 05:06
@5AMWE5T I corrected the code shortly after, just a small typo near the `||`. – Tarang Apr 02 '14 at 05:55
1

@fabio Its more efficient in two ways. Only the number is sent down to the client, so you dont have to send 50 documents if there are 50 users on, secondly it doesnt have to send info on what info has changed on each of those 50 documents when a user's other data changes. So the overhead is far far less – Tarang Apr 02 '14 at 05:57
@Akshat Thanks! If anyone has problem of understanding Akshat's answer, then take a look at http://stackoverflow.com/questions/10565654/how-does-the-messages-count-example-in-meteor-docs-work – Kuba Wyrobek Apr 02 '14 at 09:39

Kuba Wyrobek · Answer 2 · 2014-04-02T09:42:05.837

2

Simple, but NOT efficient solution:

PresenceTemplate.js:

Template.PresenceTemplate.helpers({
    userCounts:function(){
        return Presences.find({online: true}).count();
    }
})

PresenceTemplate.html:

<template name="PresenceTemplate">
   {{userCounts}}
</template>

edited Apr 02 '14 at 09:42

answered Apr 01 '14 at 22:38

Kuba Wyrobek

5,273
1
24
26

How do I display this code in HTML?

2 Answers2

Simple, but NOT efficient solution: