Invoke a client js function in Meteor after getting results from the server

Question

I\'m trying to see how can I invoke a js function after the client gets a result from a Meteor method call. The only thing I was able to get is to invoke the function

Answer 1

Currently you can't broadcast a method call to all clients directly. At least as far as I can tell. But a work around would be to create a collection called Alerts and monitor it for changes. Then when you want to send a message to all your users you can change the document in Alerts:

Client:

Alerts = new Meteor.Collection("alerts")

Meteor.autosubscribe(function() {
  Alerts.find().observe({
    added: function(item){ 
      alert(item.message);
    }
  });
});

Server:

Alerts = new Meteor.Collection("alerts")

Meteor.publish("alerts", function(){
 Alerts.find();
});

Alerts.remove({}); // remove all
Alerts.insert({message: "Some message to show on every client."});

Answer 2

Another option is using Meteor Stream package which purpose is to avoid using a mongodb collection on the server side. It does supports client to clients, server to clients, client to server AND server to servers messaging, including a support for Meteor Cluster

If you want to stay with meteor only using collections, the following code allows you to either broadcast a message from the client to all the clients or a message from the server to all the subscribed clients. Just use this mechanism to then fire a function on the client side once the right message is received. The code is made in such a way that you will never have useless items remaining into the collection.

Messages = new Meteor.Collection("messages");

if (Meteor.isClient) {

    Meteor.subscribe("messages");

    var query = Messages.find({});
    var handle = query.observe({
        added: function(document)
        {
            console.log(document.message);
        }
    });

    // Test the mechanism from the client side
    Meteor.call("client talked");
}

if (Meteor.isServer) {
    Meteor.startup(function() {
        Messages.remove({});
    });

    Meteor.publish("messages", function()
    {
        // you might add an optional filter in order to broadcast only the messages you want to the client
        return Messages.find();
    });

    function talk(message)
    {
                    var id = Messages.insert({"message":message});
                    Messages.remove(id);
    }

    Meteor.methods(
            {
                talk: function(message)
                {
                    // you might filter here if the clients can talk using this.userId
                    talk(message);
                }
            });

    // test the mechanism from the server side
    talk("server talked");
}

Answer 3

I like what Zeke said, but for people who uses Meteor 0.5.0+, use Deps.autorun instead of autosubscribe... details at: https://groups.google.com/forum/#!topic/meteor-core/mTa81RLvhbY and http://www.meteor.com/blog/2013/02/14/meteor-055-devshop-code-and-community-contributions

Answer 4

I simple approach to call a JavaScript client-side function would be to add a script tag in your html template that is bound by your collection. Anytime a new item is inserted, this tag would be inserted into the client would run your function. I have a collection call uploads with some properties such as name. The following template triggers drawpoints() client-side function upon receipt of a new item in Uploads collection:

    {{#each uploads}}
        <tr>
            <td>{{name}}</td>
            <td>
                <div class="alert alert-success"><a href="{{url download=true}}">Download Here</a></div>
            </td>
        </tr>
        <script>drawpoints();</script>
    {{/each}}