如何使用 Sendbird UIKit 在 React 中构建 WhatsApp Messenger 克隆

WhatsApp拥有超过20 亿用户，每天交换1000 亿条消息，是世界上最受欢迎的消息应用程序。虽然 WhatApp 的用户间消息传递的易用性和与企业对话的能力极大地促进了它的流行，但 WhatApp 最近面临着越来越多的企业向用户发送促销信息的垃圾邮件。

品牌可以通过构建应用内聊天来避免这个问题。上下文丰富的应用程序内聊天意味着公司的重要更新、新闻和公告不会丢失在充满垃圾邮件的消息收件箱中。应用内聊天还提供逼真的消息传递体验，同时让品牌负责控制用户数据。这很重要，因为企业的消息传递很可能成为品牌建立基础的重要组成部分。事实上，一位 Meta 发言人最近评论说：“消息传递是完成业务的新方式，比电子邮件或电话更好。”

这就是为什么在这篇博客中，我们将了解如何在 React 中构建 WhatsApp Messenger 克隆。对于这个项目，我们将使用Sendbird UIKit for React。Sendbird UIKit 使开发人员能够使用高度可定制的 UI 组件构建量身定制的聊天体验。在这篇博客中，我们将了解 UIKit 提供的组件如何构成我们自定义集成的各个方面，以实现我们的目标——在 React 中构建 WhatsApp Messenger 克隆。

到本博客结束时，这就是您为桌面构建的内容：

这是针对移动设备的：

开始使用您的 WhatsApp Messenger 克隆版

首先，在Sendbird 仪表板中创建一个应用程序。在这里，您可以访问聊天服务中提供的所有内容。创建应用程序后，您需要保存生成的应用程序 ID，以在您的 React 应用程序中初始化 Chat SDK。

生成一个 React 应用程序并使用 npm 或 yarn 安装 Sendbird UIKit for React：

一旦安装了 UIKit，我们就可以从 UIKit 为我们的应用程序导入必要的组件。

React 中 WhatsApp Messenger 克隆的组件和模块

首先，我们将使用 SendbirdProvider 作为我们将要包含在应用程序中的多个模块的通用包装器。

对于我们的示例，我们将使用 ChannelList、Channel 和 ChannelSettings 模块。通过这三个模块，我们将创建一个移动视图和一个桌面视图。移动视图将呈现频道列表或同时呈现频道对话和设置菜单。对于桌面视图，我们将并排显示频道列表和频道对话。

首先，我们将在 App.js 文件中导入 SendbirdProvider 和 UIKit 的样式表：

注意：这里我们导入 SendbirdProvider 并在我们的应用程序中将其称为 SBProvider。您可以选择在您自己的应用程序中引用它的内容。

然后，将以下 CSS 应用于我们的样式表，该样式表将位于 styles.css 文件中：

现在，我们希望应用程序既可以在桌面视图上工作，也可以在移动视图上工作。因此，在我们的提供者组件中，我们必须检查窗口的屏幕尺寸。如果它是手机屏幕的大小，它将呈现我们的移动视图。如果它高于典型手机屏幕的像素数，它将呈现桌面视图。因此，我们将创建两个组件并将它们命名为 MobileView 和 DesktopView。这两个组件都将包含我们的模块。

完成这些步骤后，App.js 文件将如下所示：

注意：在仪表板中，如果您向用户颁发访问令牌，则必须将 accessToken 变量传递到 SBProvider 中，如上面的代码示例所示。

桌面视图

桌面视图是默认的 Sendbird 布局，左侧是频道列表，右侧是对话。我们的 DesktopView 组件返回一个类名为“sendbird-app__wrap”的 div。这个 className 已经由 Sendbird 的默认设计设置了样式，该设计在对话窗口旁边显示频道列表。

然后，我们要设置sendbird-app__wrap的div的高度为100vh，也就是整个窗口屏幕的大小。在这个 div 中，我们将放置频道列表、频道对话和频道设置组件。

导入频道列表、频道和频道设置模块。它们将被称为 SBChannelList、SBConversation 和 SBChannelSettings：

我们将在每个组件周围添加一个 div，并通过使用以下类名，它会将默认的 UIKit 样式应用于我们的组件。以下是每个组件的类名：

1. 对于频道列表，div 类名是“sendbird-app__channellist-wrap”
2. 对于频道对话， div className 是“sendbird-app__conversation-wrap”
3. 对于通道 设置， div className 是“sendbird-app__settingspanel-wrap”

在频道列表组件中，我们将使用 onChannelSelect 属性来设置从频道列表中点击的频道。频道对话会传入 channelUrl 并使用 onChatHeaderActionClick 以便我们可以监听用户何时要打开设置栏。对于通道设置，传入 channelUrl 属性并使用 onCloseClick 关闭设置栏视图。请查看下面“自定义”部分中的代码示例，了解它的外观。

移动视图

移动设备视图会将频道列表组件或频道对话组件呈现到屏幕上。如果用户在频道列表中并单击进入对话，对话窗口将呈现。如果用户单击从对话转到频道列表，频道列表将呈现在屏幕上。

对于移动视图，我们将返回一个类名为“mobile-view__wrap”的 div，并在其中放置一个条件，如果未设置当前频道，则它将返回频道列表组件。否则，它将返回频道对话窗口和设置组件。仅当用户单击对话窗口中的按钮以打开设置菜单时，才会呈现设置组件。

