206 lines
8.9 KiB
Markdown
206 lines
8.9 KiB
Markdown
|
|
# Official JavaScript SDK for Tencent Cloud Chat
|
|
|
|
## About Tencent Cloud Chat
|
|
|
|
[Tencent Cloud Chat](https://www.tencentcloud.com/products/im) 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.
|
|
|
|
👉🏻 [Free Demo](https://web.sdk.qcloud.com/im/demo/intl/index.html)
|
|
|
|
📄 [Documentation](https://www.tencentcloud.com/document/product/1047/34309)
|
|
|
|
## 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
|
|
|
|
<img src="https://staticintl.cloudcachetci.com/cms/backend-cms/5a5n391_APP%E5%86%85%E8%81%8A%E5%A4%A9%402x.png" width=730 height=410 />
|
|
|
|
Empower chat messaging across applications to create one-to-one chats, group chats, and on-screen commenting and support multiple messages types such as text, images, audio and video messages.
|
|
|
|
|
|
<img src="https://staticintl.cloudcachetci.com/cms/backend-cms/f8XS294_AudioVideoCall.jpg" width=730 height=410 />
|
|
|
|
Integrate audio/video call capabilities into your app with a few lines of code through audio/video UI components. Offline call push is also supported to allow your app users get every calls.
|
|
|
|
|
|
<img src="https://staticintl.cloudcachetci.com/cms/backend-cms/cNAS158_Live%20Streamingjpg.jpg" width=730 height=410 />
|
|
|
|
Chat supports audio-video groups with unlimited number of members, providing chat, like, gift giving, following, group member management and other functions to help you achieve in-app live streaming.
|
|
|
|
## Scenarios
|
|
|
|
- Interactive Live Streaming
|
|
<img src="https://cloudcache.intl.tencent-cloud.com/cms/backend-cms/HY4F687_%E4%BA%92%E5%8A%A8%E7%9B%B4%E6%92%AD%402x.jpg" width=730 height=410 />
|
|
|
|
- Social Messaging
|
|
<img src="https://cloudcache.intl.tencent-cloud.com/cms/backend-cms/m9yR325_%E7%A4%BE%E4%BA%A4%E6%B2%9F%E9%80%9A%402x.jpg" width=730 height=410 />
|
|
|
|
- Influencer Marketing
|
|
<img src="https://cloudcache.intl.tencent-cloud.com/cms/backend-cms/VtQ5764_%E7%94%B5%E5%95%86%E5%B8%A6%E8%B4%A7%402x.jpg" width=730 height=410 />
|
|
|
|
- Interactive Game
|
|
<img src="https://cloudcache.intl.tencent-cloud.com/cms/backend-cms/XubI769_%E4%BA%92%E5%8A%A8%E6%B8%B8%E6%88%8F%402x.jpg" width=730 height=410 />
|
|
|
|
- Customer Service
|
|
<img src="https://cloudcache.intl.tencent-cloud.com/cms/backend-cms/L7Q6912_%E5%9C%A8%E7%BA%BF%E5%AE%A2%E6%9C%8D%402x.jpg" width=730 height=410 />
|
|
|
|
- Education
|
|
<img src="https://cloudcache.intl.tencent-cloud.com/cms/backend-cms/dkIZ813_%E5%9C%A8%E7%BA%BF%E6%95%99%E8%82%B2%402x.jpg" width=730 height=410 />
|
|
|
|
- Healthcare
|
|
<img src="https://cloudcache.intl.tencent-cloud.com/cms/backend-cms/77Ds965_%E5%9C%A8%E7%BA%BF%E5%8C%BB%E7%96%97%402x.jpg" width=730 height=410 />
|
|
|
|
- Smart Device
|
|
<img src="https://cloudcache.intl.tencent-cloud.com/cms/backend-cms/yMRc936_%E6%99%BA%E8%83%BD%E8%AE%BE%E5%A4%87%402x%20%281%29.jpg" width=730 height=410 />
|
|
|
|
- OA
|
|
<img src="https://cloudcache.intl.tencent-cloud.com/cms/backend-cms/nXQN331_%E4%BC%81%E4%B8%9A%E5%8A%9E%E5%85%AC%402x.jpg" width=730 height=410 />
|
|
|
|
- Meeting
|
|
<img src="https://cloudcache.intl.tencent-cloud.com/cms/backend-cms/24ZF778_%E5%9C%A8%E7%BA%BF%E4%BC%9A%E8%AE%AE%402x.jpg" width=730 height=410 />
|
|
|
|
- Private Cloud Deployment
|
|
<img src="https://cloudcache.intl.tencent-cloud.com/cms/backend-cms/aL7m811_%E7%A7%81%E6%9C%89%E5%8C%96%E9%83%A8%E7%BD%B2%402x.jpg" width=730 height=410 />
|
|
|
|
## 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://www.tencentcloud.com/document/product/1047/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 | |