Tencent Cloud Chat

https://www.tencentcloud.com/document/product/1047
Admin
Tencent Cloud Chat is a comprehensive instant messaging platform providing real-time messaging, user...
Tokens:2,109,859
Snippets:13,419
Trust Score:10
Update:1 month ago
Show doc for...
Tokens:
Raw
### Vue 2.6 setup: Install dependencies and configure composition-api

Source: https://www.tencentcloud.com/document/product/1047/58645

Steps to set up Vue 2.6 with composition-api and script setup: install dependencies, introduce VueCompositionAPI in main.ts/main.js, add webpack configuration to vue.config.js, and replace the export source in src/TUIKit/adapter-vue.ts.

```bash
npm i @vue/composition-api unplugin-vue2-script-setup vue@2.6.14 vue-template-compiler@2.6.14
```

```javascript
import VueCompositionAPI from "@vue/composition-api";
Vue.use(VueCompositionAPI);
```

```javascript
const ScriptSetup = require("unplugin-vue2-script-setup/webpack").default;
module.exports = {
  parallel: false, // disable thread-loader, which is not compactible with this plugin
  configureWebpack: {
    plugins: [
      ScriptSetup({
        /* options */
      }),
    ],
  },
  chainWebpack(config) {
    // disable type check and let `vue-tsc` handles it
    config.plugins.delete("fork-ts-checker");
  },
};
```

```javascript
// initial writing
export * from "vue";
// replace with
export * from "@vue/composition-api";
```

--------------------------------

### Switch to project directory and install dependencies

Source: https://www.tencentcloud.com/document/product/1047/58645

Switch into the project directory and install the project dependencies.

```bash
cd chat-example
npm install
```

--------------------------------

### Getting the blocklist

Source: https://www.tencentcloud.com/document/product/1047/49568

Code examples for getting the blocklist.

```javascript
chat.getBlacklist();
```

```javascript
let promise = chat.getBlacklist();
promise.then(function(imResponse) {
  console.log(imResponse.data);
}).catch(function(imError) {
  console.warn('getBlacklist error:', imError);
});
```

--------------------------------

### Example: get total unread message count

Source: https://www.tencentcloud.com/document/product/1047/48319

Example usage of chat.getTotalUnreadMessageCount() to get the total unread messages in one-to-one and group conversations.

```javascript
// The total number of unread messages in one-to-one and group conversations
let totalUnreadCount = chat.getTotalUnreadMessageCount();
```

--------------------------------

### Start iOS Server

Source: https://www.tencentcloud.com/document/product/1047/56573

Return to the project root and start the development server for iOS.

```bash
cd ../
npm run start
```

--------------------------------

### Run the demo project in development mode

Source: https://www.tencentcloud.com/document/product/1047/45912

The command launches the project locally with npm. After running, click the 'Experience Chat' card to enter the login page and enter the obtained SDKAppID, userID, and secretKey to experience the chat function.

```bash
# Launch the project
npm run dev
```

--------------------------------

### Get group profile example

Source: https://www.tencentcloud.com/document/product/1047/50405

Example of getting a group profile. The promise resolves with the group data or rejects with an error logged as 'getGroupProfile error'.

```javascript
let promise = chat.getGroupProfile({ groupID: 'group1', groupCustomFieldFilter: ['key1','key2'] });
promise.then(function(imResponse) {
  console.log(imResponse.data.group);
}).catch(function(imError){
  console.warn('getGroupProfile error:', imError); // Failed to obtain the detailed group profile
});
```

--------------------------------

### Initialize Chat SDK with options, log level, and upload plugin

Source: https://www.tencentcloud.com/document/product/1047/47967

Complete initialization example: imports the SDK and upload plugin, creates the chat instance with an SDKAppID, sets the log level (0 for development, 1 for production), and registers the upload plugin. Replace SDKAppID: 0 with your actual SDKAppID.

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

let options = {
  SDKAppID: 0 // Replace 0 with the `SDKAppID` of your chat application when connecting.
};
// 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(options);
  

// Set the SDK log output level.
// 0 - Common level. We recommend you use this level during access as it covers more logs.
// 1 - Release level. We recommend you use this log level in a production environment.
chat.setLogLevel(0); 
// chat.setLogLevel(1);
  

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

--------------------------------

### getJoinedCommunityList Example

Source: https://www.tencentcloud.com/document/product/1047/48171

Example of getting the list of topic-enabled communities.

