在接收聊天时创建推送通知

Posted

技术标签:

【中文标题】在接收聊天时创建推送通知【英文标题】:Creating a push notification on receiving chat 【发布时间】:2017-08-13 21:52:32 【问题描述】:

我对 Angular 2 和 Firebase 还很陌生,但我设法创建了一个聊天应用程序 here,我的最终目标是在聊天应用程序中有新消息时创建推送通知。

    我尝试安装this,但是非常困难,因为我看不懂文档。

    我也尝试了this thread 的解决方案。但该应用程序不会检测到通知。

对如何解决这个问题有任何帮助吗?

这是我的 app.component.ts

import  Component  from '@angular/core';
import  AngularFire, AuthProviders, AuthMethods, FirebaseListObservable  from 'angularfire2';

@Component(
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
)

 export class AppComponent 
  items: FirebaseListObservable<any>;
  name: any;
  msgVal: string = '';

    constructor(public af: AngularFire) 
        this.items = af.database.list('/messages', 
          query: 
            limitToLast: 5
          
        );

        this.af.auth.subscribe(auth =>  
          if(auth) 
            this.name = auth;
          
        );
    

login() 
    this.af.auth.login(
      provider: AuthProviders.Facebook,
      method: AuthMethods.Popup,
    );
   

chatSend(theirMessage: string) 
      this.items.push( message: theirMessage, name: this.name.facebook.displayName);
      this.msgVal = '';
  

mychange()
   console.log("change happned"); // updated value
  
 

我的 app.module 文件包含,

import  BrowserModule  from '@angular/platform-browser';
import  NgModule  from '@angular/core';
import  FormsModule  from '@angular/forms';
import  HttpModule  from '@angular/http';
import  AppComponent  from './app.component';
import  AngularFireModule from 'angularfire2';
import initializeApp,database from 'firebase';

export const firebaseConfig = 
   apiKey: "AIzaSyAQUetWt-pH-WuMTZ-lonP2ykICOl4KiPw",
   authDomain: "anguchat-eb370.firebaseapp.com",
   databaseURL: "https://anguchat-eb370.firebaseio.com",
   storageBucket: "anguchat-eb370.appspot.com",
   messagingSenderId: "267732203493"
;

initializeApp(firebaseConfig);
database().ref().on('value', function(snapshot)
  var x = snapshot.val()
  console.log("This prints whenever there is a new message");
);

@NgModule(
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    AngularFireModule.initializeApp(firebaseConfig)
  ],
  providers: [],
  bootstrap: [AppComponent]
)
export class AppModule  

【问题讨论】:

您不能使用 Firebase 云消息传递直接一个设备另一个设备发送消息。请参阅 ***.com/q/37435750、***.com/q/37990140 和 ***.com/q/38372147.You可以但是使用 Cloud Functions 和 Firebase 来安全地发送通知。见firebase.google.com/docs/functions/… 对不起,我无法正确解释..我正在尝试获取浏览器通知,有点像girliemac.com/assets/images/articles/2014/03/notifications.png 是的,我明白了。和FCM.js allows you to receive those。但是您不能将此类通知直接从一个浏览器发送到另一个浏览器。 【参考方案1】:

我会订阅您组件中的消息数据库。如果您想使用this 进行推送通知。您必须在模块中导入 PushNotificationsModule,在组件中导入 PushNotificationsService

在推送通知生效之前,用户必须接受them。

组件

import  Component  from '@angular/core';
import  AngularFire, AuthProviders, AuthMethods, FirebaseListObservable  from 'angularfire2';
import  PushNotificationsService  from 'angular2-notifications';

@Component(
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
)

 export class AppComponent 
  items: FirebaseListObservable<any>;
  name: any;
  msgVal: string = '';

    constructor(
      public af: AngularFire,
      private _pushNotifications: PushNotificationsService) 

        this._pushNotifications.requestPermission(); // requestion permission for push notification

        this.items = af.database.list('/messages', 
          query: 
            limitToLast: 5
          
        );

        af.database.list('/messages', 
          query: 
            limitToLast: 1
          
        ).subscribe((messages: Array<any>) => 
          // get the last message from messages array
          this._pushNotifications.create('some title',  body: 'body text' ).subscribe(
            res => 
              // do something
            ,
            err => 
              // do something
            
          );
       );

        this.af.auth.subscribe(auth =>  
          if(auth) 
            this.name = auth;
          
        );
    
 

【讨论】:

顺便说一句,如果此服务提供 onclick 事件,您知道吗?就像点击通知会将您重定向到所需的位置 不知道,没用过那个包。

以上是关于在接收聊天时创建推送通知的主要内容,如果未能解决你的问题,请参考以下文章

当用户已经在聊天时,Firebase 聊天会阻止推送通知

OneSignal 推送通知 |在聊天时禁用它们进行聊天|安卓

在聊天应用程序中实现推送通知

收到推送通知且应用程序在前台时如何防止弹出警报

应用未运行时无法接收推送通知

XMPP 上的群聊推送通知