web-dev-qa-db-ja.com

angular.jsで通知をプッシュする方法は？

Angular.jsを学ぶためのシンプルなアプリケーションを構築しています。これまでに、MEANスタックのすべてのピースを接続し、Mongoからデータを保存および取得することができました。

アプリは基本的には仕事リストです。ユーザーはプロジェクトを作成し、プロジェクト内で「todos」を含む「カード」を作成します。このカードは状態から状態に移動できます（「バックログ」、「進行中」、「完了」など）。

接続しているすべてのユーザーに通知をプッシュして、最新の仕事を取得するには更新が必要であることをアプリに伝えたいと思います。つまり、ユーザーAがプロジェクトAに新しいカードを追加するとします。現在プロジェクトAを監視しているすべてのユーザーにメッセージを送信して、アプリケーションがプロジェクトリフレッシュを発行して最新かつ最高のものを取得したいとします。

進め方に関する提案はありますか？このようなことを行うには、MEANスタックにどのテクノロジーを追加する必要がありますか？

前もって感謝します

javascriptmongodbangularjspush-notificationmean-stack
19
Francesco Gallarotti

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 long pollingまたはFlash pollingへのフォールバックを使用します。

Angularとの統合については、 Socket.IOおよびAngular に関する次のブログ投稿を参照してください。

Socket.IOを統合して、AngularJSアプリケーションにリアルタイム機能を追加する方法について書いていきます。このチュートリアルでは、インスタントメッセージングアプリの作成手順を説明します。

16
Ryan Weir

すでにExpressを使用している場合は、 express.io を確認する必要があります。

Sessionサポートや通常のHTTPルートをリアルタイムルートに転送する機能など、数多くのクールな機能があります。

4
McMeep

PhoneGap/CordavaでAngularJSプッシュ通知を機能させるために作成したモジュールを以下に示します（完全な説明付き）： http://www.scorchsoft.com/blog/free-angularjs-cordova-Push-notification-plugin /

単に サンプルコードをダウンロード をインストールします。 PHPでプッシュコンポーネントをセットアップするためのコードも含まれています。

4
Andrew Ward

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

    }
}
1
Christian Chiama