The QuickBlox Developer Hub

Welcome to the QuickBlox developer hub. You'll find comprehensive guides and documentation to help you start working with QuickBlox as quickly as possible, as well as support if you get stuck. Let's jump right in!

Get Started    

Advanced

Use this page to configure some additional settings for your messaging app.

This is our new documentation for beta version of QuickBlox React Native SDK. Please contact our Customer Support Team to provide your feedback, suggestions, and requests to improve this page.

Message statuses

Every message has statuses as sent, delivered and read. Thus, in the message model you can find IDs of users who have read the message (status read) or who have received the message but it still unread (status delivered).

Delivered status

To handle message delivered event the following code can be used.

function messageDelivered (event) {
  const {
    type, // name of the event (the one you've subscribed for)
    payload, // event data
  } = event
  const {
    dialogId, // in dialog with id specified
    messageId, // message with id specified
    userId // was delivered to user with id specified
  } = payload
  // handle as necessary
}

emitter.addListener(
  QB.chat.EVENT_TYPE.MESSAGE_DELIVERED,
  messageDelivered
);

Receive message status

To receive events about messages status updates, you have to subscribe to such events using subscribeMessageStatus().

QB.chat
  .subscribeMessageStatus({ dialogId: 'dsfsd934329hjhkda98793j2' })
  .then(function () { /* subscribed successfully */ })
  .catch(function (e) { /* handle error */ })

The SDK sends the delivered status automatically when the message is received by the recipient. This is controlled by the markable parameter when you send a message.

If markable is false or omitted, then you can send the delivered status manually via Chat.

QB.chat
  .markMessageDelivered({ messageId, dialogId })
  .then(function () { /* marked as "delivered" successfully */ })
  .catch(function (e) { /* handle error */ })

Read status

To send the read status use the following code snippet.

QB.chat
  .markMessageRead({ messageId, dialogId })
  .then(function () { /* marked as "delivered" successfully */ })
  .catch(function (e) { /* handle error */ })

Is typing status

The following typing notifications are supported.

  • typing. The user is composing a message. The user is actively interacting with a message input interface specific to this chat session (e.g. by typing in the input area of a chat window).
  • stopped. The user had been composing but now has stopped. The user has been composing but has not interacted with the message input interface for a short period of time (e.g. 30 seconds).

In order to receive events about the typing status updates you have to subscribe to such events.

QB.chat
  .subscribeTyping({ dialogId: 'dsfsd934329hjhkda98793j2' })
  .then(function () { /* subscribed successfully */ })
  .catch(function (e) { /* handle error */ })

Send the typing status.

QB.chat
  .sendIsTyping({ dialogId: 'dsfsd934329hjhkda98793j2' })
  .then(function () { /* sent successfully */ })
  .catch(function (e) { /* handle error */ })

Send the stopped typing status.

QB.chat
  .sendStoppedTyping({ dialogId: 'dsfsd934329hjhkda98793j2' })
  .then(function () { /* sent successfully */ })
  .catch(function (e) { /* handle error */ })

Attachments

Chat attachments are supported by the cloud storage API. In order to send a chat attachment, you need to upload the file to QuickBlox cloud storage and obtain a link to the file (file UID). Then you need to include this UID into chat message and send it.

const url = '...' // path to file in local file system
QB.content
  .upload({ url, public: false })
  .then(function (file) {
    // create a message
    const message = {
      dialogId: 'dsfsd934329hjhkda98793j2',
      body: 'Hey there!',
      saveToHistory: true
    };
    // attach file
    message.attachments = [{
      id: file.uid,
      type: file.contentType
    }];
    
    // send a message
    // ...
    }
  })
  .catch(function (e) { /* handle file upload error */ });

The flow on the receiver's side is the following: when you receive a message, you need to get the file URL to download the file from the cloud storage.

// received message
const { attachments } = message
const [attachment] = attachments
QB.content
  .getPrivateURL({ uid: attachment.id })
  .then(function (url) { /* you download file using obtained url */ })
  .catch(function (e) { /* handle error */ });

Offline messages

When you send a chat message and the recipient/recipients is offline, then automatic push notification will be fired. In order to receive push notifications, you need to subscribe for it. Please refer to Push Notifications guide.

To configure push template received by the user go to Dashboard Console => Chat Alerts page.

Pay attention

Currently, push notifications are supported in the mobile environment only.

Updated 10 days ago


What's Next

Video Calling

Advanced


Use this page to configure some additional settings for your messaging app.

Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.