- Build Applications with Meteor
- Dobrin Ganev
- 484字
- 2021-07-09 19:48:55
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:
- We created a publisher with a collection called time.
- We used one of the Meteor's timer functions, setInteval(), to call a newTime() function every 1000 milliseconds or one second.
- In the newTime() function, we created an ID of the document and the document as the current time.
- 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:
- 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.
- In the class constructor, we subscribed to the dataset time published on the server.
- In the render method, we rendered the TimerDisplay component as we passed time as props.
- 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.
- OpenStack Cloud Computing Cookbook(Third Edition)
- Objective-C Memory Management Essentials
- GitLab Cookbook
- Java 9 Concurrency Cookbook(Second Edition)
- Vue.js前端開發基礎與項目實戰
- SQL for Data Analytics
- Learn WebAssembly
- 大數據分析與應用實戰:統計機器學習之數據導向編程
- Python+Tableau數據可視化之美
- FPGA嵌入式項目開發實戰
- PHP Microservices
- Java程序設計入門(第2版)
- 現代C++語言核心特性解析
- 小學生C++趣味編程從入門到精通
- WCF編程(第2版)