【问题标题】:How to push notifications with angular.js?如何使用 angular.js 推送通知?
【发布时间】:2013-12-17 13:41:52
【问题描述】:

我一直在构建一个简单的应用程序来学习 angular.js。到目前为止,我连接了 MEAN 堆栈中的所有部分,并且能够从 Mongo 保存和检索数据。

该应用程序本质上是一个待办事项列表。用户可以创建一个项目并在项目内部创建带有“待办事项”的“卡片”,然后可以将其从一个状态移动到另一个状态(“积压”、“进行中”、“完成”等)

我希望能够将通知推送给所有连接的人,告诉他们的应用需要刷新才能获取最新的待办事项。换句话说,假设用户 A 向项目 A 添加了一张新卡片,我想向所有当前正在观看项目 A 的用户发送消息,以便他们的应用程序发出项目刷新以获取最新和最好的。

关于如何进行的任何建议?我需要将哪种技术(如果有)添加到 MEAN 堆栈中才能执行此类操作?

提前致谢

【问题讨论】:

    标签: javascript mongodb angularjs push-notification mean-stack


    【解决方案1】:

    为什么不使用 HTML5 通知 API....

    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
                    });
                });
            }
    
        }
    }
    

    【讨论】:

      【解决方案2】:

      这是我们为在 PhoneGap / Cordava 中获得 AngularJS 推送通知而编写的一个模块(带有完整说明): http://www.scorchsoft.com/blog/free-angularjs-cordova-push-notification-plugin/

      只需download the example code 并安装。还包含用于在 PHP 中设置推送组件的代码。

      【讨论】:

      • 您的代码运行良好!我确实必须对 pushnotification.js 进行一些修改。 1)你需要一个空的“[]”参数在“angular.module('pushNotify',[])”和2)你在“phonegapReady().then(”......为什么不在 Github 上创建?更容易让人们使用,也更容易让其他人做出贡献。
      【解决方案3】:

      如果您已经在使用 Express,请查看 express.io

      它有很多很酷的特性,比如会话支持和将普通 HTTP 路由转发到实时路由的能力。

      【讨论】:

        【解决方案4】:

        由于您在 MEAN 堆栈上,因此 Node 中的标准建议是使用 Socket.IO API。

        他们提供了以下两种消息传递的示例(这将很容易促进您的推送消息):

        客户

        <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>
        

        服务器

        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);
          });
        });
        

        它将在可能的情况下使用 websockets,并在不支持 websocket 的浏览器中回退到 AJAX 长轮询或 Flash 轮询。

        关于与 Angular 的集成,这里有一篇关于 Socket.IO and Angular 的好博文:

        我将写关于如何集成 Socket.IO 以添加实时 AngularJS 应用程序的功能。在本教程中,我将 了解如何编写即时消息应用程序。

        【讨论】:

        • 我知道,我不应该使用 cmets 来感谢人,但我只是想说谢谢你抽出时间来回答。 :) 你为我打开了一个全新的学习世界:)
        猜你喜欢
        • 1970-01-01
        • 2015-05-12
        • 1970-01-01
        • 2010-12-17
        • 2017-11-12
        • 1970-01-01
        • 2015-08-19
        • 2011-07-26
        • 1970-01-01
        相关资源
        最近更新 更多