如何使用 angular.js 推送通知? [英] How to push notifications with angular.js?

问题描述

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

I have been building a simple application to learn angular.js. So far I hooked up all the pieces in the MEAN stack and I am able to save and retrieve data from Mongo.

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

The app is essentially a todo list. The user can create a project and inside the project create "cards" with "todos" which can then be moved from state to state ("backlog", "in progress", "complete", etc.)

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

I would like to be able to push the notifications to all the people who are connected to tell their apps that a refresh is needed to get the latest todos. In other words, let's say that user A adds a new card to project A, I would like to send a message out to all users who are currently watching project A so that their application issues a project refresh to get the latest and greatest.

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

Any suggestions on how to proceed? Which technology, if any, I need to add to the MEAN stack to be able to do something like this?

提前致谢

推荐答案

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

Since you're on the MEAN stack, the standard recommendation in Node would be to use the Socket.IO API.

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

They provide the following example of two way messaging (which would facilitate your push messages very easily):

客户

<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 轮询.

It will use websockets where possible, and fallback to AJAX long polling or Flash polling in browsers where there is no websocket support.

至于与 Angular 的集成，这里有一篇关于 Socket.IO 和 Angular:

As for integrating with Angular, here's a good blog post on Socket.IO and Angular:

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

I'll be writing about how to integrate Socket.IO to add real-time features to an AngularJS application. In this tutorial, I'm going to walk through writing a instant messaging app.

这篇关于如何使用 angular.js 推送通知?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！