使用 Firebase 和 Angular 创建实时聊天界面

观看我们的网络研讨会录制视频 "NativeScript on Fire(base) 🔥"

我将继续之前为 Yowwlr（我开始构建的猫咪版 Twitter 客户端，用于展示如何使用 Flexbox）所做的工作，我认为接下来要处理的事情是克隆 Twitter 的“消息”选项卡，它本质上是一个聊天界面，当用户想要聊天时会显示气泡。深入研究 Twitter，这是一个看似简单的应用程序，你会注意到一些特殊之处。其中一些对于本文来说过于复杂，例如添加到气泡上的小语音箭头，但仅在聊天的最后一部分才会出现。然而，许多元素在 NativeScript 应用程序中很容易克隆。我将注意力转向使用 Firebase 数据库的实时功能构建与 Twitter 类似的逼真的聊天 UI，并为 Android 和 iOS 复制此界面。以下为参考 Twitter 的聊天界面示例：

请注意位于 Tab 导航顶部的静态聊天框。ScrollView 需要置于其顶部。因此，此挑战的第一部分涉及回到我们久经考验的 StackLayout，它在顶部嵌入了一个 ScrollView，底部嵌入了一个 StackLayout。

<StackLayout>

<ScrollView #scrollview height="90%">

</ScrollView>

<StackLayout height="10%">

<GridLayout columns="*,auto" style="padding: 10">

<TextField #textfield class="chatTextField" row="0" col="0" [(ngModel)]="message"></TextField>

<Button #btn class="chatBtn" row="0" col="1" text="发送" (tap)=chat(message)></Button>

</GridLayout>

</StackLayout>

在 ScrollView 中，它通过保持 90% 的高度将文本字段和按钮强制到底部，我们做了一些巧妙的事情来区分聊天样式，具体取决于谁在聊天。与 Twitter 一样，如果您的聊天显示在窗口中，您将看不到自己的图像，聊天气泡会右对齐。如果您正在观看朋友与您聊天，则这些气泡会左对齐，并且您会看到正在聊天的人（或猫）的图像。

注意：在实际的 Twitter 应用程序中，您会看到一个潜在聊天伙伴的列表，选择一个并开始聊天。我没有构建这部分，但实现起来并不难。在本演示中，我手动添加了一个聊天伙伴作为接收者。

通过 CSS 和一些数据绑定属性来区分您自己的聊天内容与聊天伙伴的内容。在 ListView 的模板中，我添加了一个包含标签和图像的 StackLayout。StackLayout 具有一个根据用户身份切换的类，并且其 horizontalAlignment 也从左切换到右。用户图像也会根据用户状态切换可见性。

<ListView padding="5" #list separatorColor="#fff" [items]="chats$ | async" class="list">

<template let-item="item">

<GridLayout columns="*" rows="auto" class="msg">

<StackLayout [class]="filter(item.from)" orientation="horizontal" [horizontalAlignment]="align(item.from)">

<Image [visibility]="showImage(item.from)" class="authorimg" stretch="aspectFill" height="30" width="30" verticalAlignment="top" src="~/images/k1.png" col="1"></Image>

<Label [text]="item.message" class="msg_text" textWrap="true" verticalAlignment="top"></Label>

</StackLayout>

</GridLayout>

</template>

</ListView>

以两个不同的用户身份登录 Yowwlr 应用程序，我们可以跨平台测试我们的界面。

另一个挑战是使 ListView 以相反的顺序显示数据。我通过以相反的顺序对来自聊天的数据进行排序来做到这一点（最新的在底部）。收到后，数组会按日期倒序排序。

publishChatUpdates() {

this._allChats.sort(function(a, b){

if(a.date > b.date) return -1;

if(a.date < b.date) return 1;

return 0;

})

this.chats.next([...this._allChats]);

}

有很多很棒的资源可以帮助你开始创建下一个伟大的聊天应用程序。至少有三个插件已经构建完成：一个完整的chatview 插件，一个帮助与LiveEngage 服务交互的插件，以及一个微信风格的聊天客户端。 Bruno d’Auria撰写了一篇关于该主题的博文，Nic Raboy也写过一篇。我受到 Dave Coffin 优秀的NativeScript Snack 代码片段的启发，了解了如何制作聊天气泡。向所有制作酷炫且实用的聊天功能的人致敬！

以下是 Yowwler 的聊天功能如何在实时环境中工作：

也许猫咪更喜欢面对面聊天，就像这样。但当你远离你的聊天猫咪时，我们提供给你……Yowwlr。