在接收聊天时创建推送通知
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 事件,您知道吗?就像点击通知会将您重定向到所需的位置 不知道,没用过那个包。以上是关于在接收聊天时创建推送通知的主要内容,如果未能解决你的问题,请参考以下文章