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

一尘不染

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

angularjs

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

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

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

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

提前致谢

阅读 253

2020-07-04

共1个答案

一尘不染

由于您使用的是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);
  });
});

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

至于与Angular的集成，这是一篇关于Socket.IO和Angular的不错的博客文章：

我将写有关如何集成Socket.IO以便向AngularJS应用程序添加实时功能的文章。在本教程中，我将逐步编写一个即时消息传递应用程序。

2020-07-04