如何使用 angular.js 推送通知？

Posted 2023-02-23

【中文标题】如何使用 angular.js 推送通知？

【英文标题】：How to push notifications with angular.js?

【发布时间】：2013-12-17 13:41:52

【问题描述】：

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

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

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

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

提前致谢

【参考方案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 来感谢人，但我只是想说谢谢你抽出时间来回答。 :) 你为我打开了一个全新的学习世界:)