IONIC Chat With Firebase

與Firebase的離子聊天

離子Firebase聊天是由Firebase提供動力的示例聊天小部件。

使用的技術：

• 離子框架（V3）
• Firebase 3（我們不會使用Angularfire）

入門

這些說明將使您在本地計算機上啟動並運行該項目的副本，以開發和測試目的。有關如何在實時系統上部署項目的註釋，請參見部署。您需要安裝軟件以及如何安裝它們需要什麼東西

先決條件

首先，我們需要在Firebase中創建新項目

步驟1：

使用您的firebase（https://firebase.google.com）登錄並創建新項目

步驟2：

單擊“將firebase添加到您的網絡應用程序”並獲取鑰匙

創建離子項目

一旦我們從Firebase創建了項目，我們就可以為我們的聊天應用程序設置新的離子項目

創建新的離子項目

 ionic start  -- v2 ionicfirechat blank

更改您的工作目錄

 cd ionicfirechat

添加您的平台（如果需要）

 ionic platform add android
ionic platform add ios

安裝和設置firebase（app.component.ts）

將firebase node_modules添加到您的項目

npm install firebase --save

在app.component.ts中導入firebase

import * as firebase from ' firebase ' ;

將配置添加到app.component.ts;替換為您的壁爐配置

 let config = {
 apiKey : 'YOUR_APIKEY' ,
 authDomain : 'YOUR_AUTH_DOMAIN' ,
 databaseURL : 'YOUR_DATABASE_URL' ,
 projectId : 'YOUR_PROJECT_ID' ,
 storageBucket : 'YOUR_STORAGE_BUCKET' ,
 } ;
firebase . initializeApp ( config ) ;

為聊天創建UI（home.html）

 <ion-header>
  <ion-navbar>
    <ion-title>chat</ion-title>
  </ion-navbar>
</ion-header>


<ion-content padding>
  <div id="chatMessage">
    <div class="message" *ngFor="let message of messages">
      <div [class]="message.userName == user ? 'innerMessage messageRight' : 'innerMessage messageLeft'">
        <div class="userName">{{ message.userName}}</div>
        <div class="msg">{{ message.message}}</div>
      </div>
    </div>
  </div>
</ion-content>

<ion-footer>
  <ion-toolbar>
    <ion-input type="text" name="message" placeholder="Message" [(ngModel)]="message"></ion-input>
    <ion-buttons end>
      <button ion-button icon-right color="royal" (click)="sendMessage()">
        <ion-icon name="md-send"></ion-icon>
      </button>
    </ion-buttons>
  </ion-toolbar>
</ion-footer>

您需要打開src/app/app.module.ts文件，並用您的配置設置替換下面的代碼：

將消息發送到firebase時，當用戶點擊發送按鈕時，我們需要調用send（）以將消息插入firebase並清除現有消息

 sendMessage ( ) {
    this . db . list ( '/chat' ) . push ( {
      userName : this . user ,
      message : this . message
    } ) . then ( ( ) => {
      this . message = ''
    } )
  }

從firebase讀取用戶創建新消息時，我們需要在內部顯示

 this . db . list ( '/chat/' ) . valueChanges ( ) . subscribe ( data => {
      this . messages = data
    } ) ; 

運行測試

在命令行以下運行該系統的自動測試

  $ionic serve

執照！

封面已許可

讓我們知道！

如果您向我們發送了您使用我們的組件的項目的鏈接，我們會感到非常高興。只需發送電子郵件至[email protected]，如果您對我們的工作有任何疑問或建議，請告訴我們。