如何使用聊天引擎API在React.js中创建一个简单的聊天应用

DebugUsery
286 阅读6分钟

使用聊天引擎API在React.js中创建一个简单的聊天应用程序

在这篇文章中，我将向你展示使用React.js创建一个聊天应用程序的最简单方法。这完全不需要服务器端的代码，因为我们会让[聊天引擎]API处理后端。

你将了解聊天引擎API是如何工作的，以及如何使用它来创建一个精确而实用的直接通信应用程序。

如果你跟着这个教程走，最后你会得到你自己的聊天应用程序，如果你愿意，你可以在此基础上进一步发展。

前提条件

  • 具有JavaScript的基本知识。
  • [React.js]库的基本知识。
  • 在你的本地开发环境中安装[Node.js]。
  • 你应该熟悉[Node包管理器]。

聊天引擎API是什么？

聊天引擎是一种API，使开发聊天服务变得非常简单。

聊天引擎使开发聊天服务变得简单，而这些服务宁愿花时间从头开始构建。

与从头开始建立的系统相比，使用聊天引擎等服务具有更大的优势，因为它们提供了一个易于使用的环境。

例如，它为聊天托管提供了对REST API的访问。

聊天引擎非常强大，可以满足您在聊天用户界面组件开发和存储方面的所有需求。

创建应用程序

我们没有聊天引擎方面的基本知识，让我们继续进行，并按以下方式设置我们的应用程序。

在你的终端上运行以下命令，创建一个聊天应用程序项目。

npx create-react-app chat-application-example

如果你喜欢使用Vite工具来创建React应用程序，它的分步指南将在本文中讲到。

安装后，cd ，进入项目根目录，安装聊天引擎，如下图所示。

cd chat-application-example
npm i react-chat-engine

设置一个聊天引擎项目

在本节中，我们将使用下面描述的步骤设置聊天引擎应用程序。

  • 您需要拥有chatengine.io账户的API密钥。
  • 注册/登录到您的账户。
  • 您将被重定向到一个像下面这样的页面。

Project Setup

  • 点击你在页面上看到的New Project 按钮，并给你的项目一个标题。

把项目ID和密匙保存在安全的地方。我们将沿途使用它们。

  • 还是在这个页面上，点击右上角的 "新用户 "部分，在弹出的模式中给你的新用户取个名字。

New User

你可能需要创建一个用户列表，以便在以后开始直接聊天时从中选择。

作为一个开发者，要练习将敏感信息，如你获得的用户秘密，以及项目ID与代码的其他部分分开。

它可以防止这些信息暴露给未经授权的用户，从而保护你的数据。

因此，在项目根部创建一个".env"文件，并在项目的根目录下设置 用户秘密和 项目ID保存为环境变量。

记得将.env文件添加到.gitignore文件中，以避免在分享你的代码时推送此类敏感数据。

CHAT_APP_PROJECT_ID = projectIdxxxxxxxx
CHAT_APP_USER_SECRET = secretkeyxxxxxxx

注意：在用户秘密参数中包括您在创建用户时使用的秘密，而不是随项目ID提供的私钥。

添加ChatEngine组件

在创建的React应用中，删除所有不必要的文件，如 logo.SVG, reportWebVital.js, setupTest.js, 和App.test.js.

记得删除index.js 文件中的reportWebVital 导入和它的调用函数。

在我们的应用程序中设置聊天引擎将如下所示。

import React from 'react'
import {ChatEngine} from 'react-chat-engine';

//Using arrow function component
const App = () => {
  return (
    <ChatEngine
      userName=''//Put your userName instead
      projectID = ''// Your project id goes here
      userSecret=''// Replace with your secret key
    />
  )
}
export default App

传递给该组件的属性是。

  1. 用户名- 你在[聊天引擎]的项目中创建的。
  2. 项目ID- 这是为你在仪表板上添加的每个项目创建的。
  3. 密匙- 我们之前秘密存储的，以及我们为新用户想出的用户名。

为测试目的，我的用户名将是'Muganga'。

