Publishing and Subscribing

The way we can get real-time updates from the server is through the Publishing and Subscribing messaging pattern of Meteor.

The server publishes an event and on the other side, the client subscribes to that event and listens to data changes.

On the server, in our case in the server/main.js file, we can publish an event in a very simple way:

  import { Meteor } from 'meteor/meteor';
  Meteor.startup(() => {
     // code to run on server at startup
 Meteor.publish('time', function() {
     ...
    });
});

The publish function takes two arguments: name of the collection and a callback function that will be executed on each subscription from the client.

On the client, we can subscribe to it as shown here:

Meteor.subscribe('time');

All updates from the server will push an update to Minimongo collection on the client. The subscriber can also pass a parameter as a second argument and/or have subscription handlers as callback functions:

Meteor.subscribe('time', id);

Also, the subscription handlers look like this:

Meteor.subscribe('time', {

 //called when data is availble in  Minimongo
   onReady: function() {
   },
    // called on error
   onError: function() {
   },
   // called when the subcription is stopped. 
    onStop: function () {
   }
});

Here's the server-side code of the subscription:

import { Meteor } from 'meteor/meteor';
import { Random } from 'meteor/random';

Meteor.startup(() => {
// code to run on server 

at startup
Meteor.publish('time', function() {
   let self = this;
   const newTime = () => {
   let 

id = Random.id();
   let time = {
    time: new Date().toString()
 }
   self.added

('time', id, time);
}
Meteor.setInterval(function() {
    newTime();
  }, 1000);
});

What we did is covered in the following points:

1. We created a publisher with a collection called time.
2. We used one of the Meteor's timer functions, setInteval(), to call a newTime() function every 1000 milliseconds or one second.
3. In the newTime() function, we created an ID of the document and the document as the current time.
4. We then called the added method, which will notify the subscriber that we added a new document to the time collection.

The client-side code is as follows:

Time = new Mongo.Collection('time');
class Timer extends React.Component {
     constructor(props) 

{
     super(props);
    Meteor.subscribe('time');
}
render() {
   return 

 <TimerDisplay time={this.props.time}/>;
  }
}
export default createContainer(() => {
 return 

{
    time: Time.find().fetch()
  };
}, Timer);

This is what we did here:

1. We created a collection called time. The collection is created locally in Minimongo. If we don't create the same collection on the server, it will be only in the browser's memory.
2. In the class constructor, we subscribed to the dataset time published on the server.
3. In the render method, we rendered the TimerDisplay component as we passed time as props.
4. At the end, we created a Meteor React container that listens to data changes, fetches the latest data from the collection, and passes it down to the component as props.