如何使用 TalkJS API 构建类似 WhatsApp 的聊天应用程序

今天，我们将向您展示如何使用TalkJS 聊天 API创建类似 WhatsApp 的聊天 UI 。我们将从 TalkJS 默认主题开始，并使用TalkJS 主题对其进行自定义。以下是 TalkJS 收件箱的默认样式。首先，我们将列出所有需要进行的更改，使其看起来更像 WhatsApp。完成后，我们将了解如何在 TalkJS 的主题编辑器中进行这些更改。

要做的事情

对于这篇文章，我们将列出我们想要做的事情的清单，然后逐一解决它们。

• 将聊天标题颜色更改为绿色 (#009688)
• 将用户消息颜色更改为#CFE9BA，将其他人的消息更改为白色（#FFFFFF）
• 将聊天背景颜色更改为#E5DDD5
• 从聊天框中删除用户的头像
• 将消息正文的样式改为圆角矩形，并略微添加阴影。同时略微增加字体粗细，使其与 WhatsApp 聊天界面保持一致。
• 将 WhatsApp 中的高亮颜色更改为传统的绿色 (#009688)。将活动高亮项目的文本颜色更改为白色
• 删除消息输入字段的背景

完成以上所有操作后，收件箱应该看起来像这样。如你所见，它几乎和普通的 WhatsApp 聊天一样好用。

TalkJS主题编辑器

如果您之前有过前端 Web 开发经验，那么样式表一定对您不陌生。TalkJS 提供了一个样式管理面板，您可以在其中编辑有限的字段（目前），以便体验 TalkJS 聊天主题。即使您的经验有限，它也非常有用，因为它结合了文本字段和样式表。

要应用主题，我们需要在 TalkJS 仪表板的“角色”部分中创建一个名为“默认”的角色。设置好角色后，您可以向下滚动到“UI 主题”部分。目前，它位于默认主题中。在主题编辑器中设置新主题后，它将出现在主题列表中，我们只需选择它即可将其应用到收件箱。它还允许您实时编辑主题，并刷新页面以直接查看更改。现在，让我们开始编辑收件箱的样式。

用户消息

在主题编辑器部分中点击“创建新主题”，并为主题设置新名称。我们首先需要从聊天中删除头像。WhatsApp 不会在每条消息中显示头像，而只会在顶部显示。为此，我们需要执行以下操作：将第 54 行的 showAvatars 属性设置为 false，并删除第 58 至 62 行。

我们首先编辑 message-row 类，以减少两个连续消息之间的距离。编辑 margin-bottom 和 margin-top 属性，并将它们设置为以下值。

.message-row {
    margin-bottom: 0.1rem;
    margin-top: 0.2rem;
    display: flex;
    /* Align the avatar and the message centrally, but if the message's height
       is greater than the avatar we will align it to the top
       -- See Avatar.template for how this is achieved */
    align-items: center;
}

接下来，我们将编辑消息类别，包括发起聊天的人和聊天对象。

.message {    
    overflow: hidden;
    border-radius: 8px;
    position: relative;
    background-color: white;
    width: -moz-fit-content;
    width: fit-content;
    max-width: 500px;
    padding: 4px;
    font-weight: 500;    
    box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.13);
    margin-bottom: 10px;
}

这个类用于常规聊天消息。我们还需要更改当前用户发起的聊天消息的一些属性。这条消息的颜色不同，所以我们需要将该属性添加到下面的类中。这里的其他所有代码都可以删除。

.by-me .message {
    background-color: #cfe9ba;
}

完成这些更改后，您将看到聊天消息开始看起来更像来自 WhatsApp 的消息。

聊天标题

这里我们只需要更改一个字段，那就是背景颜色。将其更改为以下值。

.header {
    display: flex;
    align-items: center;
    height: 4.5rem;
    background-color: #009688;
    flex-shrink: 0;
}

这将使聊天标题呈现出 WhatsApp 上独特的绿色。

阿凡达

删除 border-style、border-width 和 border-color 属性。这样就能移除聊天标题栏上用户头像的白色边框。

布局

点击左侧菜单的布局部分。这将为一些无法在 CSS 中配置或有时会覆盖 CSS 样式的组件提供易于使用的界面。点击“全局”子部分，并将字体系列更改为“Segoe UI”、“Segoe UI”、Tahoma、Geneva、Verdana、sans-serif。现在，打开“聊天框”子部分，并将背景颜色设置为 #E5DDD5。接下来，打开“收件箱”提要面板子部分，并将背景颜色设置为 #FFF（白色）。

对于消息字段子部分，我们需要更改两个属性。首先，将 borderRadius 设置为 4rem，然后将颜色设置为 #000（黑色）。在高亮子部分，将 backgroundColor 更改为 #009688，颜色更改为 #FFF（白色）。打开面板页脚部分，并将 backgroundColor 更改为透明。最后，在通知切换部分，将 borderColor 更改为 #009688。

总结

如果您正确遵循了以上所有步骤，您的聊天收件箱应该看起来像这样，当然消息除外。甚至桌面通知切换开关也采用了 WhatsApp 的配色方案。如果您将 TalkJS 聊天的收件箱样式更改为使用此主题的聊天框，它看起来将与 WhatsApp 的移动 UI 类似（值得一提的是，您可以在移动应用中部署 TalkJS 聊天）。您无需进行任何其他样式更改。如果您想减小宽度，只需前往布局菜单中的聊天框部分，并将最大宽度更改为您喜欢的值。我们在下方将其设置为 320px。

您会发现，将我们的聊天界面主题设计得像 WhatsApp 一样是多么容易。更有趣的是，我们实际上并没有编写大量代码来实现这一点。TalkJS 中的主题编辑器允许用户通过非常直观的界面，使用基于表单的输入来创建新主题或编辑现有主题。更改会自动保存，您可以立即看到效果。