Send first chat message

The ConnectyCube Chat API is a set of tools that enables developers to integrate real-time messaging into their web and mobile applications. With this API, users can build powerful chat functionalities that support one-on-one messaging, group chats, typing indicators, message history, delivery receipts, and push notifications.

If you’re planning to build a new app, we recommend starting with one of our code samples apps as a foundation for your client app.
If you already have an app and you are looking to add a chat to it, proceed with this guide. This guide walks you through installing the ConnectyCube SDK in your app, configure it and then sending your first message to the opponent in 1-1 chat.

Before you start

Before you start, make sure:

1. You have access to your ConnectyCube account. If you don’t have an account, sign up here.
2. An app created in ConnectyCube dashboard. Once logged into your ConnectyCube account, create a new application and make a note of the app credentials (app ID, auth key, and auth secret) that you’ll need for authentication.

Step 1: Configure SDK

To use chat in a client app, you should install, import and configure ConnectyCube SDK.

Note: If the app is already created during the onboarding process and you followed all the instructions, you can skip the ‘Configure SDK’ step and start with Create and Authorise User.

Install SDK

React, Angular, Vue etc.

Install package from the command line:

npm

npm install connectycube --save

yarn

yarn add connectycube

Plain HTML

Сonnect SDK js file as a normal script:

<script src="https://cdn.jsdelivr.net/npm/connectycube/dist/connectycube.min.js"></script>

Import SDK

Add the following import statement to start using all classes and methods.

import ConnectyCube from 'react-native-connectycube';

*this is not needed for Plain HTML

Initialize SDK

Initialize framework with your ConnectyCube application credentials. You can access your application credentials in ConnectyCube Dashboard:

const CREDENTIALS = {
  appId: 21,
  authKey: "hhf87hfushuiwef",
  authSecret: "jjsdf898hfsdfk",
};

ConnectyCube.init(CREDENTIALS);

Step 2: Create and Authorise User

To make API requests, firstly you need to create and authenticate a user who will send/receive messages in chat later.

Create an application session

ConnectyCube.createSession()
  .then((session) => {})
  .catch((error) => {});

Register a user

const userProfile = {
  login: "marvin18",
  password: "supersecurepwd",
  email: "awesomeman@gmail.com",
  full_name: "Marvin Simon",
  phone: "47802323143",
  website: "https://dozensofdreams.com",
  tag_list: ["iphone", "apple"],
  custom_data: JSON.stringify({ middle_name: "Bartoleo" }),
};

ConnectyCube.users
  .signup(userProfile)
  .then((user) => {})
  .catch((error) => {});

Create a user’s session

To allow users to proceed with any actions within the application, you need to create a session for them. Having created an application session, you need to upgrade it to a user session by calling login method:

const userCredentials = { login: "marvin18", password: "supersecurepwd" };

ConnectyCube.login(userCredentials)
  .then((session) => {})
  .catch((error) => {});

Now that the user is authorized in the application, they can proceed with chat creation and messaging with opponent(s).

Step 3: Connect User to chat

Connecting to the chat is an essential step in enabling real-time communication. By establishing a connection, the user is authenticated on the chat server, allowing them to send and receive messages instantly. Without this connection, the app won’t be able to interact with other users in the chat.

const userCredentials = {
  userId: 4448514,
  password: "supersecurepwd",
};

ConnectyCube.chat
  .connect(userCredentials)
  .then(() => {
    // connected
  })
  .catch((error) => {});

Step 4: Create 1-1 chat

Creating a 1-1 chat gives a unique conversation ID to correctly route and organize your message to the intended user.

You need to pass type: 3 (1-1 chat) and an id of an opponent you want to create a chat with:

const params = {
  type: 3,
  occupants_ids: [56],
};

ConnectyCube.chat.dialog
  .create(params)
  .then((dialog) => {})
  .catch((error) => {});

Step 5: Send / Receive chat messages

Once the 1-1 chat is set up, you can use it to exchange messages seamlessly. The code below demonstrates how to send and receive messages within a specific 1-1 chat.

const dialog = ...;
const opponentId = 56;
const message = {
  type: dialog.type === 3 ? 'chat' : 'groupchat',
  body: "How are you today?",
  extension: {
    save_to_history: 1,
    dialog_id: dialog._id
  }
};

message.id = ConnectyCube.chat.send(opponentId, message);

// ...

ConnectyCube.chat.onMessageListener = onMessage;

function onMessage(userId, message) {
    console.log('[ConnectyCube.chat.onMessageListener] callback:', userId, message)
}

Congratulations! You’ve mastered the basics of sending a chat message in ConnectyCube.

What’s next?

To take your chat experience to the next level, explore ConnectyCube advanced functionalities, like adding typing indicators, using emojis, sending attachments, and more.

Follow the Chat API documentation to enrich your app and engage your users even further!