tencent cloud

Feedback

JavaScript

Last updated: 2024-10-30 11:35:21

    Feature Description

    You must initialize the Chat SDK before using its features.

    Initialization

    You can initialize the SDK in the following steps:
    1. Prepare an SDKAppID.
    2. Call TencentCloudChat.create to initialize the SDK.
    3. Add SDK event listeners.
    The detailed steps are as follows.

    Preparing an SDKAppID

    To perform the initialization, you must have a correct SDKAppID. The SDKAppID uniquely identifies a Tencent Cloud Chat account. We recommend you apply for a new SDKAppID for each application. Messages are naturally isolated and cannot communicate between different SDKAppID values. In the Chat Console, you can view all your SDKAppID values, and you can click Create Application to create an SDKAppID.
    
    

    Calling the initialization API

    After performing the above steps, you can call TencentCloudChat.create to initialize the SDK.
    API
    TencentCloudChat.create(options);
    The options parameter is of the Object type. It contains the following attribute values:
    Name
    Type
    Description
    SDKAppID
    Number
    SDKAppID of the chat app
    proxyServer
    String | undefined
    WebSocket proxy server
    Sample
    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});

    Listening on events

    SDK_READY

    This event is triggered when the SDK enters the ready status. When SDK is ready, you can call SDK APIs such as the message sending API to use various features of the SDK.
    let onSdkReady = function(event) {
    let message = chat.createTextMessage({
    to: 'user1',
    conversationType: TencentCloudChat.TYPES.CONV_C2C,
    payload: { text: 'Hello world!'
    }});
    chat.sendMessage(message);
    };
    chat.on(TencentCloudChat.EVENT.SDK_READY, onSdkReady);

    SDK_NOT_READY

    This event is triggered when the SDK enters the not ready status. When SDK is not ready, you cannot use SDK features such as message sending. To use them, you need to call the login API to drive the SDK into the ready status.
    let onSdkNotReady = function(event) {
    // chat.login({userID: 'your userID', userSig: 'your userSig'});
    };
    chat.on(TencentCloudChat.EVENT.SDK_NOT_READY, onSdkNotReady);

    MESSAGE_RECEIVED

    This event is triggered when the SDK receives a newly pushed one-to-one message, group message, group tip, or group system message. When this event occurs, you can traverse event.data to obtain the message list and render it to the UI.
    let onMessageReceived = function(event) {
    // event.data - An array that stores Message objects - [Message]
    };
    chat.on(TencentCloudChat.EVENT.MESSAGE_RECEIVED, onMessageReceived);

    MESSAGE_MODIFIED

    This event is triggered when the SDK receives a notification for message modifications. When this event occurs, the message sender can traverse event.data to obtain the message list and update the content of the message with the same ID on the UI.
    let onMessageModified = function(event) {
    // event.data - An array that stores modified Message objects - [Message]
    };
    chat.on(TencentCloudChat.EVENT.MESSAGE_MODIFIED, onMessageModified);

    MESSAGE_REVOKED

    This event is triggered when the SDK receives a notification indicating that messages are recalled. When this event occurs, the access side can traverse event.data to obtain data of the message recall list and render the recalled messages to the UI. For example, The peer end has recalled a message can be displayed if a message is recalled during a one-to-one conversation, and "XXX has recalled a message" can be displayed if a message is recalled during a group conversation.
    let onMessageRevoked = function(event) {
    // event.data - An array that stores Message objects - [Message]
    // The `isRevoked` attribute value of each Message object is `true`
    };
    chat.on(TencentCloudChat.EVENT.MESSAGE_REVOKED, onMessageRevoked);

    MESSAGE_READ_BY_PEER

    This event is triggered when the SDK receives a notification indicating that messages have been read by peer.
    let onMessageReadByPeer = function(event) {
    // event.data - An array that stores Message objects - [Message]
    // The `isPeerRead` attribute value of each Message object is `true`
    };
    chat.on(TencentCloudChat.EVENT.MESSAGE_READ_BY_PEER, onMessageReadByPeer);

    MESSAGE_READ_RECEIPT_RECEIVED

    This event is triggered when the SDK receives message read receipts.
    let onMessageReadReceiptReceived = function(event) {
    // event.data - An array that stores read receipts
    const readReceiptInfoList = event.data;
    readReceiptInfoList.forEach((item) => {
    const { groupID, userID, messageID, readCount, unreadCount, isPeerRead } = item;
    // messageID - message ID
    // userID - receiver ID
    // isPeerRead - whether the message is read by peer
    // groupID - group ID
    // readCount - count of members read the message
    // unreadCount - count of members do not read the message
    const message = chat.findMessage(messageID);
    if (message) {
    if (message.conversationType === TencentCloudChat.TYPES.CONV_C2C) {
    if (message.readReceiptInfo.isPeerRead === true) {
    // message read by peer
    }
    } else if (message.conversationType === TencentCloudChat.TYPES.CONV_GROUP) {
    if (message.readReceiptInfo.unreadCount === 0) {
    // message read by all group members
    } else {
    // message.readReceiptInfo.readCount
    // If you want to find out who have read the message, please call getGroupMessageReadMemberList
    }
    }
    }
    });
    }
    chat.on(TencentCloudChat.EVENT.MESSAGE_READ_RECEIPT_RECEIVED, onMessageReadReceiptReceived);
    

    MESSAGE_EXTENSIONS_UPDATED

    This event is triggered when the SDK receives a notification indicating that message extensions are updated.
    let onMessageExtensionsUpdated = function(event) {
    const { messageID, extensions } = event.data;
    // messageID - message ID
    // extensions - list of message extensions
    extensions.forEach((item) => {
    const { key, value } = item;
    });
    };
    chat.on(TencentCloudChat.EVENT.MESSAGE_EXTENSIONS_UPDATED, onMessageExtensionsUpdated);

    MESSAGE_EXTENSIONS_DELETED

    This event is triggered when the SDK receives a notification indicating that message extensions are deleted.
    let onMessageExtensionsDeleted = function(event) {
    const { messageID, keyList } = event.data;
    // messageID - message ID
    // keyList - list of keys which are deleted
    keyList.forEach((key) => {
    // console.log(key)
    });
    };
    chat.on(TencentCloudChat.EVENT.MESSAGE_EXTENSIONS_DELETED, onMessageExtensionsDeleted);

    CONVERSATION_LIST_UPDATED

    This event is triggered when the conversation list is updated. event.data is an array that stores the Conversation objects.
    let onConversationListUpdated = function(event) {
    console.log(event.data); // Array that stores Conversation objects - [Conversation]
    };
    chat.on(TencentCloudChat.EVENT.CONVERSATION_LIST_UPDATED, onConversationListUpdated);

    TOTAL_UNREAD_MESSAGE_COUNT_UPDATED

    This event is triggered when the total unread message count of all conversations updated.
    let onTotalUnreadMessageCountUpdated = function(event) {
    console.log(event.data);
    };
    chat.on(TencentCloudChat.EVENT.TOTAL_UNREAD_MESSAGE_COUNT_UPDATED, onTotalUnreadMessageCountUpdated);

    CONVERSATION_GROUP_LIST_UPDATED

    This event is triggered when the conversation group list is updated.
    let onConversationGroupListUpdated = function(event) {
    console.log(event.data);
    }
    chat.on(TencentCloudChat.EVENT.CONVERSATION_GROUP_LIST_UPDATED, onConversationGroupListUpdated);

    CONVERSATION_IN_GROUP_UPDATED

    This event is triggered when the conversations in a conversation group list updated.
    let onConversationInGroupUpdated = function(event) {
    const { groupName, conversationList } = event.data;
    }
    chat.on(TencentCloudChat.EVENT.CONVERSATION_IN_GROUP_UPDATED, onConversationInGroupUpdated);

    GROUP_LIST_UPDATED

    This event is triggered when the SDK group list updated. The access side can traverse event.data to obtain the group list and render it to the UI.
    let onGroupListUpdated = function(event) {
    console.log(event.data);// Array that stores Group objects - [Group]
    };
    chat.on(TencentCloudChat.EVENT.GROUP_LIST_UPDATED, onGroupListUpdated);

    GROUP_ATTRIBUTES_UPDATED

    This event is triggered when attributes of a group updated.
    let onGroupAttributesUpdated = function(event) {
    const groupID = event.data.groupID
    const groupAttributes = event.data.groupAttributes
    console.log(event.data);
    };
    chat.on(TencentCloudChat.EVENT.GROUP_ATTRIBUTES_UPDATED, onGroupAttributesUpdated);

    GROUP_COUNTER_UPDATED

    This event is triggered when counters of a group updated.
    let onGroupCounterUpdated = function(event) {
    const { groupID, key, value } = event.data;
    };
    chat.on(TencentCloudChat.EVENT.GROUP_COUNTER_UPDATED, onGroupCounterUpdated);

    TOPIC_CREATED

    This event is triggered when a topic created in a community group.
    let onTopicCreated = function(event) {
    const groupID = event.data.groupID; // community group ID
    const topicID = event.data.topicID; // topic ID
    console.log(event.data);
    };
    chat.on(TencentCloudChat.EVENT.TOPIC_CREATED, onTopicCreated);

    TOPIC_DELETED

    This event is triggered when a topic removed from a community group.
    let onTopicDeleted = function(event) {
    const groupID = event.data.groupID; // community group ID
    const topicIDList = event.data.topicIDList; // topic ID
    console.log(event.data);
    };
    chat.on(TencentCloudChat.EVENT.TOPIC_DELETED, onTopicDeleted);

    TOPIC_UPDATED

    This event is triggered when a topic updated in a community group.
    let onTopicUpdated = function(event) {
    const groupID = event.data.groupID; // community group ID
    const topic = event.data.topic; // the lastest topic
    console.log(event.data);
    };
    chat.on(TencentCloudChat.EVENT.TOPIC_UPDATED, onTopicUpdated);

    KICKED_OUT

    This event is triggered when the current user is kicked offline. The access side can read event.data.type to display the reason of forcibly logged out.
    TencentCloudChat.TYPES.KICKED_OUT_MULT_ACCOUNT - The user is forcibly logged out because the same account logs in from multiple webpages on the web client.
    TencentCloudChat.TYPES.KICKED_OUT_MULT_DEVICE - The user is forcibly logged out because the same account logs in from multiple terminals.
    TencentCloudChat.TYPES.KICKED_OUT_USERSIG_EXPIRED - The signature expired.
    TencentCloudChat.TYPES.KICKED_OUT_REST_API - The user is forcibly logged out by the RESTful API.
    let onKickedOut = function(event) {
    console.log(event.data.type);
    };
    chat.on(TencentCloudChat.EVENT.KICKED_OUT, onKickedOut);

    NET_STATE_CHANGE

    This event is triggered when the network status changes. event.data.state indicates the current network status. The enumerated values are described as follows:
    TencentCloudChat.TYPES.NET_STATE_CONNECTED: Already connected to the network.
    TencentCloudChat.TYPES.NET_STATE_CONNECTING: Connecting. This often occurs when the SDK must reconnect due to network jitter. The message "The current network is unstable" or "Connecting..." can be displayed at the access side based on this status.
    TencentCloudChat.TYPES.NET_STATE_DISCONNECTED: Disconnected. The message "The current network is unavailable" can be displayed at the access side based on this status. The SDK will continue to try to reconnect. If the user network recovers, the SDK will automatically synchronize messages.
    let onNetStateChange = function(event) {
    console.log(event.data.type);
    };
    chat.on(TencentCloudChat.EVENT.NET_STATE_CHANGE, onNetStateChange);

    USER_STATUS_UPDATED

    This event is triggered when statuses of subscribed users or statuses of friends updated(Including online status and custom status).
    let onUserStatusUpdated = function(event) {
    console.log(event.data);
    const userStatusList = event.data;
    userStatusList.forEach((item) => {
    const { userID, statusType, customStatus } = item;
    // userID
    // statusType, described as follows:
    // TencentCloudChat.TYPES.USER_STATUS_UNKNOWN
    // TencentCloudChat.TYPES.USER_STATUS_ONLINE
    // TencentCloudChat.TYPES.USER_STATUS_OFFLINE
    // TencentCloudChat.TYPES.USER_STATUS_UNLOGINED
    // customStatus
    })
    };
    chat.on(TencentCloudChat.EVENT.USER_STATUS_UPDATED, onUserStatusUpdated);
    

    PROFILE_UPDATED

    This event is triggered when the profile of the current user or profiles of friends are changed. event.data is an array that stores Profile objects.
    let onProfileUpdated = function(event) {
    console.log(event.data); // Array that stores Profile objects
    };
    chat.on(TencentCloudChat.EVENT.PROFILE_UPDATED, onProfileUpdated);

    BLACKLIST_UPDATED

    This event is triggered when the SDK blocklist is updated.
    let onBlacklistUpdated = function(event) {
    console.log(event.data); // Your blocklist. The value is an array that stores `userID` values.
    };
    chat.on(TencentCloudChat.EVENT.BLACKLIST_UPDATED, onBlacklistUpdated);

    FRIEND_LIST_UPDATED

    This event is triggered when the friend list is updated.
    let onFriendListUpdated = function(event) {
    console.log(event.data);
    }
    chat.on(TencentCloudChat.EVENT.FRIEND_LIST_UPDATED, onFriendListUpdated);

    FRIEND_GROUP_LIST_UPDATED

    This event is triggered when the friend group list is updated.
    let onFriendGroupListUpdated = function(event) {
    console.log(event.data);
    }
    chat.on(TencentCloudChat.EVENT.FRIEND_GROUP_LIST_UPDATED, onFriendGroupListUpdated);

    FRIEND_APPLICATION_LIST_UPDATED

    This event is triggered when the friend application list is updated.
    let onFriendApplicationListUpdated = function(event) {
    // friendApplicationList - Friend request list - [FriendApplication]
    // unreadCount - Number of unread friend requests
    const { friendApplicationList, unreadCount } = event.data;
    // Friend requests received by you (friend requests that are sent to you by others)
    const applicationSentToMe = friendApplicationList.filter((friendApplication) => friendApplication.type === TencentCloudChat.TYPES.SNS_APPLICATION_SENT_TO_ME);
    // Friend requests sent by you (friend requests that you send to others)
    const applicationSentByMe = friendApplicationList.filter((friendApplication) => friendApplication.type === TencentCloudChat.TYPES.SNS_APPLICATION_SENT_BY_ME);
    };
    chat.on(TencentCloudChat.EVENT.FRIEND_APPLICATION_LIST_UPDATED, onFriendApplicationListUpdated);

    Uninitialization

    Terminate the SDK instance. The SDK will log out, disconnect the WebSocket persistent connection, and then release resources.
    chat.destroy();
    Next step, login and logout.
    
    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