tencent cloud

PrevNext

Feedback

search by keyword

Recent Pages

Documentation
Chat
    Documentation
    Download PDF

    React Native

    Last updated: 2024-01-31 15:54:33
    Download PDF

      Overview

      All types of messages (text, custom, and rich media messages) are listened for and received with the addAdvancedMsgListener API, with the callbacks defined in the protocol of V2TimAdvancedMsgListener.

      Setting Message Listeners

      Advanced message listener

      Adding a listener

      The receiver calls the addAdvancedMsgListener API to add the advanced message listener. It is recommended to call the API early (such as after the chat page is initialized) to ensure timely message receiving in the application.
      Sample code:
      import { TencentImSDKPlugin } from 'react-native-tim-js';
      
      TencentImSDKPlugin.v2TIMManager.getMessageManager().addAdvancedMsgListener(
              {
                onRecvC2CReadReceipt: ( receiptList) {},// The one-to-one message read notification (a notification is received when the receiver calls `markC2CMessageAsRead`).
                onRecvMessageModified: ( message) {},// The message content is modified.
                onRecvMessageReadReceipts: ( receiptList) {},// The message read receipt notification (if read receipts are supported, the notification is received when the receiver calls `sendMessageReadReceipts`).
                onRecvMessageRevoked: ( messageid) {},// Received a message recall notification.
                onRecvNewMessage: ( message) {},// Received a new message.
                onSendMessageProgress: ( message,  progress) {},// The message upload progress event.
              }
      );

      Removing a listener

      To stop receiving messages, the receiver calls removeAdvancedMsgListener to remove the advanced message listener.
      Sample code:
      import { TencentImSDKPlugin } from 'react-native-tim-js';
      
      // Create a listener
      const listener = {
          onRecvC2CReadReceipt: (receiptList) {},
          onRecvMessageModified: (message) {},
          onRecvMessageReadReceipts: (receiptList) {},
          onRecvMessageRevoked: (messageid) {},
          onRecvNewMessage: (message) {},
          onSendMessageProgress: (message, progress) {},
        };
      // Register the listener
        TencentImSDKPlugin.v2TIMManager
            .getMessageManager()
            .addAdvancedMsgListener(listener);
      // Remove the listener
      TencentImSDKPlugin.v2TIMManager.getMessageManager().removeAdvancedMsgListener(listener);

      Receiving Text Messages

      The receiver can receive a one-to-one or group text message with the advanced message listener in the following steps:
      1. Call addAdvancedMsgListener to set the event listener.
      2. Listen for the onRecvNewMessage callback that contains the text message.
      3. To stop receiving messages, call removeAdvancedMsgListener to remove the listener. This step is optional and can be performed as needed.
      Sample code:
      
      import { TencentImSDKPlugin, MessageElemType} from 'react-native-tim-js';
      
      const listener = {
          onRecvC2CReadReceipt: (receiptList) {},
          onRecvMessageModified: (message) {},
          onRecvMessageReadReceipts: (receiptList) {},
          onRecvMessageRevoked: (messageid) {},
          onRecvNewMessage: (message) {
            if(message.elemType == MessageElemType.V2TIM_ELEM_TYPE_TEXT){
              const text = message.textElem.text;
            }
          },
          onSendMessageProgress: (message, progress) {},
        };
      TencentImSDKPlugin.v2TIMManager
            .getMessageManager()
            .addAdvancedMsgListener(listener);

      Receiving Custom Messages

      The receiver can receive a custom one-to-one or group message with the advanced message listener in the following steps:
      1. Call addAdvancedMsgListener to set the event listener.
      2. Listen for the onRecvNewMessage callback that contains the custom message.
      3. To stop receiving messages, call removeAdvancedMsgListener to remove the listener. This step is optional and can be performed as needed.
      Sample code:
      import { TencentImSDKPlugin, MessageElemType} from 'react-native-tim-js';
      
      const listener = {
          onRecvC2CReadReceipt: (receiptList) {},
          onRecvMessageModified: (message) {},
          onRecvMessageReadReceipts: (receiptList) {},
          onRecvMessageRevoked: (messageid) {},
          onRecvNewMessage: (message) {
            if(message.elemType == MessageElemType.V2TIM_ELEM_TYPE_CUSTOM){
              const text = message.textElem.text;
              const data = message.customElem.data;
              const desc = message.customElem.desc;
              const ext = message.customElem.extension;
            }
          },
          onSendMessageProgress: (message, progress) {},
        };
      TencentImSDKPlugin.v2TIMManager
            .getMessageManager()
            .addAdvancedMsgListener(listener);

      Receiving Rich Media Messages

      The receiver can receive a rich media message only with the advanced message listener in the following steps:
      1. Call the addAdvancedMsgListener API to set the advanced message listener.
      2. Listen for the onRecvNewMessage callback to get the V2TimMessage message.
      3. Parse the elemType attribute in the V2TIMMessage message, and then parse the message again according to the type to get the specific content of the elements in the message.
      4. To stop receiving messages, call removeAdvancedMsgListener to remove the listener. This step is optional and can be performed as needed.

      Image message

      The image in an image message can be in three formats: original, large, and thumbnail. The latter two are automatically generated by the SDK during message sending and can be ignored. Large (large image): A large image is an image obtained after the original image is proportionally compressed. After the compression, the height or width (whichever is shorter) is equal to 720 pixels. Thumb (thumbnail): A thumbnail is an image obtained after the original image is proportionally compressed. After the compression, the height or width (whichever is shorter) is equal to 198 pixels.
      The message URL is not returned when the list of rich media messages is obtained, and it needs to be obtained through getMessageOnlineUrl. The local URL of a rich media message is no longer returned by default and will be returned after the message is downloaded successfully through downloadMessage.
      The following sample code demonstrates how to parse the image content from V2TimMessage:
      import { TencentImSDKPlugin, MessageElemType} from 'react-native-tim-js';
      
      const listener = {
          onRecvC2CReadReceipt: (receiptList) {},
          onRecvMessageModified: (message) {},
          onRecvMessageReadReceipts: (receiptList) {},
          onRecvMessageRevoked: (messageid) {},
          onRecvNewMessage: (message) {
            if(message.elemType == MessageElemType.V2TIM_ELEM_TYPE_IMAGE){
              const path = message
                  .imageElem.path; // Image upload path. This field applies only to the message sender who can use it to display the image on the screen in advance to optimize the experience
              message.imageElem.imageList.map(item => { // // Traverse large images, original images, and thumbnails
                // Parse the image attribute
                const height = item.height;
                const localUrl = item.localUrl;
                const size = item.size;
                const type = item.type; // Large image, thumbnail, or original image
                const url = item.url;
                const uuid = item.uuid;
                const width = item.width;
              })
            }
          TencentImSDKPlugin.v2TIMManager
             .getMessageManager()
             .getMessageOnlineUrl(message.msgID);
      
          TencentImSDKPlugin.v2TIMManager
                  .getMessageManager()
                  .downloadMessage(message, 3, 0, false);
          },
          onSendMessageProgress: (message, progress) {},
        };
        TencentImSDKPlugin.v2TIMManager
            .getMessageManager()
            .addAdvancedMsgListener(listener: listener);
      
      

      Video message

      After a video message is received, a video preview is displayed on the chat page, and the video is played back after the user clicks the message. Two steps are required:
      The message URL is not returned when the list of rich media messages is obtained, and it needs to be obtained through getMessageOnlineUrl. The local URL of a rich media message is no longer returned by default and will be returned after the message is downloaded successfully through downloadMessage.
      The following sample code demonstrates how to parse the video content from V2TimMessage:
      if (message.elemType == MessageElemType.V2TIM_ELEM_TYPE_VIDEO) {
        // Parse the video message attributes such as thumbnail, playback address, width and height, and size
        message.videoElem.UUID;
        message.videoElem.duration;
        message.videoElem.localSnapshotUrl;
        message.videoElem.localVideoUrl;
        message.videoElem.snapshotHeight;
        message.videoElem.snapshotPath;
        // ...
        TencentImSDKPlugin.v2TIMManager
           .getMessageManager()
           .getMessageOnlineUrl(message.msgID);
      
        TencentImSDKPlugin.v2TIMManager
                .getMessageManager()
                .downloadMessage(message, 5, 0, true);
      }

      Audio message

      The message URL is not returned when the list of rich media messages is obtained, and it needs to be obtained through getMessageOnlineUrl. The local URL of a rich media message is no longer returned by default and will be returned after the message is downloaded successfully through downloadMessage.
      The following sample code demonstrates how to parse the audio content from V2TimMessage:
      if (message.elemType == MessageElemType.V2TIM_ELEM_TYPE_SOUND) {
        // Parse the playback address, local address, size, and duration of the audio message.
        message.soundElem.UUID;
        message.soundElem.dataSize;
        message.soundElem.duration;
        message.soundElem.localUrl;
        message.soundElem.url;
        // ...
        TencentImSDKPlugin.v2TIMManager
           .getMessageManager()
           .getMessageOnlineUrl(message.msgID);
      
        TencentImSDKPlugin.v2TIMManager
                .getMessageManager()
                .downloadMessage(message, 4, 0, true);
      }

      File message

      The React Native SDK will download file messages when free, which can be directly used by you and will be cleared when the application is uninstalled.
      The following sample code demonstrates how to parse the file content from V2TimMessage:
      if (message.elemType == MessageElemType.V2TIM_ELEM_TYPE_FILE) {
        // Parse the filename, size, URL and other info of the file message
        message.fileElem.UUID;
        message.fileElem.fileName;
        message.fileElem.fileSize;
        message.fileElem.localUrl;
        message.fileElem.path;
        message.fileElem.url;
      
        TencentImSDKPlugin.v2TIMManager
           .getMessageManager()
           .getMessageOnlineUrl(message.msgID);
      
        TencentImSDKPlugin.v2TIMManager
                .getMessageManager()
                .downloadMessage(message, 6, 0, true);
      }

      Geographical location message

      After receiving the geographical location message, the receiver can parse the latitude and longitude information directly from locationElem. The following sample code demonstrates how to parse the geographical location content from V2TimMessage:
      if (message.elemType == MessageElemType.V2TIM_ELEM_TYPE_LOCATION) {
        // Parse the geographical location information such as latitude, longitude, and description
        message.locationElem.desc;
        message.locationElem.latitude;
        message.locationElem.longitude;
      }

      Emoji message

      The SDK only provides a message passthrough channel for an emoji message. For message content fields, see faceElem, where the contents of index and data are customized by the user.
      For example, the sender can set index to 1 and data to x12345 to indicate the smile emoji. The receiver parses the received emoji message as 1 and x12345 and displays the message as the smile emoji according to the preset rules.
      The following sample code demonstrates how to parse the emoji content from V2TIMMessage:
      if (message.elemType == MessageElemType.V2TIM_ELEM_TYPE_FACE) {
        message.faceElem.data;
        message.faceElem.index;
      }

      Group tip message

      Group tip messages are tips received by users other than ordinary messages in a group chat, such as "The admin removed alice from the group chat" and "bob renamed the group "xxxx"".
      Note:
      Group tip messages apply to group members only.
      There are several types of group tip messages, as stated in V2TIMGroupTipsElem.
      After receiving a group tip message, the receiver generally needs to:
      1. Parse all fields in V2TIMGroupTipsElem.
      2. Identify the message type according to type.
      3. Merge other fields into the content for display according to the type.
      Example: V2TIM_GROUP_TIPS_TYPE_GROUP_INFO_CHANGE is parsed from the type, indicating that this is a notification of group profile change. The receiver can get the operator information from opMember and the new group name from groupChangeInfoList. At this point, the receiver can merge the "operator" and "new group name" to create a group tip, such as "Alice renamed the group as "group123"".
      The following sample code demonstrates how to parse the tip content from V2TIMMessage:
      if (message.elemType == MessageElemType.V2TIM_ELEM_TYPE_GROUP_TIPS) {
        message.groupTipsElem.groupID; // Group
        message.groupTipsElem.type; // Group tip type
        message.groupTipsElem.opMember; // Operator profile
        message.groupTipsElem.memberList; // User profile being operated
        message.groupTipsElem.groupChangeInfoList; // Group information change details
        message.groupTipsElem.memberChangeInfoList; // Group member change information
        message.groupTipsElem.memberCount; // Number of current online group members
      }

      Receiving Messages Containing Multiple Element Objects

      1. Parse the first element object from the Message object.
      2. Get the next element object through the nextElem method of the first element object. If the next object exists, an element object instance is returned; otherwise, null is returned.
      Sample code:
      if (message.textElem.nextElem != null) {
        // There is a next element
      }
      Contact Us

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

      Contact Us
      Technical Support

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

      Submit a Ticket
      7x24 Phone Support
      Copyright © 2013-2024 Tencent Cloud. All Rights Reserved.
      Privacy PolicyLegalCookie Policy