19

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

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

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

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

提前致谢

4

4 回答 4

16

由于您在 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 和 Angular的好博文:

我将撰写有关如何集成 Socket.IO 以向 AngularJS 应用程序添加实时功能的文章。在本教程中,我将介绍如何编写一个即时消息应用程序。

于 2013-12-02T07:11:12.517 回答
4

如果您已经在使用 Express,则应该查看express.io

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

于 2014-04-06T14:21:05.940 回答
4

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

只需下载示例代码并安装。还包含用于在 PHP 中设置推送组件的代码。

于 2014-06-16T17:42:54.603 回答
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
                });
            });
        }

    }
}
于 2017-01-25T17:17:37.690 回答