Core module

Nabla JS Messaging module

Suggest Edits

Watchers

Watcher type

The SDK returns a Watcher type for every method that watches dynamic content, aka content that be refreshed in real time.

A Watcher has only one subcribe(onNext: (value: T) => void, onError: (error: any) => void) method which returns a Subscription:

  • onNext will be called every time the data is updated
  • onError will be called in case of an error
  • Subscription is an object you should keep a reference on to call unsubscribe when you don't need it anymore.

A typical usage in a React useEffect is the following:

useEffect(() => {
  const subscription = nablaMessagingClient.watchConversations().subscribe(
    (data) => {
      // TODO: handle data
    },
    (error) => {
      // TODO: handle error
    }
  );

  return () => {
    subscription.unsubscribe();
  };
}, []);

Watch a paginated list

Either for the list of conversations or the list of a conversation’s content, the functions watchConversations() and watchConversationItems(conversationId: UUID) will return a Watcher of PaginatedContent<T> where T is the content to be loaded gradually, e.g. conversations or messages.

The returned watcher will emit a new value whenever the concerned data changes. Change can be of any type, for instance in the case of a conversation’s content it can be:

  • New messages arriving in the conversation either from the current user or distant users.
  • Loaded messages changing in any way, for instance:
    • their content being deleted;
    • or their author changing their avatar, etc.
  • New pages loaded using the loadMore trigger.

PaginatedContent also provides a loadMore callback to load more content, precisely an additional page. This callback is async and its Promise<void> will be in error state if the load didn't succeed.

Watch patient conversations list

You can watch the list of conversations a user has access to. This watcher will be called every-time there's a change in those conversations and will always return all the data (You don't need to store them to perform a diff):

const subscription = messagingClient.watchConversations().subscribe(
  ({ conversations, loadMore }) => {
    // You can update your UI with the list of conversations contained in `conversations`
    // To load more conversation, you can use the loadMore callback
    // It will be undefined if there are no more elements to load
  },
  (error) => {
    // TODO: handle error
  }
);

The loadMore callback is simply a nullable async function you can call to load more elements.

if (loadMore) {
  try {
    await loadMore();
    // New items will be added to the current ones and the watcher will be called again with everything
  } catch (e: any) {
    // TODO: handle error loading more
  }
}

🚧

Don't forget to update your loadMore reference every-time you get a new value.

Create a new conversation

If you want your Patient to be able to start a new conversation, you can allow to create it into your app directly:

nablaMessagingClient.createConversation()

Watch a conversation

To watch the items (message and conversation activity) of a conversation, the same pagination principles applies:

const subscription = nablaMessagingClient
  .watchConversationItems(conversation.id)
  .subscribe(
    async ({ items, loadMore }) => {
      // `items` here is a ConversationItem[] which contains all the loaded items of the conversation
    },
    (error) => {
      // TODO: handle error
    }
  );

You can also watch for a conversation details update (like a Provider typing status):

const subscription = messagingClient
  .watchConversation(conversation.id)
  .subscribe(
    (conversation) => {
      // `conversation` is of type `Conversation` and contains all the conversation meta-data
    },
    (error) => {
      // TODO: handle error
    }
  );

Send a new message

Creating and sending your message

The Patient can send a message in an existing conversation:

try {
  await nablaMessagingClient.sendMessage(
    { text: "Text of the message" },
    conversation.id
  );
} catch (e: any) {
  // TODO: handle error sending the message
}

Different types of messages

You can send following types of messages:

  • Text
  • Image
  • Video
  • Document
  • Audio

Here is how to create each of them:

// Text
nablaMessagingClient.sendMessage(
  { text: "Text of the message" },
  conversation.id
);

// Image
client.sendMessage(
  {
    file: fileToUpload, // This is a File, you typically get that from a <input type="file" />
    mimetype: "image/jpeg", // or any other "image/xxx" mimetype
    kind: "image",
  },
  conversation.id
);

// Video
client.sendMessage(
  {
    file: fileToUpload, // This is a File, you typically get that from a <input type="file" />
    mimetype: "video/mp4", // or any other "video/xxx" mimetype
    kind: "video",
  },
  conversation.id
);

// Document
client.sendMessage(
  {
    file: fileToUpload, // This is a File, you typically get that from a <input type="file" />
    mimetype: "application/pdf", // or any other "text/xxx" mimetype
    kind: "document",
  },
  conversation.id
);

// Audio
client.sendMessage(
  {
    file: fileToUpload, // This is a File, you typically get that from a <input type="file" />
    mimetype: "audio/mpeg", // or any other "audio/xxx" mimetype
    kind: "audio",
  },
  conversation.id
);

Updated 16 days ago