# Official JavaScript SDK for Tencent Cloud Chat

## About Tencent Cloud Chat

[Tencent Cloud Chat](https://trtc.io/products/chat) provides globally interconnected chat APIs, multi-platform SDKs, and UIKit components to help you quickly bring messaging capabilities such as one-to-one chat, group chat, chat rooms, and system notifications to your applications and websites.

## Benefits
### Higher Engagement with Our Feature-rich Chat
<img src="https://trtc.io/_next/static/media/pic1.3de62d45.png?auto=format&fit=max&w=3840" width=580 height=360 />

### Manage Groups and Conversations at Ease
<img src="https://trtc.io/_next/static/media/pic2.55b58e0d.png?auto=format&fit=max&w=3840" width=580 height=360 />

### Build Your Own Chat App in just One Day
<img src="https://trtc.io/_next/static/media/pic3.a1b13e76.png?auto=format&fit=max&w=3840" width=580 height=360 />

👉🏻 [Free Demo](https://trtc.io/demo/homepage/#/detail?scene=messenger)

📄 [Documentation](https://trtc.io/document/50061?platform=web&product=chat)

## Global Compliance Certifications
<table>
<tr>
<td> <img src="https://staticintl.cloudcachetci.com/cms/backend-cms/Vk2L735_1SOC.png" width=90 height=80 /> </td>
<td> <img src="https://staticintl.cloudcachetci.com/cms/backend-cms/Mp5i133_2ISO%209001.png" width=88 height=90 /> </td>
<td> <img src="https://staticintl.cloudcachetci.com/cms/backend-cms/AfnR546_4ISO%2027001.png" width=90 height=87 /> </td>
<td> <img src="https://staticintl.cloudcachetci.com/cms/backend-cms/WQjf098_5ISO%2027017.png" width=90 height=87 /> </td>
<td> <img src="https://staticintl.cloudcachetci.com/cms/backend-cms/aNQJ919_6ISO%2027018.png" width=90 height=86 /> </td>
</tr>
<tr>
<td> <img src="https://staticintl.cloudcachetci.com/cms/backend-cms/Rj5T795_7CSASTAR.png" width=90 height=90 /> </td>
<td> <img src="https://staticintl.cloudcachetci.com/cms/backend-cms/BXNX111_8NIST%20CSF.png" width=90 height=84 /> </td>
<td> <img src="https://staticintl.cloudcachetci.com/cms/backend-cms/dHEg621_9ISO%2027701.png" width=90 height=86 /> </td>
<td> <img src="https://staticintl.cloudcachetci.com/cms/backend-cms/BLQI655_10ISO%2029151.png" width=90 height=86 /> </td>
<td> <img src="https://staticintl.cloudcachetci.com/cms/backend-cms/dHDE860_11BS10012.png" width=90 height=42 /> </td>
</tr>
</table>

## Core Capabilities

- 1 Billion+ Monthly active users
- 550 Billion+ Daily peak messages
- 100,000+ Customers worldwid
- 99.99% Message success rate

## Use Cases

### Social
Build real-time community interactions in your app using a simple chat API.
✓Various message types ✓Announcement ✓Group chat

<img src="https://trtc.io/_next/static/media/group1.3289e577.png?auto=format&fit=max&w=3840" width=588 height=602 />

### Live
Welcome a large audience to your immersive live show using a simple chat API.
✓Unlimited participants ✓Interactive live streaming ✓Online chat

<img src="https://trtc.io/_next/static/media/group6.3937f7d8.png?auto=format&fit=max&w=3840" width=588 height=602 />

### Metaverse
Bridge the limitless virtual and physical worlds using simple chat SDKs.
✓Chat in metaverse ✓User profile and management ✓Immersive interactions

<img src="https://trtc.io/_next/static/media/group5.6975e625.png?auto=format&fit=max&w=3840" width=588 height=602 />

### Gaming
Intensify gaming with real-time chat engagement using a simple chat API.
✓Chat in game ✓Global message access ✓User profile and management

<img src="https://trtc.io/_next/static/media/group4.0361228f.png?auto=format&fit=max&w=3840" width=588 height=602 />

### Education
Create interactive virtual classrooms with real-time chat experiences using simple chat SDK and API.
✓Class start notifications ✓Student management ✓Class messages

<img src="https://trtc.io/_next/static/media/group2.08a44cc6.png?auto=format&fit=max&w=3840" width=588 height=602 />

### On-demand Service
Resolve order issues with in-app conversations quickly, with simple SDK and API.
✓Customer service support ✓Order cancellations minimization ✓Social features

<img src="https://trtc.io/_next/static/media/group3.45675954.png?auto=format&fit=max&w=3840" width=588 height=602 />

## Installation

```javascript
npm install @tencentcloud/chat --save
// The upload plugin is required to send messages such as images and files.
npm install tim-upload-plugin --save
```

## Getting started

```javascript
import TencentCloudChat from '@tencentcloud/chat';
import TIMUploadPlugin from 'tim-upload-plugin';

// Create an SDK instance. 
// The `TencentCloudChat.create()` method returns the same instance for the same `SDKAppID`.
// The SDK instance is usually represented by `chat`.
let chat = TencentCloudChat.create({
  SDKAppID: 0 // Replace `0` with the `SDKAppID` of your Chat app during access.
}); 

// Common level. You are advised to use this level during connection as it covers more logs.
chat.setLogLevel(0);
// Release level, at which the SDK outputs important information.
// You are advised to use this log level in a production environment.
// chat.setLogLevel(1);

// Register the Tencent Cloud Chat upload plugin.
chat.registerPlugin({'tim-upload-plugin': TIMUploadPlugin});
```

## Sending your first message

### 1. Generate UserSig

UserSig is a password used to log in to Tencent Cloud Chat. It is the ciphertext obtained after data such as UserID is encrypted. This [document](https://trtc.io/document/34385) describes how to generate a UserSig.

### 2. Listen to the SDK_READY event

```javascript
// This event is triggered when the SDK enters the ready state.
// When SDK is ready, the access side can call SDK APIs such as the message sending API to use various features of the SDK
let onSdkReady = function(event) {
  // Now you can create a message instance and send it.
};
chat.on(TencentCloudChat.EVENT.SDK_READY, onSdkReady);

let onMessageReceived = function(event) {
  // A newly pushed one-to-one message, group message, group tip, or group system notification is received. You can traverse event.data to obtain the message list and render it to the UI.
  // event.name - TencentCloudChat.EVENT.MESSAGE_RECEIVED
  // event.data - An array that stores Message objects - [Message]
};
chat.on(TencentCloudChat.EVENT.MESSAGE_RECEIVED, onMessageReceived);

```

### 3. Login in to the Chat SDK

```javascript
let promise = chat.login({userID: 'your userID', userSig: 'your userSig'});
promise.then(function(imResponse) {
  console.log(imResponse.data); // Login successful
  if (imResponse.data.repeatLogin === true) {
    // Indicates that the account has logged in and that the current login will be a repeated login.
    console.log(imResponse.data.errorInfo);
  }
}).catch(function(imError) {
  console.warn('login error:', imError); // Error information
});
```

After successful login, to call APIs that require authentication, such as `sendMessage`, you must wait until the SDK enters the ready state (you can obtain the status of the SDK by listening to the `TencentCloudChat.EVENT.SDK_READY` event.

### 3. Create a message instance

```javascript
let message = chat.createTextMessage({
  to: 'user1',
  conversationType: TencentCloudChat.TYPES.CONV_C2C,
  payload: {
    text: 'Hello Tencent!'
  },
  // Message custom data (saved in the cloud, will be sent to the peer end, and can still be pulled after the app is uninstalled and reinstalled)
  // cloudCustomData: 'your cloud custom data'
});
```

### 4. Send the message instance

```javascript
let promise = chat.sendMessage(message);
promise.then(function(imResponse) {
  // The message is sent successfully.
  console.log(imResponse);
}).catch(function(imError) {
  // The message fails to be sent.
  console.warn('sendMessage error:', imError);
});
```

## Contact Us

Join a Tencent Cloud Chat developer group for Reliable technical support & Product details & Constant exchange of ideas.

- Telegram group (EN): [join](https://t.me/+1doS9AUBmndhNGNl)
- WhatsApp group (EN): [join](https://chat.whatsapp.com/Gfbxk7rQBqc8Rz4pzzP27A)
- Telegram group (ZH): [join](https://t.me/tencent_imsdk)
- WhatsApp group (ZH): [join](https://chat.whatsapp.com/IVa11ZkVmKTEwSWsAzSyik)

## Supported Browsers

|  Browser   |  Supported versions  |
|  ----  | ----  |
| Chrome | 16 or higher |
| Edge | 	13 or higher |
| Firefox | 11 or higher |
| Safari | 7 or higher |
| Internet Explorer	 | 10 or higher |
| Opera | 12.1 or higher |
| iOS Safari	| 7 or higher |
| Android Browswer | 4.4 (Kitkat) or higher |