收聽聊天事件

我對Firebase以及angular2相當陌生。所以我正在嘗試通過教程製作Firebase集成的angular2聊天應用程序。我已按照 this tutorial製作聊天應用程序。問題是，除了簡單聊天之外，我想在有人寫信或接收新聊天時創建敬酒。但我似乎無法找到可以聽到該事件的代碼。收聽聊天事件

任何想法在哪裏可以找到它？

角度分量看起來像這樣

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 = ''; 
    } 
}

，這是HTML標記

<div class="row columns"> 
    <button (click)="login()" *ngIf="!name">Login With Facebook</button> 

    <input type="text" id="message" *ngIf="name" placeholder="Chat here..." (keyup.enter)="chatSend($event.target.value)" [(ngModel)]="msgVal" /> 

    <div class="chat-container" *ngFor="let item of items | async"> 
     <a href="#">{{item.name}}</a> 

     <p>{{item.message}}</p> 
    </div> 
</div>

來源

2017-03-21 Pujan

其中Gentlement從reddit的幫助我，並告訴檢查FirebaseObservables，並聽取了關於它的變化。

initializeApp(firebaseConfig); 
database().ref().on('value', function(snapshot){ 

    var x = snapshot.val() 
    console.log("This prints whenever there is a new message"); 
});

只要聊天線程中有新消息，主模塊內的此片段就會觸發。

希望它可以幫助別人

來源

2017-03-22 00:20:25 Pujan

收聽聊天事件

回答

相關問題