web-dev-qa-db-fra.com

Comment envoyer des notifications avec angular.js?

J'ai construit une application simple pour apprendre angular.js. Jusqu'à présent, j'ai connecté toutes les pièces de la pile MEAN et je suis en mesure d'enregistrer et de récupérer des données de Mongo.

L'application est essentiellement une liste de tâches. L'utilisateur peut créer un projet et à l'intérieur du projet créer des "cartes" avec "todos" qui peuvent ensuite être déplacées d'un état à l'autre ("backlog", "en cours", "complet", etc.)

Je voudrais pouvoir envoyer des notifications à toutes les personnes connectées pour dire à leurs applications qu'une actualisation est nécessaire pour obtenir les derniers todos. En d'autres termes, disons que l'utilisateur A ajoute une nouvelle carte au projet A, je voudrais envoyer un message à tous les utilisateurs qui regardent actuellement le projet A afin que leur application émette une actualisation de projet pour obtenir la dernière et la meilleure.

Des suggestions sur la façon de procéder? Quelle technologie, le cas échéant, dois-je ajouter à la pile MEAN pour pouvoir faire quelque chose comme ça?

Merci d'avance

javascriptmongodbangularjspush-notificationmean-stack
19
Francesco Gallarotti

Comme vous êtes sur la pile MEAN, la recommandation standard dans Node serait d'utiliser l'API Socket.IO .

Ils fournissent l'exemple suivant de messagerie bidirectionnelle (ce qui faciliterait vos messages Push très facilement):

Client 

<script src="/socket.io/socket.io.js"></script>
<script>
  var socket = io.connect('http://localhost');
  socket.on('news', function (data) {
    console.log(data);
    socket.emit('my other event', { my: 'data' });
  });
</script>

Serveur 

var app = require('http').createServer(handler)
  , io = require('socket.io').listen(app)
  , fs = require('fs')

app.listen(80);

function handler (req, res) {
  fs.readFile(__dirname + '/index.html',
  function (err, data) {
    if (err) {
      res.writeHead(500);
      return res.end('Error loading index.html');
    }

    res.writeHead(200);
    res.end(data);
  });
}

io.sockets.on('connection', function (socket) {
  socket.emit('news', { hello: 'world' });
  socket.on('my other event', function (data) {
    console.log(data);
  });
});

Il utilisera les websockets dans la mesure du possible et reviendra à AJAX interrogation longue ou interrogation Flash dans les navigateurs où il n'y a pas de prise en charge de websocket.

Quant à l'intégration avec Angular, voici un bon article de blog sur Socket.IO et Angular :

Je vais écrire sur la façon d'intégrer Socket.IO pour ajouter des fonctionnalités en temps réel à une application AngularJS. Dans ce didacticiel, je vais parcourir l'écriture d'une application de messagerie instantanée.

16
Ryan Weir

Si vous travaillez déjà avec Express, vous devriez vérifier express.io .

Il a un tas de fonctionnalités intéressantes comme le support de session et la possibilité de transférer des routes HTTP normales vers des routes en temps réel.

4
McMeep

Voici un module que nous avons écrit pour que les notifications Push AngularJS fonctionnent dans PhoneGap/Cordava (avec des instructions complètes): http://www.scorchsoft.com/blog/free-angularjs-cordova-Push-notification-plugin /

Simplement téléchargez l'exemple de code et installez. Il y a aussi du code inclus pour configurer le composant push en PHP.

4
Andrew Ward

Pourquoi pas avec l'API HTML5 Notification ...

export default class NotificationService {
    /**
     * Constructor of the class.
     *
     */
    constructor() {}

    showPushNotification(title: string = '', message: string, iconPush) {
        if (window.Notification && Notification.permission !== "denied") {
            Notification.requestPermission(function(status) {
                var n = new Notification(title, {
                    body: message,
                    icon: iconPush
                });
            });
        }

    }
}
1
Christian Chiama