11a-通知 · Meteor

--- title: Notifications slug: notifications date: 0011/01/01 number: 11 points: 10 photoUrl: http://www.flickr.com/photos/ikewinski/8719868039/ photoAuthor: Mike Lewinski contents: 添加一個 notifications 集合通知當前用戶其他用戶的操作。|學習如何只共享相關 notifications 給特定用戶。|學習 Meteor 的發布和訂閱 paragraphs: 25 --- 現在用戶們可以給帖子添加評論了，讓他們互相知道討論已經開始了是個好主意。我們將通知帖子的作者已經有用戶在他的帖子上添加了評論，并且提供一個鏈接可以看到評論。這是 Meteor 真正閃光的特性之一：因為 Meteor 在默認情況下是實時的，我們會_瞬時_看到這些 notifications。不需要用戶去刷新頁面或者做其他檢查,我們不需要寫任何特殊代碼就可以得到一個簡單的 notifications 彈出框。 ### 生成 Notifications 當有人在你的帖子上添加評論時我們將生成一個 notification。在后面，notifications 會擴展覆蓋很多其他情況，但是目前讓用戶知道正在發生什么就足夠了。讓我們先創建一個 `Notifications` 集合，和一個方法 `createCommentNotification`，當有人在你的帖子下添加評論時該方法會添加一個 notification 到集合。因為我們將從客戶端更新 notifications, 我們需要確定 `allow` 方法是防彈的。我們檢查如下內容： - 用戶是文檔的創建者才能調用 `update` 方法 - 用戶只更新一個屬性 - 更新的屬性名字是 `read` ~~~js Notifications = new Mongo.Collection('notifications'); Notifications.allow({ update: function(userId, doc, fieldNames) { return ownsDocument(userId, doc) && fieldNames.length === 1 && fieldNames[0] === 'read'; } }); createCommentNotification = function(comment) { var post = Posts.findOne(comment.postId); if (comment.userId !== post.userId) { Notifications.insert({ userId: post.userId, postId: post._id, commentId: comment._id, commenterName: comment.author, read: false }); } }; ~~~ <%= caption "lib/collections/notifications.js" %> 和帖子和評論一樣，`Notifications` 集合也是在服務器端和客戶端共享的。用戶看完 notifications 后，我們需要更新他們，因此需要允許更新操作。和其他部分一樣只有擁有 notification 的用戶才允許更新操作。我們寫了個簡單的程序用來當用戶給帖子添加評論時找到需要通知的用戶，并插入一個新的 notification。我們已經在服務器端方法創建了評論對象，我們用 `comment._id = Comments.insert(comment)` 來替換 `return Comments.insert(comment);`。這樣就能在評論對象中保存 `_id`, 然后調用 `createCommentNotification` 方法: ~~~js Comments = new Mongo.Collection('comments'); Meteor.methods({ commentInsert: function(commentAttributes) { //... comment = _.extend(commentAttributes, { userId: user._id, author: user.username, submitted: new Date() }); // update the post with the number of comments Posts.update(comment.postId, {$inc: {commentsCount: 1}}); // create the comment, save the id comment._id = Comments.insert(comment); // now create a notification, informing the user that there's been a comment createCommentNotification(comment); return comment._id; } }); ~~~ <%= caption "lib/collections/comments.js" %> <%= highlight "17~123" %> 接下來發布 notifications: ~~~js Meteor.publish('posts', function() { return Posts.find(); }); Meteor.publish('comments', function(postId) { check(postId, String); return Comments.find({postId: postId}); }); Meteor.publish('notifications', function() { return Notifications.find(); }); ~~~ <%= caption "server/publications.js" %> <%= highlight "10~12" %> 在客戶端訂閱 notifications: ~~~js Router.configure({ layoutTemplate: 'layout', loadingTemplate: 'loading', notFoundTemplate: 'notFound', waitOn: function() { return [Meteor.subscribe('posts'), Meteor.subscribe('notifications')] } }); ~~~ <%= caption "lib/router.js" %> <%= highlight "6" %> <%= commit "11-1", "Added basic notifications collection." %> ### 顯示 Notifications 現在我們在 header 中添加一個 notifications 列表。 ~~~html <template name="header"> <nav class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navigation"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="{{pathFor 'postsList'}}">Microscope</a> </div> <div class="collapse navbar-collapse" id="navigation"> <ul class="nav navbar-nav"> {{#if currentUser}} <li> <a href="{{pathFor 'postSubmit'}}">Submit Post</a> </li> <li class="dropdown"> {{> notifications}} </li> {{/if}} </ul> <ul class="nav navbar-nav navbar-right"> {{> loginButtons}} </ul> </div> </nav> </template> ~~~ <%= caption "client/templates/includes/header.html" %> <%= highlight "15~22" %> 接下來創建 `notifications` 和 `notificationItem` 模板 (兩個模板都在 `notifications.html` 文件中): ~~~html <template name="notifications"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Notifications {{#if notificationCount}} <span class="badge badge-inverse">{{notificationCount}}</span> {{/if}} <b class="caret"></b> </a> <ul class="notification dropdown-menu"> {{#if notificationCount}} {{#each notifications}} {{> notificationItem}} {{/each}} {{else}} <li><span>No Notifications</span></li> {{/if}} </ul> </template> <template name="notificationItem"> <li> <a href="{{notificationPostPath}}"> <strong>{{commenterName}}</strong> commented on your post </a> </li> </template> ~~~ <%= caption "client/templates/notifications/notifications.html" %> 我們可以看到每個 notification 有一個指向帖子的鏈接，而且包含注釋作者的名字。接下來我們需要確定在 helper 中選擇了正確的 notifications 列表，并且在用戶點擊鏈接后將 notifications 標記為已讀。 ~~~js Template.notifications.helpers({ notifications: function() { return Notifications.find({userId: Meteor.userId(), read: false}); }, notificationCount: function(){ return Notifications.find({userId: Meteor.userId(), read: false}).count(); } }); Template.notificationItem.helpers({ notificationPostPath: function() { return Router.routes.postPage.path({_id: this.postId}); } }); Template.notificationItem.events({ 'click a': function() { Notifications.update(this._id, {$set: {read: true}}); } }); ~~~ <%= caption "client/templates/notifications/notifications.js" %> <%= commit "11-2", "Display notifications in the header." %> 你可能覺得 notifications 和 errors 很像，是的從結構上看他們很相似。但有一點不同: 我們為 notification 創建了一個集合。這意味著 notification 是*持久化*的，他對于同一用戶不論瀏覽器刷新還是跨設備都是存在的。試一下: 打開一個新的瀏覽器 (比如 Firefox), 然后創建一個新用戶, 然后在主用戶的帖子下發表一個評論 (在 Chrome 中)。你將看到如下： <%= screenshot "11-1", "Displaying notifications." %> ### 控制 notifications 的訪問權限 Notifications 工作的很好。然后這有一個小問題：所有人都能看到我們的 notifications。如果你的瀏覽器還開著，試一下在瀏覽器 console 中輸入以下 js 代碼： ~~~js ? Notifications.find().count(); 1 ~~~ <%= caption "Browser console" %> 一個新的用戶 (當有帖子被評論時) 不該收到任何 notifications. `Notifications` 集合中的內容實際上屬于以前的用戶。除了可能的隱私問題外，我們不能讓瀏覽器顯示每條 notifications 的原因是. 對于一個足夠規模的網站，這么做會很容易耗盡瀏覽器內存，并帶來嚴重的性能問題。我們通過 **publications** 來解決這個問題。我們可以通過 publications 來精確的指定哪部分集合我們想共享給其他用戶。為了實現這個，我們需要在 publication 中返回不同的 cursor 而不是使用 `Notifications.find()`。換句話說，我們返回的 cursor 是和當前用戶的 notificatons 相關的。這么做足夠直接，因為 `publish` 函數有當前用戶的 `_id`, 它存在于 `this.userId` 中： ~~~js Meteor.publish('notifications', function() { return Notifications.find({userId: this.userId, read: false}); }); ~~~ <%= caption "server/publications.js" %> <%= commit "11-3", "僅僅同步與當前用戶有關的通知。" %> 現在看一下我們的兩個瀏覽器窗口，我們會看到兩個不同的 notifications 集合。 ~~~js ? Notifications.find().count(); 1 ~~~ <%= caption "Browser console (user 1)" %> ~~~js ? Notifications.find().count(); 0 ~~~ <%= caption "Browser console (user 2)" %> 實際上，當你登錄和登出時 Notifications 集合都會變化。這是因為當賬戶變化時 publications 會自動重新發布。我們的 app 功能越來越完善，當越來越多的用戶發帖時，我們的首頁會無限長。下一章我們通過分頁來解決這個問題。