如何使用 FCM 将通知从一台使用 Angular2 的计算机发送到另一台计算机

Posted 2023-03-13

【中文标题】如何使用 FCM 将通知从一台使用 Angular2 的计算机发送到另一台计算机

【英文标题】：How to send Notification using FCM from one computer to another using Angular2

【发布时间】：2018-06-07 18:34:56

【问题描述】：

如何向登录我网站的一位用户发送通知。 如何使用 angular2、typescript 为系统或设备生成 fcmtoken。 请帮我解决这个问题。如果有人有任何想法，请告诉我。

 import  Injectable           from '@angular/core';
import  AngularFireDatabase  from 'angularfire2/database';
import  AngularFireAuth      from 'angularfire2/auth';
import * as firebase from 'firebase';
import 'rxjs/add/operator/take';
import  BehaviorSubject  from 'rxjs/BehaviorSubject'
import  Observable  from 'rxjs/Observable';
import  Http, Response  from '@angular/http';
import  Headers, RequestOptions  from '@angular/http';

@Injectable()

export class MessagingService 
  messaging = firebase.messaging()
  currentMessage = new BehaviorSubject(null)
  constructor(private db: AngularFireDatabase, private afAuth: AngularFireAuth)  
  updateToken(token) 
    this.afAuth.authState.take(1).subscribe(user => 
      if (!user) return;
      const data =  [user.uid]: token 
      this.db.object('fcmTokens/').update(data)


    )
  


  getPermission() 
    this.messaging.requestPermission()
    .then(() => 
      console.log('Notification permission granted.');
      return this.messaging.getToken()
    )
    .then(token => 
      console.log(token)
     // this.updateToken(token)
    )
    .catch((err) => 
      console.log('Unable to get permission to notify.', err);
    );
  


  receiveMessage() 
    this.messaging.onMessage((payload) => 
     console.log("Message received. ", payload);
     this.currentMessage.next(payload)
   );
 

我正在创建服务 MessagingService.ts 以帮助该站点

https://angularfirebase.com/lessons/send-push-notifications-in-angular-with-firebase-cloud-messaging

但它给定的错误 ConnectionBackend 没有提供程序

【参考方案1】：

我解决了这个问题。

创建调用nodejs云函数的消息API服务

import  Injectable           from '@angular/core';
import  AngularFireDatabase  from 'angularfire2/database';
import  AngularFireAuth      from 'angularfire2/auth';
import * as firebase from 'firebase';

import 'rxjs/add/operator/take';
import  BehaviorSubject  from 'rxjs/BehaviorSubject'

@Injectable()
export class MessagingService 

  messaging = firebase.messaging()
  currentMessage = new BehaviorSubject(null)

  constructor(private db: AngularFireDatabase, private afAuth: AngularFireAuth)  


  updateToken(token) 
    this.afAuth.authState.take(1).subscribe(user => 
      if (!user) return;

      const data =  [user.uid]: token 
      this.db.object('fcmTokens/').update(data)
    )
  

  getPermission() 
      this.messaging.requestPermission()
      .then(() => 
        console.log('Notification permission granted.');
        return this.messaging.getToken()
      )
      .then(token => 
        console.log(token)
        this.updateToken(token)
      )
      .catch((err) => 
        console.log('Unable to get permission to notify.', err);
      );
    

    receiveMessage() 
       this.messaging.onMessage((payload) => 
        console.log("Message received. ", payload);
        this.currentMessage.next(payload)
      );

    

来自您的 component.ts 文件的服务调用

ngOnInit() 
    this.msgService.getPermission()
    this.msgService.receiveMessage()
    this.message = this.msgService.currentMessage
  

index.js Nodejs 后端从消息服务获取输入

    const functions = require('firebase-functions');
const admin = require("firebase-admin");
admin.initializeApp();

exports.fcmSend = functions.database.ref('/messages/userId/messageId').onCreate(event => 


  const message = event.after.val()
  const userId  = event.params.userId

  const payload = 
        notification: 
          title: message.title,
          body: message.body,
          icon: "https://placeimg.com/250/250/people"
        
      ;


   admin.database()
        .ref(`/fcmTokens/$userId`)
        .once('value')
        .then(token => token.val() )
        .then(userFcmToken => 
          return admin.messaging().sendToDevice(userFcmToken, payload)
        )
        .then(res => 
          console.log("Sent Successfully", res);
        )
        .catch(err => 
          console.log(err);
        );

);

使用 onCreate() 触发器在数据库中创建新消息时的函数。云函数将首先提取我们保存在数据库中的 FCM 令牌，然后使用消息数据创建将发送给最终用户的有效负载。

现在部署你的 nodejs 函数

firebase deploy --only functions