官术网_书友最值得收藏!

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.
主站蜘蛛池模板: 满洲里市| 湖南省| 衡水市| 绥滨县| 长海县| 济南市| 娱乐| 湘阴县| 宜兴市| 土默特右旗| 灵川县| 夏邑县| 托克逊县| 阳泉市| 唐海县| 孟州市| 兰坪| 舞钢市| 德安县| 西充县| 道孚县| 横山县| 成武县| 郴州市| 盐边县| 河间市| 三亚市| 安徽省| 南乐县| 兴隆县| 丽江市| 昭平县| 昌邑市| 惠来县| 彩票| 江城| 井研县| 抚松县| 正蓝旗| 靖远县| 玉门市|