```APIDOC
let promise = chat.getJoinedCommunityList();
promise.then(function(imResponse) {
  // Got successfully
  console.log(imResponse.data.groupList); // List of communities
}).catch(function(imError){
  console.warn('getJoinedCommunityList error:', imError);
});
```

--------------------------------

### Get blocklist example

Source: https://www.tencentcloud.com/document/product/1047/48152

Example of getting the blocklist by calling chat.getBlacklist(). The returned Promise resolves with imResponse.data on success; the catch block logs an error if the operation fails.

```javascript
let promise = chat.getBlacklist();
promise.then(function(imResponse) {
  console.log(imResponse.data);
}).catch(function(imError) {
  console.warn('getBlacklist error:', imError); // Failed to obtain the blocklist
});
```

--------------------------------

### Example: check SDK readiness

Source: https://www.tencentcloud.com/document/product/1047/48867

Example of checking SDK readiness and storing the result in a variable.

```javascript
let isReady = chat.isReady();
```

--------------------------------

### Project Initialization Options

Source: https://www.tencentcloud.com/document/product/1047/50055

Shows scaffold options for naming, React framework, TypeScript + React Compiler variant, and npm install start.

```text
◇  Project name:
│  chat-integration-react
│
◇  Select a framework:
│  React
│
◇  Select a variant:
│  TypeScript + React Compiler
│
◆  Install with npm and start now?
│  ● Yes / ○ No
```

--------------------------------

### Example: get server time

Source: https://www.tencentcloud.com/document/product/1047/48867

Example of retrieving the server time and storing it in a variable.

```javascript
const serverTime = chat.getServerTime();
```

--------------------------------

### Example: get login user ID

Source: https://www.tencentcloud.com/document/product/1047/48867

Example of retrieving the current login user's ID and storing it in a variable.

```javascript
const userID = chat.getLoginUser();
```

--------------------------------

### Initialize npm and install Tencent Cloud Chat SDK for WebGL

Source: https://www.tencentcloud.com/document/product/1047/41656

Run these commands in the folder containing the WebGL build output to initialize npm and download the @tencentcloud/chat SDK and tim-upload-plugin plugin. Required for enabling Unity WebGL support.

```bash
npm init -y

```

```bash
npm install @tencentcloud/chat --save

```

```bash
npm install tim-upload-plugin --save

```

--------------------------------

### Run the project with npm run serve (webpack3)

Source: https://www.tencentcloud.com/document/product/1047/58645

Use the command `npm run serve` to start the webpack3 project after configuring the overlay.

```bash
npm run serve
```

--------------------------------

### Create a Podfile

Source: https://www.tencentcloud.com/document/product/1047/34308

Creates a Podfile in the project directory. Run this command from the project path.

```bash
pod init
```

--------------------------------

### Install dependencies for Vue 2.6 and below

Source: https://www.tencentcloud.com/document/product/1047/58645

Configure environment for Vue 2.6 and below projects by installing composition API and script setup plugin.

```bash
npm i @vue/composition-api unplugin-vue2-script-setup vue@2.6.14 vue-template-compiler@2.6.14
```

--------------------------------

### Install web dependencies for Chat SDK

Source: https://www.tencentcloud.com/document/product/1047/46264

Run these commands in the web/ directory to install the required JS dependencies for web support. Initialize the project with npm init and then install tim-js-sdk and tim-upload-plugin.

```bash
cd web
  
npm init
  
npm i tim-js-sdk
  
npm i tim-upload-plugin
```

--------------------------------

### Install Flutter dependencies with flutter pub get

Source: https://www.tencentcloud.com/document/product/1047/45907

Run this command in the project root directory to install the Flutter dependencies required by the demo.

```bash
flutter pub get
```

--------------------------------

### Get group online member count example

Source: https://www.tencentcloud.com/document/product/1047/48180

Example of querying the number of online users in a group. Returns a Promise with the member count.

```javascript
// Querying the Number of Online Users in an AVChatRoom
let promise = chat.getGroupOnlineMemberCount('group1');
promise.then(function(imResponse) {
  console.log(imResponse.data.memberCount);
}).catch(function(imError) {
  console.warn('getGroupOnlineMemberCount error:', imError); // Error information
});
```

--------------------------------

### Start project with Vite

Source: https://www.tencentcloud.com/document/product/1047/58644

Runs the development server with `npm run dev` for Vite.

```bash
npm run dev

```

--------------------------------

### Install iOS dependencies and run the demo

Source: https://www.tencentcloud.com/document/product/1047/52397

Installs iOS dependencies with CocoaPods and then runs the project on an iOS device or simulator. Execute the first block in the ios directory, then the second block from the project root.

