tencent cloud

Feedback

JavaScript

Last updated: 2024-11-14 17:56:05
    This document describes how to quickly integrate the Tencent Cloud Chat SDK into your web, mini program, uni-app and React Native projects.

    File Structure of the Chat SDK

    

    Integrating the SDK

    You can integrate the Chat SDK into your web, mini program, and uni-app projects by using npm.
    You can integrate the upload plugin tim-upload-plugin for faster and safer upload of rich media resources.

    Integration via npm (Recommended)

    Use npm to install the corresponding Chat SDK dependencies in your project.
    npm install @tencentcloud/chat --save
    // The Tencent Cloud Chat upload plugin is required to send messages such as images and files.
    npm install tim-upload-plugin --save
    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 level.
    // 0: Common level. You are advised to use this level during access as it covers more logs.
    // 1: Release level. You are advised to use this level for key information in a production environment.
    chat.setLogLevel(0);
    // chat.setLogLevel(1);
    
    // Register the Tencent Cloud Chat upload plugin.
    chat.registerPlugin({'tim-upload-plugin': TIMUploadPlugin});

    Set Log Level

    Set the log level. Logs below the specified level will not be output.
    API
    chat.setLogLevel(level);
    Name
    Type
    Description
    level
    Number
    Log levels: 0 - Normal level, with a larger amount of logs. It is recommended for use during integration. 1 - Release level, the SDK outputs key information. It is recommended for use in production environments. 2 - Warning level, the SDK only outputs warning and error level logs. 3 - Error level, the SDK only outputs error level logs. 4 - No log level, the SDK will not print any logs.
    Sample
    chat.setLogLevel(0);

    Register Plugins

    Note:
    1. To send messages such as images, voice, video, and files, you need to use the upload plugin tim-upload-plugin to upload files to Tencent Cloud Object Storage.
    2. When using tim-upload-plugin in a React Native project, you need to upgrade tim-upload-plugin to version v1.3.1 or above. Also, to improve the user experience in poor network conditions or during network switching, you need to register the network status listening plugin @react-native-community/netinfo.
    3. To send rich media messages in a React Native packaged App, you need to add permissions:
    Add the following permissions to the AndroidManifest.xml in the Android project:
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.RECORD_AUDIO" />
    Add the following permissions to the `Info.plist` in the iOS project:
    <key>NSCameraUsageDescription</key>
    <string>We need access to your camera to take photos</string>
    <key>NSPhotoLibraryUsageDescription</key>
    <string>We need access to your photo library to select photos</string>
    <key>NSMicrophoneUsageDescription</key>
    <string>We need access to your microphone to record audio</string>
    API
    chat.registerPlugin(options);
    The options parameter is of the Object type. It contains the following attribute values:
    Name
    Type
    Description
    key
    String
    Plugin name.
    value
    Class
    Plugin class.
    Sample
    chat.registerPlugin({'tim-upload-plugin': TIMUploadPlugin});
    // Register the network status listening plugin in a React Native project.
    npm install @react-native-community/netinfo --save
    import NetInfo from "@react-native-community/netinfo";
    chat.registerPlugin({'chat-network-monitor': NetInfo});
    Next step,initialize Chat SDK.

    Relevant Resources

    FAQs

    Are there any open-source UI components that can be reused or redeveloped? Tencent Cloud Chat provides open-source UIKits for all platforms that can be reused or redeveloped by developers. Find the reference documentation below:
    
    
    Contact Us

    Contact our sales team or business advisors to help your business.

    Technical Support

    Open a ticket if you're looking for further assistance. Our Ticket is 7x24 avaliable.

    7x24 Phone Support