Notifiche

11

Percentuale Tradotta

In questo capitolo imparerai:

  • Aggiungere una collection per le notifiche per informare gli utenti delle azioni di altri utenti.
  • Imparare a condividere solo le notifiche relative a un determinato utente.
  • Saperne di più su pubblicazioni Meteor e sottoscrizioni.
  • Ora che gli utenti possono commentare sui rispettivi post, sarebbe bene far loro sapere che una conversazione è iniziata.

    Per farlo, informeremo il proprietario del post che c'è stato un commento al proprio post, e forniremo un link per visualizzare quel commento.

    Questo è il tipo di caratteristica in cui Meteor davvero eccelle: poichè Meteor è in realtime di default, mostreremo quelle notifiche istantaneamente. Non abbiamo bisogno di aspettare che l'utente aggiorni la pagina o che la controlli, possiamo semplicemente far apparire le notifiche senza dover mai scrivere codice specifico.

    Creare le notifiche

    Creeremo una notifica quando qualcuno commenta sui tuoi post. In futuro, le notifiche potrebbero essere estese per coprire molti altri scenari, ma per ora questo basterà per tenere gli utenti informati su quello che sta succedendo.

    Creiamo la nostra collezione Notifications, così come una funzione createCommentNotification che inserirà una notifica in corrispondenza di ogni nuovo commento su uno dei tuoi post:

    Notifications = new Meteor.Collection('notifications');
    
    Notifications.allow({
      update: ownsDocument
    });
    
    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
        });
      }
    };
    
    collections/notifications.js

    Così come per i post e i commenti, questa collezione Notifications sarà condivisa tra client e server. Così come abbiamo bisogno di aggiornare le notifiche, una volta che un utente le ha viste, dobbiamo anche abilitare gli aggiornamenti, assicurando come al solito di limitare le autorizzazioni di aggiornamento ai soli dati in possesso dell'utente.

    Abbiamo anche creato una semplice funzione che osserva il post che l'utente sta commentando, trova chi dovrebbe essere notificato, e inserisce una nuova notifica.

    Stiamo già creando i commenti con un metodo lato server, quindi possiamo solo estendere tale metodo in modo da chiamare la nostra funzione. Sostituiremo return Comments.insert(comment); con comment._id = Comments.insert(comment), al fine di salvare l’_id del commento appena creato in una variabile, quindi chiamare la nostra funzione createCommentNotification:

    Comments = new Meteor.Collection('comments');
    
    Meteor.methods({
      comment: function(commentAttributes) {
    
        // [...]
    
        // 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;
      }
    });
    
    collections/comments.js

    Pubblichiamo anche le notifiche e abboniamoci sul client:

    // [...]
    
    Meteor.publish('notifications', function() {
      return Notifications.find();
    });
    
    server/publications.js
    Router.configure({
      layoutTemplate: 'layout',
      loadingTemplate: 'loading',
      waitOn: function() {
        return [Meteor.subscribe('posts'), Meteor.subscribe('notifications')]
      }
    });
    
    lib/router.js

    Commit 11-1

    Added basic notifications collection.

    Visualizzare le notifiche

    Ora possiamo andare avanti e aggiungere una lista di notifiche nell’ header.

    <template name="header">
      <header class="navbar">
        <div class="navbar-inner">
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
          <a class="brand" href="{{pathFor 'postsList'}}">Microscope</a>
          <div class="nav-collapse collapse">
            <ul class="nav">
              {{#if currentUser}}
                <li>
                  <a href="{{pathFor 'postSubmit'}}">Submit Post</a>
                </li>
                <li class="dropdown">
                  {{> notifications}}
                </li>
              {{/if}}
            </ul>
            <ul class="nav pull-right">
              <li>{{> loginButtons}}</li>
            </ul>
          </div>
        </div>
      </header>
    </template>
    
    client/views/includes/header.html

    E creiamo i template notifications e notification (entrambi saranno sul file notifications.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}}
            {{> notification}}
          {{/each}}
        {{else}}
          <li><span>No Notifications</span></li>
        {{/if}}
      </ul>
    </template>
    
    <template name="notification">
      <li>
        <a href="{{notificationPostPath}}">
          <strong>{{commenterName}}</strong> commented on your post
        </a>
      </li>
    </template>
    
    client/views/notifications/notifications.html

    Possiamo vedere che il piano è per ogni notifica di contenere un link al post che è stato commentato e il nome dell'utente che l'ha commentato.

    Poi, dobbiamo essere sicuri di selezionare nel nostro manager la giusta lista di notifiche e aggiornare le notifiche come “lette” quando un utente clicca sul link alle quale puntano.

    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.notification.helpers({
      notificationPostPath: function() {
        return Router.routes.postPage.path({_id: this.postId});
      }
    });
    
    Template.notification.events({
      'click a': function() {
        Notifications.update(this._id, {$set: {read: true}});
      }
    });
    
    client/views/notifications/notifications.js

    Commit 11-2

    Display notifications in the header.

    Si può pensare che le notifiche siano non troppo differenti dagli errori, ed è vero la loro struttura è molto simile. C'é solo una differenza importante: abbiamo creato una classica collezione sincronizzata client-server. Questo significa che le nostre notifiche sono persistenti e, fin quando usiamo lo stesso account utente, esisteranno ricaricamento della pagina e su differenti dispositivi.

    Facciamo una prova: apri un altro browser (diciamo Firefox), creiamo un altro utente, e commentiamo sul post creato con l'account principale (quello che hai lasciato aperto in Chrome). Dovresti vedere qualcosa tipo questo:

    Visualizzazione delle notifiche.
    Visualizzazione delle notifiche.

    Controllo dell'accesso alle notifiche

    Le notifiche stanno funzionando bene. Tuttavia c'è solo un piccolo problema: le nostre notifiche sono pubbliche.

    Se avete ancora il secondo browser aperto, provate ad eseguire il seguente codice nella console del browser:

     Notifications.find().count();
    1
    
    Browser console

    Questo nuovo utente (quello che ha commentato) non dovrebbe ricevere alcuna notifica. La notifica che si può vedere nella collezione Notifications in realtà appartiene al nostro utente originario.

    Oltre a potenziali problemi di privacy, non possiamo permetterci di avere le notifiche di ogni utente caricate nel browser di ogni altro utente. In un sito abbastanza grande, questo potrebbe sovraccaricare la memoria disponibile del browser e iniziare a causare seri problemi di prestazioni.

    Risolviamo questo problema con le pubblicazioni. Possiamo usare le nostre pubblicazioni per specificare esattamente quale parte di una collezione vogliamo condividere con ciascun browser.

    Per fare questo, abbiamo bisogno di restituire nella nostra pubblicazione un cursore diverso da Notifications.find(). Vale a dire, vogliamo restituire un cursore che corrisponde alle notifiche dell'utente corrente.

    Farlo è abbastanza semplice, visto che la funzione publish dispone dell’_id dell'utente corrente in this.userId:

    Meteor.publish('notifications', function() {
      return Notifications.find({userId: this.userId});
    });
    
    server/publications.js

    Commit 11-3

    Only sync notifications that are relevant to the user.

    Ora se controlliamo le nostre due finestre del browser, dovremmo vedere due diverse collezioni per le notifiche:

     Notifications.find().count();
    1
    
    Browser console (user 1)
     Notifications.find().count();
    0
    
    Browser console (user 2)

    In realtà, l'elenco delle notifiche dovrebbe anche cambiare a seconda che si sia autenticati o meno. Questo perché le pubblicazioni automaticamente ri-pubblicano ogni volta che l'account utente cambia.

    La nostra applicazione sta diventando sempre più funzionale, e via via che gli utenti si registrano e iniziano a postare link si rischia di finire con una homepage senza fine. Affronteremo questo problema nel prossimo capitolo implementando la paginazione.