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]，如果您对我们的工作有任何疑问或建议，请告诉我们。