11-notifications.md.erb

---
title: Notifiche
slug: notifications
date: 0011/01/01
number: 11
contents: 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.
paragraphs: 25
---

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:

~~~js
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
    });
  }
};
~~~
<%= caption "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`:

~~~js
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;
  }
});
~~~
<%= caption "collections/comments.js" %>
<%= highlight "8~14" %>

Pubblichiamo anche le notifiche e abboniamoci sul client:

~~~js
// [...]

Meteor.publish('notifications', function() {
  return Notifications.find();
});
~~~
<%= caption "server/publications.js" %>

~~~js
Router.configure({
  layoutTemplate: 'layout',
  loadingTemplate: 'loading',
  waitOn: function() {
    return [Meteor.subscribe('posts'), Meteor.subscribe('notifications')]
  }
});
~~~
<%= caption "lib/router.js" %>
<%= highlight "5" %>

<%= commit "11-1", "Added basic notifications collection." %>

### Visualizzare le notifiche

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

~~~html
<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>
~~~
<%= caption "client/views/includes/header.html" %>
<%= highlight "12~19" %>

E creiamo i template `notifications` e `notification` (entrambi saranno sul file `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}}
        {{> 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>
~~~
<%= caption "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.

~~~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.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}});
  }
});
~~~
<%= caption "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:

<%= screenshot "11-1", "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:

~~~js
❯ Notifications.find().count();
1
~~~
<%= caption "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`:

~~~js
Meteor.publish('notifications', function() {
  return Notifications.find({userId: this.userId});
});
~~~
<%= caption "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:

~~~js
❯ Notifications.find().count();
1
~~~
<%= caption "Browser console (user 1)" %>

~~~js
❯ Notifications.find().count();
0
~~~
<%= caption "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.