这个组件设置了聊天引擎，或者用通俗的话说，是任何聊天应用程序的骨干。

我们可能想创建群组聊天应用程序，或直接信息应用程序。

实现直接消息应用程序

在一个典型的直接消息应用程序中，消息的发送者需要使用他们的联系人或他们的用户名来选择接收者。这与聊天引擎的实现没有任何区别。

使用API中的getOrCreateChat() 函数，该函数携带一个对象或 "字典"，如果你是python背景的话。

这个对象接受用户名（来自创建的用户），可以从中搜索现有的聊天，或创建一个新的。

现在，我想你已经在脑海中建立了应用程序的用户界面。

这个用户界面将构成一个用户名字段，一个可以与get()* 或create() 聊天的用户名部分，当然还有一个在文本字段中输入信息时点击发送的按钮。

创建一个名为DirectMessaging.js 的组件文件，我们将在其中写下所需的几行代码，以使我们的应用程序成为现实。

注意：React组件的命名惯例应该始终适用。

我们将使用。

  • 之前实现的导入的ChatEngine组件，有额外的属性如宽度和高度。
  • useState挂钩。
// DirectMessaging.js file code
import React, {useState} from 'react';
import {ChatEngine, getOrCreateChat} from 'react-chat-engine'

const DirectMessaging = () => {
    // The useState hook initially sets the username to an empty string
    const[username, setUsername] = useState('')
    //Custom function that will implement the getOrCreateChat function that to select username to chat with
    //only when the correct credentials(user  secret, project id, username) are passed will the application be rendered
    function implementingDirectChat(credentials){
        getOrCreateChat(
            credentials,
            // function will only work if the app is a Direct Messaging one, hence setting 'is_direct_chat' to true and consequentially setting a list of usernames to search from.
            {is_direct_chat: true, usernames:[username]},
            () => setUsername('')
        )
    }

    const displayChatInterface = (credentials) => {
        return (
            <div>
                <input
                    type="text"
                    placeholder='Find username'
                    value={username} //prop from the useState hook
                    // A controlled function that sets the username to what the user types in the input field
                    onChange = {(e) => setUsername(e.target.value)}
                />

                {/* clicking button will call the implementingDirectChat function that displays a list of usernames to create or find an existing chat.  */}
                <button onClick={() => implementingDirectChat(credentials)}>
                    Create Chat
                </button>

            </div>
        )
    }

    return(
        <ChatEngine
            height='100vh'
            userName='Muganga'
            // Accessing the stored environment variables in .env file
            userSecret={process.env.CHAT_APP_USER_SECRET}
            projectID={process.env.CHAT_APP_PROJECT_ID}
            displayNewChatInterface={(credentials) => displayChatInterface(credentials)}
            />
    )
}

export default DirectMessaging

注意：在App.js组件中导入DirectMessaging.js组件以便在浏览器上渲染。

App.js文件将显示如下。

import React from 'react'
import DirectMessaging from './DirectMessaging';
import './App.css';


const App = () => {
  return (

    <DirectMessaging/>
  )
}

export default App

运行。

npm start

如果你的浏览器渲染出这样的页面，你就知道你做得很好。

New Chat

让我们让我们的应用程序变得实时

App

搜索你在聊天引擎项目设置时命名的应用程序标题，点击左上角标有 ***"添加聊天"***左上角的蓝色按钮。

右上角的 人右上角的下拉菜单是您搜索项目中现有用户的地方。从显示的列表中选择一个用户名来启动聊天。

Selecting user

在文本输入栏上输入，然后点击标有send 的按钮。

Start chat

你可以继续给其他用户发短信，只要你愿意。

观察左边有聊天标题的部分，它显示你最后发送的信息。

Final App

用代码弄脏你的手是再有趣不过的了!对吗？

总结

现在使用聊天引擎API创建任何聊天应用程序似乎都很容易，你不觉得吗？

毫无疑问，你可以使用API来创建你自己的直接消息应用程序，甚至更好的是，一个群组聊天应用程序。

avatar
文章
阅读
粉丝