```bash
cd ios
pod install
```

```bash
cd ../
npm run ios
```

--------------------------------

### Get all group attributes

Source: https://www.tencentcloud.com/document/product/1047/48174

Example of getting all group attributes by passing an empty keyList. The promise resolves with imResponse.data.groupAttributes containing all attributes, or rejects with an error.

```javascript
// Get all group attributes
let promise = chat.getGroupAttributes({
  groupID: 'group1',
  keyList: []
});
promise.then(function(imResponse) { // Got successfully
  console.log(imResponse.data.groupAttributes); // All group attributes
}).catch(function(imError) { // Getting failed
  console.warn('getGroupAttributes error:', imError); // Error information
});
```

--------------------------------

### Install iOS dependencies and run the app

Source: https://www.tencentcloud.com/document/product/1047/48865

Steps to install CocoaPods dependencies and run the iOS app: cd ios, pod install, then cd ../ and npm run ios.

```bash
cd ios
pod install
```

```bash
cd ../
npm run ios
```

--------------------------------

### Get list of specified conversations with chat.getConversationList()

Source: https://www.tencentcloud.com/document/product/1047/48322

Example of passing an array of conversation IDs to retrieve only those specified conversations. The response and error handling are the same as the full-list example.

```javascript
// Get the list of specified conversations
let promise = chat.getConversationList([conversationID1, conversationID2]);
promise.then(function(imResponse) {
  const conversationList = imResponse.data.conversationList;
}).catch(function(imError) {
  console.warn('getConversationList error:', imError); // Failed to obtain the conversation list
});
```

--------------------------------

### Basic UIKitProvider Implementation

Source: https://www.tencentcloud.com/document/product/1047/72048

Demonstrates the simplest way to initialize the UIKitProvider with theme and language settings and access them via the useUIKit hook.

```javascript
import React from 'react';
import { UIKitProvider, useUIKit } from '@tencentcloud/chat-uikit-react';

function App() {
  return (
    <UIKitProvider theme="light" language="zh-CN">
      <ChatApp />
    </UIKitProvider>
  );
}

function ChatApp() {
  const { theme, language } = useUIKit();
  
  return (
    <div>
      <p>Current theme: {theme}</p>
      <p>Current language: {language}</p>
    </div>
  );
}

export default App;
```

--------------------------------

### Get all unmarked conversations with chat.getConversationList({ markType: 0 })

Source: https://www.tencentcloud.com/document/product/1047/48322

Example of filtering conversations with markType set to 0 to get conversations that are not marked with any specific type, such as not starred.

```javascript
// Get all unmarked conversations
let promise = chat.getConversationList({ markType: 0 });
promise.then(function(imResponse) {
  const conversationList = imResponse.data.conversationList;
});
```

--------------------------------

### Start the project with npm run dev

Source: https://www.tencentcloud.com/document/product/1047/58645

Use the command `npm run dev` in the project root to start the Vue TUIKit demo.

```bash
npm run dev
```

--------------------------------

### Get Group Application List Example

Source: https://www.tencentcloud.com/document/product/1047/50404

Example of retrieving the group application list and iterating over each application. The applicationList items contain properties like applicant, groupID, applicationType, and note. The example calls handleGroupApplication for each item.

```javascript
let promise = chat.getGroupApplicationList();
promise.then(function(imResponse) {
  const { applicationList } = imResponse.data;
  applicationList.forEach((item) => {
    // item.applicant - Applicant userID
    // item.applicantNick - Applicant nickname
    // item.groupID - group ID
    // item.groupName - group Name
    // item.applicationType - Application type: 0 for group join application, 2 for invitation to join the group
    // item.userID - When applicationType = 2, it is the userID of the invited user.
    // item.note - reamake
    chat.handleGroupApplication({
      handleAction: 'Agree',
      application: {...item},
    });
  });
}).catch(function(imError) {
  console.warn('getGroupApplicationList error:', imError);
});
```

--------------------------------

### Get Group Member List with Mark Example

Source: https://www.tencentcloud.com/document/product/1047/48177

Example of retrieving the list of online members with a specified mark in an AVChatRoom. The filter parameter is the mark type (e.g., 1000).

```javascript
// Get the list of online members with a specified mark in the AVChatRoom
let promise = chat.getGroupMemberList({ groupID: 'group1', filter: 1000, offset: 0 });
promise.then(function(imResponse) {
  console.log(imResponse.data.memberList); // Group member list
}).catch(function(imError) {
  console.warn('getGroupMemberList error:', imError);
});
```
Tokens:
Raw