使用 Fanout 在大约 20 分钟内向您的 Ionic2 应用程序发送消息
扇出
Fanout是一项出色的服务，可让您快速轻松地向客户端应用程序发送消息。在本教程中，我们将使用 Fanout 向 Ionic2 应用程序发送消息。
开始设置
接下来，要创建接收消息的 Ionic2 应用和发布消息的 Nodejs 应用，您需要安装 Nodejs。在此处下载并安装。
安装完成后，打开命令提示符并执行：
npm install -g ionic@beta
此命令使用节点包管理器全局安装 Ionic2 节点包。该包允许我们创建 Ionic2 应用程序。
如果你运行这个：
Ionic -v
您应该看到类似这样的内容，这意味着软件包安装成功并且您可以继续使用了（不要担心您的版本号可能与我的不同）：
2.0.0-beta.32
如果出现错误，请返回上述步骤或按照Ionic2 安装页面上更详细的安装步骤进行操作。
创建基础应用程序
好吧，如果您不耐烦的话，所有的源代码都可以在 Github 上找到。
要创建基本的 Ionic2 应用程序，请转到命令行并执行：
ionic start FanoutIonicNodeTutorial blank --v2 --ts
使用该命令，我们将创建一个名为FanoutIonicNodeTutorial的“空白”Ionic 版本 2 应用程序，该应用程序使用 TypeScript。如果您不熟悉 TypeScript，请不要担心 - 我们只需要在本教程中稍微接触一下它。
安装完成后，将目录更改为为您的应用创建的文件夹并开始运行您的应用：
cd FanoutIonicNodeTutorial
ionic serve
如果一切顺利的话你应该会在浏览器中看到如下内容：
添加我们的代码
为了使我们的应用能够接收来自Fanout的消息并显示在屏幕上，我们需要在应用中创建三个“提供程序”。不要被 Ionic2 和 Angular2 中的“提供程序”名称所吓倒，因为它们实际上只是其他框架中所谓的“服务”的另一个名称 - 封装一组特定功能的对象，以便更好地分离关注点并避免应用中的代码重复。
对于我们的应用，这 3 个提供程序用于警报、配置和 Fanout。我们可以使用 ionic“generator”命令轻松添加它们，如下所示：
ionic generate provider AlertProvider
ionic generate provider ConfigurationProvider
ionic generate provider FanoutProvider
创建提供程序后，我们需要对其进行修改以满足我们的需求。我使用VS Code开发 Ionic2 应用程序，因为它对 TypeScript 具有良好的支持，但您可以使用您觉得最舒服的任何编辑器。
在您最喜欢的编辑器中，打开/app/providers/alert-provider文件夹中的alert-provider.ts文件。将该文件的内容替换为以下内容：
import { Injectable } from "@angular/core";
import { NavController, Alert } from "ionic-angular";
@Injectable()
export class AlertProvider {
constructor() {}
presentDismissAlert(title: string, subtitle: string, navCtrl: NavController) {
let alert = Alert.create({
title: title,
subTitle: subtitle,
buttons: ["Dismiss"]
});
navCtrl.present(alert);
}
}
当收到来自Fanout 的消息时，我们的警报提供程序将允许我们轻松地在屏幕上向用户显示警报消息。
接下来，打开/app/providers/configuration-provider文件夹中的configuration-provider.ts文件，并将该文件的内容替换为：
import { Injectable } from "@angular/core";
@Injectable()
export class ConfigurationProvider {
public fanoutUrl: string;
constructor() {
this.fanoutUrl = "http://your-realm-id-here.fanoutcdn.com/bayeux";
}
}
还记得 Fanout 帐户屏幕中的“Realm ID”吗？将“your-realm-id-here”替换为您的实际 Fanout Realm ID。这至关重要 - 如果您没有将其替换为正确的领域 ID，您的应用将永远无法连接到正确的 Fanout 端点。
现在打开/app/providers/fanout-provider文件夹中的fanout-provider.ts文件并将内容替换为：
import { Injectable } from "@angular/core";
import { Http } from "@angular/http";
import "rxjs/add/operator/map";
import { ConfigurationProvider } from "../configuration-provider/configuration-provider";
@Injectable()
export class FanoutProvider {
data: any;
client: any;
clientUrl: string;
constructor(
private http: Http,
private configurationProvider: ConfigurationProvider
) {
this.data = null;
this.clientUrl = configurationProvider.fanoutUrl;
this.client = new Faye.Client(this.clientUrl);
}
subscribe(callback: any, channelName: string) {
this.client.subscribe("/" + channelName, function(data) {
callback(data);
console.log("received data: " + data);
});
}
}
此文件稍微复杂一些，因为这是我们的应用程序实际连接到Fanout服务的地方。此提供程序使用 ConfigurationProvider 获取用于连接到 Fanout 的 URL。但是，为了让我们应用程序的不同部分能够访问我们创建的提供程序，我们需要将这些提供程序注册到框架中。
为此，请导航到/app文件夹中的app.ts文件。将该文件的内容更新为：
import { Component } from "@angular/core";
import { Platform, ionicBootstrap } from "ionic-angular";
import { StatusBar } from "ionic-native";
import { HomePage } from "./pages/home/home";
import { ConfigurationProvider } from "./providers/configuration-provider/configuration-provider";
import { AlertProvider } from "./providers/alert-provider/alert-provider";
@Component({
template: '<ion-nav [root]="rootPage"></ion-nav>',
providers: [ConfigurationProvider, AlertProvider]
})
export class MyApp {
rootPage: any = HomePage;
constructor(platform: Platform) {
platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
StatusBar.styleDefault();
});
}
}
ionicBootstrap(MyApp);
具体来说，我们在这里所做的是向框架显示提供程序所在的位置、我们想要加载的提供程序的名称，然后将它们注册为提供程序，以便整个框架都可以访问它们？
为什么 FanoutProvider 不在这里注册？这是因为我们只想全局注册可能在应用程序的许多不同部分使用的提供程序 - 警报和配置提供程序就是广泛使用的提供程序的很好例子。另一方面，FanoutProvider 可能只在少数地方使用，因此我们只会在需要的地方注册它 - 例如在我们的 Home 组件中，这是我们接下来要处理的内容。
主页组件/页面
现在我们需要将主页连接到 Fanout 和警报提供程序。打开/app/pages/home文件夹中的home.ts文件并将其内容替换为：
import { Component, OnInit } from "@angular/core";
import { NavController } from "ionic-angular";
import { FanoutProvider } from "../../providers/fanout-provider/fanout-provider";
import { AlertProvider } from "../../providers/alert-provider/alert-provider";
@Component({
templateUrl: "build/pages/home/home.html",
providers: [FanoutProvider]
})
export class HomePage implements OnInit {
constructor(
public navCtrl: NavController,
private fanoutProvider: FanoutProvider,
private alertPovider: AlertProvider
) {}
ngOnInit() {
this.fanoutProvider.subscribe(data => {
console.log("received data in home page");
console.log(data);
this.alertPovider.<span class="hljs-title 免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
请先 登录后发表评论 ~