Get and View a Message

To view the content of a message using the Amity Chat SDK, developers can utilize a message object. The message content can then be used to display to the user in a chat interface, or to perform other operations on the message data as needed. This allows developers to build chat applications that support messaging using the Amity Chat SDK and provides a foundation for building more advanced chat applications that require more complex message handling and processing. The Amity Chat SDK provides several methods for viewing messages in a chat channel. Here's how to use these methods in your app:

Get a single message

To get a single message by its ID, use the getting message function of the Amity Chat SDK. This method returns a message live object, which you can use to display the message in your app. Here's an example:

You can use the getMessage method to get a single comment. You need to pass the messageId of the requested message as the parameter.

import { MessageRepository } from '@amityco/js-sdk';

const liveObject = MessageRepository.getMessage('messageId');
let message = liveObject.model;

liveObject .on('dataUpdated', data => {
  message = data;
});

liveObject .on('dataError', error => {
  console.error(error);
});

// unobserve data changes once you are finished
liveObject.dispose();

The method returns a liveobject instance of a message model. It will throw an error if the passed messageId is not valid.

Get messages with a query

You can also use a query to get messages that match specific criteria. The querying and filtering messages function of the Amity Chat SDK enables you to retrieve messages based on different parameters such as a specific user, a date range, or a keyword search. please refer to the page - Query and Filter Messages

View a message

Text Message

This is the most basic type of message, and is useful for sending simple messages such as chat messages, system notifications, or status updates. Each text message has a character limit of 20,000 characters, making it suitable for sending concise messages.

import React, { useEffect, useState } from 'react';
import { FileRepository, MessageType } from '@amityco/js-sdk';

// renders a text message
const TextContent = ({ data, fileId }) => {
  return data?.text ? <p>{data!.text}</p> : null;
}

Image Message

Sending visual content such as photos, graphics, or images in a channel is facilitated by this type of message. The maximum size for an image is 1 GB, and the image will be automatically transformed into four different sizes for versatile usage which are:

Small
Medium
Large
Full

This allows for flexible usage and easy integration into various chat applications. For more information about an image, please refer to the page - Image Handling.

import React, { useEffect, useState } from 'react';
import { FileRepository } from '@amityco/js-sdk';

const ImageMessageContent = ({ data, fileId }) => {
  const [file, setFile] = useState();

  useEffect(() => {
    const liveObject = FileRepository.getFile(fileId);

    liveObject.on('dataUpdated', setFile);
    liveObject.model && setFile(liveObject.model);

    return () => liveObject.dispose()
  }, [fileId])

  return (
    <>
      {data?.caption && <p>{data!.caption}</p>}
      {file && <img src={file.fileUrl} />}
    </>
  )
}

Version 6

In TypeScript SDK, viewing a file, image, and audio message have the same steps and sample code. You can query all file types with observeFile.

Beta (v0.0.1)

File Message

This is a message that contains a file attachment, such as a PDF, a Word document, or any other type of file. This is a useful type of message for sharing files within a channel, such as a document or a photo. The maximum size for a file is 1 GB. For more information about a file, please refer to the page - File Handling

In iOS SDK, AmityFileRepository provides downloadFile: and downloadFileAsData: method to download the file from URL. The same method can be used to download the audio.

import React, { useEffect, useState } from 'react';
import { FileRepository, MessageType } from '@amityco/js-sdk';

// renders a file message
const FileContent = ({ data, fileId }) => {
  const [file, setFile] = useState();

  useEffect(() => {
    const liveObject = FileRepository.getFile(fileId);

    liveObject.on('dataUpdated', setFile);
    liveObject.model && setFile(liveObject.model);

    return () => liveObject.dispose()
  }, [fileId])

  return (
    <>
      {file && <a href={file.fileUrl} download>{file.attributes.name}</a>}
      {data?.caption && <p>{data!.caption}</p>}
    </>
  )
}

Video Message

This is a useful type of message for sharing video content within a chat conversation, such as a short clip or a longer video. The maximum size for a video is 1 GB, and the video will be automatically transcoded into different resolutions for versatile usage which are

1080p
720p
480p
360p
original

Once you uploaded a video the videos undergo transcoding from their original resolution. You can quickly access the original size of the video right after you make the video message. However, it takes time for the transcoded resolutions to be ready. This allows for flexible usage and easy integration into various chat application. For more information about a video, please refer to the page - Video Handling.

Custom Message

In addition to the built-in message types such as text, image, file, audio, and video, the Amity Chat SDK also provides support for "custom messages". Custom messages allow users to design their own JSON structure that can be used to represent any kind of data, essentially providing the freedom to create their own message types.

This can be useful for a variety of use cases. For example, a developer building a chat application for a sports team could use custom messages to create a "score update" message type that contains data such as the score of a game, the time remaining, and other relevant information. Similarly, a developer building a chat application for an e-commerce platform could use custom messages to create a "product update" message type that contains information such as product details, availability, pricing, and other relevant data.

The possibilities for custom messages are endless, and can be tailored to the specific needs of any application. Custom messages can be sent and received using the Amity Chat SDK, and can be queried and displayed in a chat channel just like any other message type.

Last updated 4 months ago