在样式表中，将className为“mobile-view__wrap”和“sendbird-app__conversation-wrap”的元素高度设置为100vh，使其占据整个窗口屏幕。

我们将为每个组件使用与之前为 DesktopView 所做的相同的属性。对于频道列表，使用 onChannelSelect 属性以及 disableAutoSelect。使用 disableAutoSelect 属性，以便频道列表不会自动呈现列表中的第一个频道。

桌面视图并排显示频道列表和频道对话。但是，对于移动视图，我们只查看频道列表或频道对话，因此应该关闭自动选择。如果您不包括 disableAutoSelect，您会发现该视图将不断呈现对话窗口中的第一个频道，并且不允许您返回到频道列表，因为它一直在呈现该频道。因此，disableAutoSelect 属性用于在对话窗口中选择要查看的频道，并从查看频道列表切换到对话。

接下来，在 SBConversation 组件上方，我们要添加一个后退按钮。后退按钮将显示在频道对话中并返回以查看我们的频道列表。对话组件将传入 channelUrl 并使用 onChatHeaderActionClick。onChatHeaderActionClick 将打开设置栏。SBChannelSettings 组件将使用 channelUrl 属性和 onCloseClick 来关闭设置菜单。

自定义

我们可以开始添加自定义项，让您的聊天更像 Whatsapp 风格。在 DesktopView 和 MobileView 中，我们将创建一个隐藏设置栏的函数和一个呈现设置栏的函数。

要隐藏设置栏，在函数中，我们将获取类名为“sendbird-app__conversation-wrap”的元素并将其右边距设置为 0px。此功能将在 SBChannelSettings 中使用属性 onCloseClick 触发。要打开设置栏，在 onChatHeaderActionClick 属性内的 Channel 组件中，它将调用 renderSettingsBar，它会在其中获取类名为“sendbird-app__conversation-wrap”的元素并将右边距设置为 318px。

因此，打开设置将更改对话窗口的布局，以便页面右侧有空间供菜单存在。然后，当点击设置菜单关闭时，对话窗口将扩展到之前设置栏所在的位置。

要显示设置菜单，我们要添加一些 CSS 以便在窗口视图中正确定位它：

从这里，您可以更改任何 CSS 自定义设置，以显示您希望设置菜单的位置。

通过这些实现，MobileView 将返回：

DesktopView 返回这个：

颜色集

接下来，我们要使用SendbirdProvider 中的colorSet属性来定义构成 UIKit 主题的颜色。一旦我们定义了 colorSet，我们必须确保将它传递给 SendbirdProvider 组件。

对于我们的示例，我们将变量 –sendbird-light-primary-100 设置为浅绿色。此颜色在频道列表中用作所选频道的背景、表情符号反应容器的背景颜色以及当前用户编辑自己的消息时的背景颜色。对于我们的示例，我们可以更改颜色以将我们的外发消息匹配为较浅的绿色阴影。

接下来，我们要将 –sendbird-light-primary-300 定义为绿色。此变量用于传出消息的背景颜色、频道列表中的创建新频道按钮，以及频道对话中的设置图标和设置菜单中的所有图标等图标。

然后，我们将 –sendbird-light-primary-400 设置为稍微深一点的绿色。使用 –sendbird-light-primary-400 的元素包括传出消息悬停时的背景、想要编辑自己的消息时保存按钮悬停时的背景，以及创建按钮悬停时创建新频道的背景。

需要注意的一个重要的 colorSet 变量是 –sendbird-light-background-50，它被调用用于每个组件的背景颜色。当前默认颜色为白色。我们将实现 CSS 以将对话窗口的背景颜色更改为浅米色，而不是将此变量更改为具有一种统一的背景颜色或将整个应用程序的背景颜色保留为白色。我们鼓励您查看colorSet 变量的完整列表。

App 函数现在应该如下所示：

渠道定制

对于一些收尾工作，我们将添加 CSS。对于传入消息，我们要删除用户名旁边的个人资料图像图标。一旦我们删除了用户的个人资料图片，我们就想删除应用于它的最小宽度样式，这样头像之前的位置就没有空白了。

频道列表自定义

在频道列表标题中，我们要删除当前用户的昵称和 ID。除了使用 CSS 来实现这一目标，您还可以使用 ChannelList 的 UI 组件 ChannelListHeader 自定义您自己的特定设计以覆盖默认布局。

对于频道预览组件，我们将在组频道名称旁边显示的成员计数上将显示设置为无。为频道预览设计自定义 UI 的另一种选择是利用 ChannelList 的 renderChannelPreview 属性，该属性将用您自己的自定义组件替换默认的 Sendbird 标头。如果您想查看代码，请查看完整的 CSS 样式表！

这是在桌面上的最终结果：

这就是它在移动设备上的样子：

结论

恭喜！您现在已经在 React 中构建了一个 WhatsApp Messenger 克隆。您有一个功能性的 WhatsApp 风格的消息传递实现，由来自 Sendbird UIKit 的核心组件和模块组成。从这里，您将能够使用基本元素来构建您的聊天体验，以满足您的应用程序的需要。

请查看此GitHub 存储库以大致了解我们已完成的工作。有关更多信息，您还可以查看我们的文档或在我们的开发人员门户网站上探索丰富的UIKit 教程。如果您需要有关 Sendbird UIKit 的帮助，请查看社区论坛或联系我们。我们的专家随时准备提供帮助！

享受构建您的 WhatsApp Messenger 克隆吧！💻