react中使用构建缓存_如何使用React构建客户支持实时聊天小部件

react中使用构建缓存

Live chat is a customer support method with a proven record. It’s fast and efficient since one agent can help many customers at once. Best of all, the quicker you can answer customer’s questions during the buying process, the more likely that person is to buy.

实时聊天是一种具有可靠记录的客户支持方法。 快速有效，因为一个代理商可以一次帮助许多客户。 最重要的是，您在购买过程中回答客户问题的速度越快，该人购买的可能性就越大。

So, how do you integrate a live chat into your React application?

那么，如何将实时聊天集成到React应用程序中？

In this tutorial, I’m going to show you how to integrate a live chat feature into your React app without the worry of maintaining your own chat server and architecture.

在本教程中，我将向您展示如何将实时聊天功能集成到您的React应用程序中，而无需担心维护自己的聊天服务器和架构。

Here’s a preview of what we’ll be building:

这是我们将要构建的预览：

To power our chat application, we’ll be using CometChat Pro.

为了支持我们的聊天应用程序，我们将使用CometChat Pro。

CometChat Pro is a powerful communication API that enables you to add chat features to your application. With easy integrations and clear documentation, you’ll be able to add a live chat feature into your application with just a few lines of code, as you will soon see. If you want to follow along, you can create a free account here.

CometChat Pro是一个功能强大的通信API，使您可以向应用程序添加聊天功能。 借助轻松的集成和清晰的文档，您将能够只用几行代码就可以在应用程序中添加实时聊天功能，您将很快看到。 如果您想继续，可以在这里创建一个免费帐户。

In addition to CometChat, we will use the following technologies:

除了CometChat，我们还将使用以下技术：

• Create React App

  创建React应用

• react-chat-widget

  React聊天小工具

• Express

  表达

• Bootstrap

  引导程序

• Axios

  Axios

• react-md (spinner component only)

  react-md (仅旋转组件)

I encourage you to follow along but if you’d rather to skip ahead to the code, you can find the complete code for this application on GitHub.

我鼓励您继续学习，但是如果您想跳过代码，可以在GitHub上找到此应用程序的完整代码。

首先，创建您的CometChat应用 (First things first, create your CometChat app)

To power your chat application, you’ll be using CometChat. Before you can integrate CometChat, however, you must first create a CometChat app.

要使用您的聊天应用程序，您将使用CometChat。 但是，在集成CometChat之前，必须先创建一个CometChat应用程序。

To create a CometChat app, go to the CometChat dashboard (if you don’t have a free CometChat account already now is a good time to sign up) and hit the + icon.

要创建一个CometChat应用程序，转到CometChat仪表盘(如果你没有一个免费帐户CometChat现在已经是一个很好的时间注册 )和命中+图标。

I called my application “react-chat-widget” but you can call yours whatever you like.

我将我的应用程序称为“ react-chat-widget”，但是您可以随心所欲地调用自己的应用程序。

We’ll have two types of users connect to our chat: Customers who open the chat widget and one support agent who will access the chat and respond to inquiries from the dashboard. Users are a fundamental concept in CometChat, which you can read more about here.

我们将有两种类型的用户连接到我们的聊天：打开聊天小部件的客户和一个将访问聊天并响应来自仪表板的查询的支持代理。 用户是CometChat的基本概念，您可以在此处了解更多信息。

Because we will likely have many customers, for each customer who connects to our chat, we will need to dynamically create a CometChat user. However, because there will only be one agent, we can create an “Agent” user in advance from the dashboard.

因为我们可能会有很多客户，所以对于每个连接到我们聊天的客户，我们将需要动态创建一个CometChat用户。 但是，由于只有一个代理，因此我们可以提前从仪表板创建一个“代理”用户。

To do so, click Explore then head to the Users tab. Here, you can click Create User:

为此，请单击“浏览”，然后转到“用户”选项卡。 在这里，您可以单击创建用户：

For the user ID, I wrote “ecommerce-agent” and for the name, I wrote “Demo Agent”. I recommend you use the same values if you’re following along. In any case, take note of the user ID because you’ll need to reference it later.

对于用户ID，我写了“ ecommerce-agent”，对于名字，我写了“ Demo Agent”。 如果您要遵循，建议您使用相同的值。 无论如何，请记下该用户ID，因为以后需要引用它。

Before we move on from the dashboard and on to the code, we should create a CometChat full access key.

在从仪表板转到代码之前，我们应该创建一个CometChat完全访问密钥。

On the same page, click the API Keys tab then Create API Key:

在同一页面上，单击“ API密钥”选项卡，然后单击“创建API密钥”：

I called my key “react-chat-api” but it doesn’t really matter what you write here.

我将密钥称为“ react-chat-api”，但是您在此处写的内容并不重要。

Note your API key and app ID because, like the agent user ID, you’ll need them both later.

请注意您的API密钥和应用程序ID，因为像座席用户ID一样，以后您都需要它们。

设置快递 (Setting up Express)

In the previous step, we created a full access key, which we can use to create CometChat users dynamically. While we could do this on the client, that would mean sharing our private full access key in public, which is a no go.

在上一步中，我们创建了一个完整的访问密钥，可用于动态创建CometChat用户。 尽管我们可以在客户端上执行此操作，但这意味着要在公共场合共享我们的私有完全访问密钥，这是绝对不能的。

To avoid this problem, we’ll create a simple Express server that:

为避免此问题，我们将创建一个简单的Express服务器，该服务器：

1. Creates CometChat user using the full access key
   使用完全访问密钥创建CometChat用户
2. Returns authentication tokens (more on this later)
   返回身份验证令牌(稍后将对此进行详细介绍)
3. Returns a list of CometChat users, for use later in the dashboard
   返回CometChat用户列表，供以后在仪表板中使用

Alright, let’s start.

好吧，让我们开始吧。

First, create a new empty directory for your Express app and run `npm init -y`:

首先，为您的Express应用程序创建一个新的空目录，然后运行`npm init -y` ：

mkdir react-express-chat-widget
cd react-express-chat-widget
npm init -y

Next, install Express and axios:

接下来，安装Express和axios：

npm install express axios

Then, in a file called sever.js paste:

然后，在名为sever.js的文件中粘贴：

const express = require('express');
const axios = require('axios');
const app = express();

// enter CometChat Pro configurations here
const appID = '{appID}';
const apiKey = '{apiKey}';
const agentUID = '{agentUID}';

const url = 'https://api.cometchat.com/v1';

const headers = {
  'Content-Type': 'application/json',
  appid: appID,
  apikey: apiKey,
};

In the above file, we:

在以上文件中，我们：

1. Store our application credentials and agent user ID, which we created earlier
   存储我们先前创建的应用程序凭据和代理用户ID

2. Define the CometChat API url for convenient access

   定义CometChat API url以方便访问

3. Create a headers object with our appID and apiKey. We'll send this header with every request to CometChat

   使用我们的appID和apiKey创建headers对象。 我们将在每次请求时将此标头发送给CometChat

In the same file, let’s now define a route to handle creating new CometChat users.

现在，在同一文件中，定义处理创建新CometChat用户的途径。

In order to create a new user, we need to send a POST request with the UID and name for the user.

为了创建一个新用户，我们需要发送一个带有UID和用户名的POST请求。

In this tutorial, we will hard-code the same name for all customers — we’ll call every customer “customer” — but the UID has to be unique. For the UID, we can use new