forked from DiscoverMeteor/DiscoverMeteor_De
-
Notifications
You must be signed in to change notification settings - Fork 0
/
07s-latency-compensation.md.erb
133 lines (93 loc) · 2.52 KB
/
07s-latency-compensation.md.erb
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
---
title: Latency Compensation
slug: latency-compensation
date: 0007/01/02
number: 7.5
sidebar: true
contents: Understand latency compensation.|Slow your app down and see what's going on.|Learn how Meteor Methods call each other.
paragraphs: 28
---
////
<%= diagram "latency1", "Without latency compensation", "pull-right" %>
////
////
- *+0ms:* ////
- *+200ms:* ////
- *+500ms:* ////
If this were the way Meteor operated, then there'd be a short lag between performing such actions and seeing the results (that lag being more or less noticeable depending on how close you were to the server). We can't have that in a modern web application!
### Latency Compensation
<%= diagram "latency2", "With latency compensation", "pull-right" %>
////
////
- *+0ms:* ////
- *+0ms:* ////
- *+200ms:* ////
- *+500ms:* ////
////
### Observing Latency Compensation
////
////
////
~~~js
Meteor.methods({
post: function(postAttributes) {
// […]
// pick out the whitelisted keys
var post = _.extend(_.pick(postAttributes, 'url', 'message'), {
title: postAttributes.title + (this.isSimulation ? '(client)' : '(server)'),
userId: user._id,
author: user.username,
submitted: new Date().getTime()
});
// wait for 5 seconds
if (! this.isSimulation) {
var Future = Npm.require('fibers/future');
var future = new Future();
Meteor.setTimeout(function() {
future.return();
}, 5 * 1000);
future.wait();
}
var postId = Posts.insert(post);
return postId;
}
});
~~~
<%= caption "collections/posts.js" %>
<%= highlight "6, 7, 13~22" %>
////
////
////
~~~js
Template.postSubmit.events({
'submit form': function(event) {
event.preventDefault();
var post = {
url: $(event.target).find('[name=url]').val(),
title: $(event.target).find('[name=title]').val(),
message: $(event.target).find('[name=message]').val()
}
Meteor.call('post', post, function(error, id) {
if (error)
return alert(error.reason);
});
Router.go('postsList');
}
});
~~~
<%= caption "client/views/posts/post_submit.js" %>
<%= highlight "15" %>
<%= scommit "7-5-1", "Demonstrate the order that posts appear using a sleep." %>
////
<%= screenshot "s5-1", "Our post as first stored in the client collection" %>
////
<%= screenshot "s5-2", "Our post once the client receives the update from the server collection" %>
### Client Collection Methods
////
////
1. ////
2. ////
### Methods Calling Methods
////
////
////