agora-chat-uikit

Get Started with Agora Chat UIKit for Web

Agora Chat UIKit for Web is a React UI component library built on top of Agora Chat SDK. It provides a set of general UI components, a conversation module, and a chat module that enable developers to easily craft a chat app to suit actual business needs. Also, this library calls interfaces in Agora Chat SDK to implement related chat logics and data processing, allowing developers to only focus on their own business and personalized extensions.

Following the guide below, you can start sending your first message.

Prerequisites

In order to follow the procedure in this page, you must have:

• React 16.8.0 or later
• React DOM 16.8.0 or later
• A valid Agora account.
• A valid Agora project with an App Key.

Compatible browsers

Browser	Supported Version
IE	11 or later
Edge	43 or later
Firefox	10 or later
Chrome	54 or later
Safari	11 or later

Integrate Agora Chat UIKit for Web into your project

1. Create a project

//Install a CLI tool.

npm install create-react-app

//Create a my-app project.
npx create-react-app my-app
cd my-app

//The project directory. 
├── package.json
├── public                  //The static directory of Webpack.
│   ├── favicon.ico
│   ├── index.html          //The default single-page app.
│   └── manifest.json
├── src
│   ├── App.css             //The CSS of the app's root component.  
│   ├── App.js              //The app component code.
│   ├── App.test.js
│   ├── index.css           //The style of the startup file.
│   ├── index.js            //The startup file.
│   ├── logo.svg
│   └── serviceWorker.js
└── yarn.lock

2. Integrate agora-chat-uikit

Install agora-chat-uikit

• To install Agora chat UIKit for Web with npm, run the following command:

npm  install chat-uikit --save

• To Install Agora chat UIKit for Web with Yarn, run the following command:

yarn add chat-uikit

Add the EaseApp component

Import agora-chat-uikit into your code.

// App.js
import React, {Component} from 'react';
import { EaseApp } from "chat-uikit"
import './App.scss';

class App extends Component {
  render() {
    return (
      <div className="container">
          <EaseApp
              appkey: "xxx", 	//Your registered App Key. 
              username: "xxx",  //The user ID of the current user.
              agoraToken:"xxx"  //The Agora token. For how to obtain an Agora token, see descriptions in the Reference.
            /> 
      </div>
    );
  }
}

export default App;

Set the chat page size

/** App.css */ 
.container {
  height: 100%;
  width: 100%
}

Run the project and send your first message

Now, you can run your app to send messages. In this example, you can use the default App Key (41117440#383391), but need to register your own App Key in the formal development environment. When the default App Key is used, a user will receive a one-to-one chat message and a group chat message upon the first login and can type the first message in a type of conversation and send it.

Note: If a custom App Key is used, no contact is available by default and you need to first add contacts or add contacts to groups.

npm run start

Now, your app is opened in the browser.

Reference

How to get an Agora token

// Sends a request.
function postData(url, data) {
  return fetch(url, {
      body: JSON.stringify(data),
      cache: 'no-cache',
      headers: {
          'content-type': 'application/json'
      },
      method: 'POST',
      mode: 'cors',
      redirect: 'follow',
      referrer: 'no-referrer',
  })
      .then(response => response.json())
}

// Gets a token from the app server.
postData('https://docs.agora.io/cn/AgoraPlatform/sign_in_and_sign_up', { "userAccount": username, "userPassword": password }).then((res) => {
  let agoraToken = res.accessToken
})